@soyguijarro

Creative web developer with an interest for design, communication and data. JavaScript and React enthusiast. Proud h4ckademy alumni.

Ramón Guijarro

Setting expectations

What and why

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

“

”

https://facebook.github.io/react/

Simple

Powerful

Predictable

Flexible

Simple

Powerful

Predictable

Flexible

Small API

Builds on JavaScript

Modular ecosystem

Simple

Powerful

Predictable

Flexible

Declarative

Unidirectional

Simple

Powerful

Predictable

Flexible

Component model

Single-purposed

Unopinionated

Tools and processes

npm install -g create-react-app

create-react-app my-awesome-app
cd my-awesome-app

npm start

npm run build

Some basics

Component

Function

Class

State

Lifecycle

types

import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    return (
      <h1>Hello, {this.props.name}!</h1>
    );
  }
}

export default HelloWorld;

Class

import React from 'react';

const HelloWorld = (props) => {
  return (
    <h1>Hello, {props.name}!</h1>
  );
};

export default HelloWorld;

Function

import React from 'react';

const HelloWorld = ({ name }) => (

  <h1>Hello, {name}!</h1>
);

export default HelloWorld;        

Function

Props

State

Component

render

Props

Immutable

From parent to children

Functions as props to go up

Props

Immutable

From parent to children

Functions as props to go up

Props

Immutable

From parent to children

Functions as props to go up

State

Lives inside component

Updates are async and batched

Different ways to set it

Class-only

State

Lives inside component

Updates are async and batched

Different ways to set it

Class-only

State

Lives inside component

Updates are async and batched

Different ways to set it

Class-only

Digging deeper

setState

Class-only

object

f(prevState, props)

nextState

this.setState((prevState, step) => ({
  count: prevState.items + props.step
});

setState

Class-only

this.setState({ count: 3 });

Mounting

Updating

Lifecycle methods

Unmounting

Class-only

Mounting

constructor

componentWillMount

componentDidMount

render

Class-only

props

—

—

—

Updating

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

Class-only

nextProps

nextProps, nextState

nextProps, nextState

—

prevProps, prevState

Unmounting

componentWillUnmount

Class-only

—

More important API

Common patterns