The ProductiveDeveloper Guide to

React

Maurice de BeijerThe Problem SolverMicrosoft Azure MVPFreelance developer/instructorTwitter: @mauricedbWeb: http://www.TheProblemSolver.nlE-mail: maurice.de.beijer@gmail.com

WHO AM I?

WHAT IS REACT?

React is a JavaScript libraryfor building user interfaces

- Facebook

WHERE DOES REACT COME FROM?Created at FacebookPowers Facebook, Instagram, AirBNB and many more

REACT VS ANGULAR

ANGULAR 2 IS OPINIONATED

REACT NOT SO MUCH

CREATE-REACT-APPThe o᪑cial React starter project

JSX IS THE LANGUAGE OF CHOICEIt combines ECMAScript and HTML markup

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} 

COMPONENTSThe building blocks of a React application

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} 

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

SERVER SIDE RENDERINGReactDOMServer can render the components as a stringUseful for server side rendering and SEO

COMPONENTS & PROPSProps are inputs to componentsThey should never be updated

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> 

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} 

COMPONENTS & STATEInternal to a componentCan be used as props for a child component

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.   } 

PRESENTATION & CONTAINER COMPONENTSKeep responsibilities separate

PRESENTATION COMPONENTSOnly concerned with rendering elements on screenTakes all the input data as props

CONTAINER COMPONENTSDo not directly render any elements on screenContain all state management logicBetter yet: Use Redux or MobX

EVENT HANDLINGDOM events are exposed to components

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 =  

Maurice de Beijer - @mauricedb