Introduction à
React et Redux

9 Février 2019

Tom Darneix

Tom Darneix

22 ans

Développeur frontend

Scrum Master Certifié

Contributeur open-source

react-d3-heatmap

Tom Darneix

@ThisIsBarda

Sommaire

Introduction à React

Gérer les données avec Redux

Démo (Todo App)

Qu'est ce que React ?

Bibliothèque front-end

Facebook (2013)

Single Page Application (SPA)

Composants

Eco-système

Javascript (.jsx)

Redux

React router

React bootstrap

State of JS 2018

Pourquoi React ?

Principes fondamentaux

JSX

// index.jsx ou index.js
import React from 'react'
import ReactDOM from 'react-dom'

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Helen',
  lastName: 'Ripley'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);
<!--index.html-->
<html>
    <head>
        <title>Hello</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>
<!--HTML généré dans le DOM-->
<html>
    <head>
        <title>Hello</title>
    </head>
    <body>
        <div id="root">
            <h1>
                Hello, Helen Ripley!
            </h1>
        </div>
    </body>
</html>

Principes fondamentaux

JSX



function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

Principes fondamentaux

Composants

A peu près...

Principes fondamentaux

Composants fonctionnel

const RenderForm = () => (
    <form>
        <input type="text" />
        <input type="submit" value="Submit" />
        <input type="cancel" value="Cancel" />
    </form>
);

ReactDOM.render(
    <RenderForm />,
    document.getElementById('root')
);

Principes fondamentaux

Composants de classe

class RenderForm extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <form>
                <input type="text" />
                <input type="submit" value="Submit" />
                <input type="cancel" value="Cancel" />
            </form>
        )
    }
}

ReactDOM.render(
    <RenderForm />,
    document.getElementById('root')
);

Principes fondamentaux

Props

class RenderForm extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        const { inputValue, submitValue, cancelValue } = this.props
        return (
            <form>
                <input type="text" value={inputValue} />
                <input type="submit" value={submitValue} />
                <input type="cancel" value={cancelValue} />
            </form>
        )
    }
}

ReactDOM.render(
    <RenderForm inputValue='hello' submitValue='Go' cancelValue='Do not submit' />,
    document.getElementById('root')
);

Principes fondamentaux

Props

const RenderForm = props => (
    <form>
        <input type="text" value={props.inputValue} />
        <input type="submit" value={props.submitValue} />
        <input type="cancel" value={props.cancelValue} />
    </form>
)

ReactDOM.render(
    <RenderForm inputValue='hello' submitValue='Go' cancelValue='Do not submit' />,
    document.getElementById('root')
);

Principes fondamentaux

State

class RenderForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            inputValue: ''
        }
    }

    handleChangeInput = e => {
        this.setState({ inputValue: e.target.value })
    }

    render() {
        return (
            <div>
                <input
                    type="text"
                    value={this.state.inputValue}
                    onChange={this.handleChangeInput}
                />
                <p><b>Input value : </b>{this.state.inputValue}</p>
            </div>
        )
    }
}

Cycle de vie

Mise en place

npm i -g create-react-app

create-react-app test-react

Mise en place

Manuel

Webpack

Browserify JS

Comment gérer des structures de données complexes ?

Redux

Redux

Centralisé (store)

Store

Stocke les structures de données

console.log(store.getState())

/* Prints
{
  todo : {
    visibilityFilter: 'SHOW_ALL',
    todos: [
        {
          text: 'Consider using Redux',
          completed: true,
        },
        {
          text: 'Keep all state in a single tree',
          completed: false
        }
    ]
  },
  user : {
    firstName: 'Helen',
    lastName: 'Ripley'
  }
}
*/

Actions

Modification du Store Redux

store.dispatch({
  type: 'ADD_TODO',
  todo: { text: 'Faire un truc', completed: false } 
})

Reducers

Spécifie le comportement de modification du store

// reducers/todoReducer.js

const initialState = {
    visibilityFilter: 'SHOW_ALL',
    todos: []
}

function todo(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      const prevTodos = Array.from(state.todos)
      prevTodos.push(action.todo)
      return {
        ...state,
        todos: prevTodos
      }
    default:
      return state
  }
}

Mise en place de Redux

// reducers/index.js

import { combineReducers } from 'redux'
import todo from './todoReducer'

export default combineReducers({
  todo
})

Reducers

Mise en place de Redux

// store/index.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';
import logger from 'redux-logger'

export default function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk, logger)
    );
}

Store

Mise en place de Redux

// index.js

{...}

import { Provider } from "react-redux";
import configureStore from './store/'

const store = configureStore()

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, document.getElementById('root'));
{...}

Connexion à React

Pour aller plus loin...

https://reactjs.org

Cycle de vie des composants

Eslint

Prettier

Jest, Enzyme

Rekit

React Native

Pour le fun !

react-spectacle

react-360

Demo (Todo App)

Merci :D

Introduction à React et Redux

By thebardapnk

Made with Slides.com

Introduction à React et Redux

  • 80