universal javascript in react
TRANSCRIPT
class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; }}
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
class App extends Component { componentWillMount() { setTimeout(() => { this.setState({title: '5s elapsed!'}) }, 5000) }
render() { return <h1>{this.state.title}</h1>; }}
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!') }}
import ReactDOM from 'react-dom/server';
ReactDOM.renderToString(<HelloMessage name="Sebastian" />);
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);
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);}
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`]);});
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 RouterTransmit.render(ReactRouter.Router, {routes: routes, history: ReactRouter.browserHistory}, reactRoot);
