Mais conteúdo relacionado Semelhante a A full introductory guide to React (20) A full introductory guide to React7. React is a library for
building modular
and reusable user
interfaces
8. It is good for
webapps that has
different states and
also to define a
styleguide
16. class HelloMessage extends React.Component {
render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
}
17. class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
tick() {
this.setState(prevState => ({
seconds: prevState.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>Seconds: {this.state.seconds}</div>
);
}
}
State
management
Life cycles
HTML with
states and props
21. The role of the
Virtual DOM is to
transform the render
result in imperative
DOM instructions
27. There is at least the
need of using Babel
with Transform
React JSX plugin
34. class ServerTime extends React.Component {
constructor(props) {
super(props);
this.state = { time: 'Fetching' };
}
componentDidMount() {
axios.get('/time.json')
.then(res => this.setState({ time: res.data.time }));
}
render() {
return (
<div>{this.state.time}</div>
);
}
}
Get a response
and change
the state
37. class ServerTime extends React.Component {
constructor(props) {
super(props);
this.cancelToken = axios.CancelToken.source();
this.state = { time: 'Fetching' };
}
componentDidMount() {
axios.get('/time.json', { cancelToken: this.cancelToken.token })
.then(res => this.setState({ time: res.data.time }));
}
componentWillUnmount() {
this.cancelToken.cancel('Operation canceled by the user.');
}
render() {
return (
<div>{this.state.time}</div>
);
}
}
Cancel token
40. class ServerTime extends React.Component {
constructor(props) {
super(props);
this.state = { time: 'Fetching' };
}
componentDidMount() {
/* Fetch server time */
}
render() {
return (
<div>
<Header time={this.state.time} />
<Content time={this.state.time} />
<Footer time={this.state.time} />
</div>
);
}
}
Send the time via
prop to different
components
44. window.user = { name: 'Jean' }
All components can
easily access the user
But what happens
if the user login or
logout
47. import { connect } from 'react-redux';
const mapStateToProps = state => ({ user: state.user })
export default connect(mapStateToProps)(Header);
Maps the user
to a prop
53. function Content(props) {
return (
<div className='content'>
{props.children}
</div>
);
}
<Content>
<Article />
<Comments />
</Content>
Usage
Content is a
generic box
55. import { connect } from 'react-redux';
const mapStateToProps = state => ({ user: state.user })
export default connect(mapStateToProps)(Header);
It’s a HOC
56. <UserProvider>
{user => (
<Header {...this.props} user={user}/>
)}
</UserProvider>
Function as child
component
function UserProvider(props) {
return props.children(window.user);
}
57. A render prop is a
function prop that a
component uses to
know what to render
https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce
59. • Children
• Function as Child
Component
• Higher-Order
Component
• Function (render) as
Prop Component
60. const HelloWorld = () => (<div>Hello world</div>);
React Stateless
Functional
Components
65. class HelloMessage extends React.PureComponent {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
Shallow
compare
68. const BasicExample = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</div>
</Router>
)
React Router code example
69. It can be very
complex if you try
to async load data
and animate the
transitions
79. I hope it inspires you
@jcemer
Thank you!