The document discusses React, a JavaScript library for building user interfaces. It was created at Facebook and is used by many companies like Facebook, Instagram, and AirBnB. React uses components as building blocks and JSX as its language. Components receive data through props and can have internal state. The document covers topics like components, props, state, presentation vs container components, and event handling in React.

1. The Productive
Developer Guide to
React

2. Maurice de Beijer
The Problem Solver
Microsoft Azure MVP
Freelance developer/instructor
Twitter: @mauricedb
Web: http://www.TheProblemSolver.nl
E-mail: maurice.de.beijer@gmail.com
WHO AM I?

3. WHAT IS REACT?

4. React is a JavaScript library
for building user interfaces
- Facebook

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

6. REACT VS ANGULAR

7. ANGULAR 2 IS OPINIONATED

8. REACT NOT SO MUCH

9. CREATE-REACT-APP
The o᪑cial React starter project

10. JSX IS THE LANGUAGE OF CHOICE
It combines ECMAScript and HTML markup

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

12. COMPONENTSThe building blocks of a React application

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

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

15. SERVER SIDE RENDERING
ReactDOMServer can render the components as a string
Useful for server side rendering and SEO

16. COMPONENTS & PROPS
Props are inputs to components
They should never be updated

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

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

19. COMPONENTS & STATE
Internal to a component
Can be used as props for a child component

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

21. PRESENTATION & CONTAINER COMPONENTS
Keep responsibilities separate

22. PRESENTATION COMPONENTS
Only concerned with rendering elements on screen
Takes all the input data as props

23. CONTAINER COMPONENTS
Do not directly render any elements on screen
Contain all state management logic
Better yet: Use Redux or MobX

24. EVENT HANDLING
DOM events are exposed to components

25. 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 =

26. Maurice de Beijer - @mauricedb