�ݺ�ߣ

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);
}

�ݺ�ߣ

Universal Javascript in React

More Related Content

Universal Javascript in React

Editor's Notes