Universal Javascript in React
•
0 j'aime•515 vues
Chcecie poznać technologię używaną między innymi przez Netflixa? Developerzy z Apptension poprowadzili 3-godzinny warsztat, na którym każdy z uczestników samodzielnie napisał aplikację typu SPA za pomocą Reacta i Reduxa, renderowaną na backendzie dzięki NodeJS. Przyjęta architektura obniża znacząco czas ładowania strony i pozwala na automatycznie indeksowanie przez przeglądarki takie jak Bing, Yahoo, Baidu czy Yandex. Would you like to get to know the technology used by e.g. Netflix? Apptension conducted a 3-hour workshop on using Universal JavaScript in React. They were overseeing the work of IT students writing an SPA using React and Transmit, and rendering these apps via NodeJS server. This speeds up the loading process and allows for the web page to be automatically indexed even by browsers such as Bing, Yahoo, Baidu and Yandex.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (13)
En vedette
Similaire à Universal Javascript in React
Similaire à Universal Javascript in React (20)
Dernier
Dernier (20)
Universal Javascript in React
- 13. class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
- 14. class App extends Component { componentWillMount() { setTimeout(() => { this.setState({title: '5s elapsed!'}) }, 5000) } render() { return <h1>{this.state.title}</h1>; } }
- 15. class LifecycleComponent extends React.Component { componentWillMount() { console.log('Component WILL MOUNT!') } componentDidMount() { console.log('Component DID MOUNT!') } componentWillReceiveProps(newProps) { console.log('Component WILL RECEIVE PROPS!') } componentWillUpdate(nextProps, nextState) { console.log('Component WILL UPDATE!'); } componentDidUpdate(prevProps, prevState) { console.log('Component DID UPDATE!') } }
- 17. import ReactDOM from 'react-dom/server'; ReactDOM.renderToString(<HelloMessage name="Sebastian" />);
- 19. import {Router, browserHistory} from 'react-router'; const routes = ( <Route path="/" component={App}> <IndexRoute component={CharacterListContainer}/> <Route path=":id" component={CharacterContainer}/> </Route> ); ReactDOM.render(<Router routes={routes} history={browserHistory}/>, reactRoot);
- 20. import fetch from 'isomorphic-fetch'; const promise = fetch('http://example.com/users'); promise.then(onSuccess, onFailure); function onSuccess(users) { console.table(users.json()); } function onFailure(err) { console.error(err); }
- 22. const RootProvider = React.createClass({ render () { return <ReactRouter.RouterContext {...this.props} />; } }); Transmit.renderToString(RootProvider, renderProps).then(({reactString, reactData}) => { let template = ( `<!doctype html> <html> <body> <div id='react-root'>${reactString}</div> </body> </html>` ); return Transmit.injectIntoMarkup(template, reactData, [`/main.js`]); });
- 23. const StudentDetailsTransmit = Transmit.createContainer(StudentDetails, { initialVariables: {}, fragments: { student(variables) { return Promise.resolve({ name: variables.name }); } } }); Transmit.render(<StudentDetailsTransmit variables={{name: 'kowalski'}}/>, reactRoot); // Or with React Router Transmit.render(ReactRouter.Router, {routes: routes, history: ReactRouter.browserHistory}, reactRoot);
Notes de l'éditeur
- Część 2: mówi o tym, jak się dzisiaj programuje i jakie są problemy tłumaczymy czym jest universal i jak to pomogło netflixowi przypomnienie reacta i dlaczego pozwala na universal Część 3: Opowiadamy o aplikacji i przedstawiamy pierwszy sprint Iteracja 1: Checkout do kroku 1 Napisanie komponentu App.js + hello world na środu ekranu Iteracja 2: Checkout do kroku 2 Dodanie server.js bez transmita (react dom) Iteracja 3: Checkout do kroku 3 Pobieranie danych z marvel api na froncie Wytłumaczenie dlaczego się zepsuło Iteracja 4: Checkout do kroku 4 Podłączenie transmita Część 4: Podsumowanie i Q&A Część 5: Jesteśmy cool, mamy react, es 2015, mamy startup, i inne fajne słowa
- Wspomnieć o http2 Nie tłumaczcie “Flash of unstyled content” - jak to, nie mogę dać “nagły napływ nieostylowanej treści?” NNNT? NIE? SAMI SE RÓBCIE TE PREZKE!!!jeden!!
- Nie tłumaczcie “Flash of unstyled content”
- setState prowadzi do rendera