Andrew Dacenko <asd@fb.com>
Frontend Engineer @Facebook
August 6, 2018
Declarative
Component-Based
Write Everywhere
<Square color="black" />
<Form>
<Input />
<Input />
<FileInput />
<Submit />
</Form>
$ git checkout -b hello-world hello-world
$ yarn && yarn start
class HelloMessage extends React.Component {
render() {
return <div>{'Hello, ' + this.props.message + '!'}</div>;
}
}
ReactDOM.render(
<HelloMessage message="World"/>,
document.getElementById('root')
);
class HelloMessage extends React.Component {
render() {
return React.createElement(
'div',
null,
'Hello, ' + this.props.message + '!'
);
}
}
ReactDOM.render(
React.createElement(HelloMessage, { message: 'World' }),
document.getElementById('root')
);
Play around with props
class Clicker extends React.Component {
state = {
count: 0,
};
render() {
return (
<div className="container">
<button className="button" onClick={() => {
this.setState({
count: this.state.count + 1,
});
}}>
Increment
</button>
<Counter count={this.state.count}/>
</div>
);
}
}
$ git checkout -b state-updates state-updates
Flux
Redux
MobX
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
<BrowserRouter>
<App/>
</BrowserRouter>
), holder)
import { Route, Switch } from 'react-router-dom'
// when location = { pathname: '/about' }
<Route path='/about' component={About}/> // renders <About/>
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders <Always/>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
{/* when none of the above match, <NoMatch> will be rendered */}
<Route component={NoMatch}/>
</Switch>
$ git checkout -b store store