Download to read offline
![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`]);
});](https://image.slidesharecdn.com/ieastecaseweek-160415084013/85/Universal-Javascript-in-React-22-320.jpg)
Uploaded byApptension
Universal Javascript in React
The document contains various React component definitions and lifecycle methods, detailing how to render components and handle routing with React Router. It includes examples of using fetch for data retrieval and shows how to work with server-side rendering. Additionally, it demonstrates the use of promises for asynchronous operations and creating a container for data management in React.
Universal Javascript in React
- 13. class HelloMessage extendsReact.Component { render() { return <div>Hello {this.props.name}</div>; } } ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
- 14. class App extendsComponent { componentWillMount() { setTimeout(() => { this.setState({title: '5s elapsed!'}) }, 5000) } render() { return <h1>{this.state.title}</h1>; } }
- 15. class LifecycleComponent extendsReact.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);
Editor's Notes
- #4 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
- #9 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!!
- #10 Nie tłumaczcie “Flash of unstyled content”
- #15 setState prowadzi do rendera