the productive developer guide to react
TRANSCRIPT
![Page 1: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/1.jpg)
The ProductiveDeveloper Guide to
React
![Page 2: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/2.jpg)
Maurice de BeijerThe Problem SolverMicrosoft Azure MVPFreelance developer/instructorTwitter: @mauricedbWeb: http://www.TheProblemSolver.nlE-mail: [email protected]
WHO AM I?
![Page 3: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/3.jpg)
WHAT IS REACT?
![Page 4: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/4.jpg)
React is a JavaScript libraryfor building user interfaces
![Page 5: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/5.jpg)
WHERE DOES REACT COME FROM?Created at FacebookPowers Facebook, Instagram, AirBNB and many more
![Page 6: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/6.jpg)
REACT VS ANGULAR
![Page 7: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/7.jpg)
ANGULAR 2 IS OPINIONATED
![Page 8: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/8.jpg)
REACT NOT SO MUCH
![Page 9: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/9.jpg)
CREATE-REACT-APPThe o᪑cial React starter project
![Page 10: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/10.jpg)
JSX IS THE LANGUAGE OF CHOICEIt combines ECMAScript and HTML markup
![Page 11: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/11.jpg)
React JSX
1. import React, {Component} from 'react'; 2. import {path} from './config'; 3. 4. class Billboard extends Component { 5. render() { 6. const movie = this.props.movie; 7. 8. return ( 9. <div className="row">
10. <div className="title"> 11. {movie.title}
![Page 12: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/12.jpg)
COMPONENTSThe building blocks of a React application
![Page 13: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/13.jpg)
React Components example
1. import React, {Component} from 'react'; 2. import {path} from './config'; 3. 4. class Billboard extends Component { 5. render() { 6. const movie = this.props.movie; 7. 8. return ( 9. <div className="row">
10. <div className="title"> 11. {movie.title}
![Page 14: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/14.jpg)
import React from 'react'; import ReactDOM from 'react‐dom'; import App from './app';
ReactDOM.render(React.createElement(App), document.getElementById('app'));
ReactDOMReactDOM renders the components into the DOM
![Page 15: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/15.jpg)
SERVER SIDE RENDERINGReactDOMServer can render the components as a stringUseful for server side rendering and SEO
![Page 16: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/16.jpg)
COMPONENTS & PROPSProps are inputs to componentsThey should never be updated
![Page 17: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/17.jpg)
Parent Components example
1. import React, { PropTypes } from 'react'; 2. import Movie from './movie'; 3. 4. const MovieList = ({ movies }) => { 5. return ( 6. <div className="movie‐list"> 7. {movies.map(movie => ( 8. <Movie key={movie.id} 9. movie={movie}
10. />))} 11. </div>
![Page 18: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/18.jpg)
Child Components example
1. import React, { Component, PropTypes } from 'react'; 2. import {path} from './config'; 3. 4. class Movie extends Component { 5. render() { 6. const { movie } = this.props; 7. 8. return ( 9. <div className="movie"> 10. <div className="title"> 11. {movie.title}
![Page 19: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/19.jpg)
COMPONENTS & STATEInternal to a componentCan be used as props for a child component
![Page 20: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/20.jpg)
Stateful Components example
1. import React, { Component } from 'react'; 2. import MovieList from './movie‐list'; 3. 4. class MovieContainer extends Component { 5. constructor(props) { 6. super(props); 7. 8. this.state = { 9. movies: null, 10. }; 11. }
![Page 21: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/21.jpg)
PRESENTATION & CONTAINER COMPONENTSKeep responsibilities separate
![Page 22: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/22.jpg)
PRESENTATION COMPONENTSOnly concerned with rendering elements on screenTakes all the input data as props
![Page 23: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/23.jpg)
CONTAINER COMPONENTSDo not directly render any elements on screenContain all state management logicBetter yet: Use Redux or MobX
![Page 24: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/24.jpg)
EVENT HANDLINGDOM events are exposed to components
![Page 25: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/25.jpg)
Event handling example
1. import React, { Component, PropTypes } from 'react'; 2. 3. class LoginPage extends Component { 4. constructor(props) { 5. super(props); 6. 7. this.state = { 8. name: '', 9. }; 10. 11. this.onNameChange =
![Page 26: The productive developer guide to React](https://reader031.vdocuments.net/reader031/viewer/2022022201/589ab94b1a28abff4f8b65f1/html5/thumbnails/26.jpg)
Maurice de Beijer - @mauricedb