Le programme

Rappels

Ecmascript, Asynchrone,
React
Les hooks

1.

2.

Fonctionnement et Performance

3.

Gestion d'état et Bonus

# Intro

# Intro

Informations pratiques

- 9H - 12h30

- 14h - 17h30

Demandez-moi des pauses :)

Florent Berthelot

- 8 ans dans 2 sociétés de services (Viseo, Zenika)
- Freelance (WeFacto)

- Actuellement en mission chez Hero (paiement B2B)

https://berthelot.io

Fil rouge
Correction à la fin de la formation

Travaux Pratique

Demandez-moi de l'aide !

Dispo sur https://berthelot.io

Slides

Je navigue de formation en formation

JavaScript

Quel est la version actuel de JavaScript ?

# JavaScript

Histoire et Rappels

https://berthelot.io/slides/javascript.html

https://berthelot.io/slides/javascript.html#/11/0

Outillage

Node, NPM, Yarn, pNPM, ...

# Outillage

Outillage Node.js

https://slides.com/florentberthelot/outillage-node-js

# Outillage

Create React App

React

Rappel, JSX

Qu'est ce que React ?

# Rappel React

Pourquoi un Framework JS ?

# Rappel React

Comment React est apparu ?

Facebook !

# Rappel React

Popularité ?

# Rappel React

Les avantages

- Stable
- Stable

- JSX

- Assez performant

- Simple !

- Progressive Framework ou Lib

# Rappels

Où se positionne React ?

- Angular

- Vue.JS

- Là

Le "Hello World"

<div id="my-react-application"></div>

# Rappel React

const domContainer = document.querySelector('#my-react-application');


ReactDOM.render(React.createElement('h1', {}, 'Hello world'), domContainer);

JSX

Un peu plus ?

# JSX

const domContainer = document.querySelector('#training-app-react');
ReactDOM.render(
  React.createElement('main', {}, 
  [
    React.createElement('header', {},
       React.createElement('h1', {}, 'Hello world')           
    ),
    React.createElement('section', {}, 'lorem ipsum')
  ])
, domContainer);

Encore peu plus ?

# JSX

const domContainer = document.querySelector('#training-app-react');
ReactDOM.render(
  React.createElement('main', {}, 
  [
    React.createElement('header', {},
       React.createElement('h1', {}, 'Hello world')           
    ),
    /** ... **/
    React.createElement('section', {},
       React.createElement('article', {}, [
        React.createElement('p', {}, 'lorem ipsum'),
        React.createElement('p', {}, 'lorem ipsum')
       ]),
       React.createElement('article', {}, [
        React.createElement('p', {}, 'lorem ipsum'),
        React.createElement('p', {}, 'lorem ipsum')
       ])
    )
    /** ... **/
  ])
, domContainer);

JSX à la rescousse

# JSX

const domContainer = document.querySelector('#training-app-react');
ReactDOM.render(
  <main>
    <header>
      <h1>Hello world</h1>
    </header>
    {/** ... **/}
    <section>
      <article>
        <p>lorem ipsum</p>
        <p>lorem ipsum</p>
      </article>
      <article>
        <p>lorem ipsum</p>
        <p>lorem ipsum</p>
      </article>
    </section>
    {/** ... **/}
  </main>
, domContainer);

Composant

Qu'est ce qu'un composant ?

<LikeButton></LikeButton>

ou 

<LikeButton />

# Template

Qu'est ce qu'un composant ?

<!-- Composant Parent -->
<LikeButton></LikeButton>

# Template

Composant

Qu'est ce qu'un composant ?

<!-- Composant Parent -->
<LikeButton></LikeButton>

# Template

Composant

Vue

// like.component.jsx
const LikeButton = () => {
  return <button>O j'aime</button>;
}

Améliorons notre code !

# Template

Composant

Vue

// like.component.jsx
const LikeButton = () => {
  const nbOfLike = 0;
  
  return <button>{nbOfLike} j'aime</button>;
}

Améliorons notre code !

# Template

Composant

Vue

// like.component.jsx
const LikeButton = () => {
  const nbOfLike = 0;
  
  return <button>{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}</button>;
}

Et la sémantique HTML ?

# Template

Composant

Vue

// like.component.jsx
const LikeButton = () => {
  const nbOfLike = 0;
  
  return (
    <button type="button">
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

Et le style ?

# Template

Composant

Vue

// like.component.jsx
const LikeButton = () => {
  const nbOfLike = 0;
  
  return (
    <button type="button" className="btn-primary">
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

Mieux ?

# Template

Composant

Vue

// like.component.jsx
const LikeButton = () => {
  const nbOfLike = 0;
  const liked = true;
  
  return (
    <button type="button" className="btn-primary" style={{color: liked ? 'red' : 'grey'}}>
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

Encore mieux ?

# Template

Composant

Vue

// like.component.jsx
const LikeButton = () => {
  const nbOfLike = 0;
  const liked = true;
  
  return (
    <button type="button" className={`btn-primary ${liked ? 'btn-liked' : ''}`}>
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

Les fragments

const Tweets = () => {
    const datas = [/* ... */]
    return (
      <React.Fragment>
        <Tweet data={datas[0]}/>
        <Tweet data={datas[1]}/>
      </React.Fragment>
    )
}

# Tips

Les fragments - version courte

const Tweets = () => {
    const datas = [/* ... */]
    return (
      <>
        <Tweet data={datas[0]}/>
        <Tweet data={datas[1]}/>
      </>
    )
}

# Tips

Boucles

const Tweets = () => {
  const items = [
    {id: 1, price: 10_00},
    {id: 2, price: 150_00}
  ]
  return (
    <ul>
      {items.map((item) => {
        return <li>{item.price}</li>;
      })}
    </ul>
  )
}

# Tips

Boucles

const Tweets = () => {
  const items = [
    {id: 1, price: 10_00},
    {id: 2, price: 150_00}
  ]
  return (
    <ul>
      {items.map((item) => {
        return <li key={item.id}>{item.price}</li>;
      })}
    </ul>
  )
}

# Tips

Important !
Fait l'objet d'une règle ESLint

Boucles, autre exemple

const Tweets = () => {
  const tweets = [
    {id: 1, message: 'coucou' /* ...*/ },
    {id: 2, message: 'un thread !' /* ...*/ }
  ]
  return (
    <section>
      {tweets.map(tweet => {
        return <Tweet key={tweet.id} tweet={tweet}/>;
      })}
    </section>
  )
}

# Tips

Tests

Généralités

https://slides.com/florentberthelot/javascript-craftmanship/#/1

Tests

Et React dans tout ça ?

Un composant = une fonction sans paramètre !

# React Testing

La vue, l'enjeux des library de test de composants

# React Testing

Enzyme, Testing-Library

import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import '@testing-library/jest-dom'
import MainComponent from './main.component'

it('should display all usernames', async () => {
  render(<MainComponent />)

  expect(screen.getByRole('heading')).toHaveTextContent('Florent')
  expect(screen.getByRole('heading')).toHaveTextContent('Agnès')
  expect(screen.getByRole('heading')).toHaveTextContent('Nobel')
})

# React Testing

Un exemple

# React Testing

Comment trouver des éléments ?

https://testing-library.com/docs/react-testing-library/cheatsheet

# React Testing

Comment trouver des éléments ?

<div data-testid="custom-element" />

// --

import {screen} from '@testing-library/dom'

const element = screen.getByTestId('custom-element')

# React Testing

Comment trouver des éléments ?

import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import '@testing-library/jest-dom'
import MainComponent from './main.component'

it('should display all usernames', async () => {
  const { container } = render(<MainComponent />);

  expect(container.querySeelctor('header'))
	.toHaveTextContent('Florent')
})

# React Testing

Une extension de Jest

https://github.com/testing-library/jest-dom

Les props

Les fonctions ça prends des paramètres

Comment passer des données ?

# Props

Composant

Vue

// like.component.jsx
const LikeButton = () => {
  const nbOfLike = 0;
  const liked = true;
  
  return (
    <button type="button" className={`btn-primary ${liked ? 'btn-liked' : ''}`}>
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

<!-- Composant Parent -->
<LikeButton></LikeButton>

Comment passer des données ?

# Props

Composant

Vue

// like.component.jsx
const LikeButton = (props) => {
  const nbOfLike = props.nbOfLike;
  const liked = props.liked;
  
  return (
    <button type="button" className={`btn-primary ${liked ? 'btn-liked' : ''}`}>
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

<!-- Composant Parent -->
<LikeButton liked={true} nbOfLike={1} />

Propriétés

Mieux ?

# Props

Composant

Vue

// like.component.jsx
const LikeButton = (props) => {
  const nbOfLike = props.nbOfLike;
  const liked = props.liked;
  
  return (
    <button type="button" className={`btn-primary ${liked ? 'btn-liked' : ''}`}>
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

<!-- Composant Parent -->
<LikeButton liked nbOfLike={1} />

Propriétés

Destructuring ?!

# Props

Composant

Vue

// like.component.jsx
const LikeButton = ({
  nbOfLike,
  liked
}) => {
  return (
    <button type="button" className={`btn-primary ${liked ? 'btn-liked' : ''}`}>
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

<!-- Composant Parent -->
<LikeButton liked nbOfLike={1} />

Propriétés

Events
&
Hooks

Le state

# State & effects

Composant

Vue

// like.component.jsx
const LikeButton = () => {
  const nbOfLike = 0;
  
  return (
    <button type="button">
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

<!-- Composant Parent -->
<LikeButton />

Propriétés

Le state

# State & effects

Composant

Vue

// like.component.jsx
const LikeButton = () => {
  const NbLikeState = React.useState(0);
  
  return (
    <button type="button">
    	{NbLikeState[0]} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

Propriétés

State

Le state : Destructuring !

# State & effects

Composant

Vue

// like.component.jsx
const LikeButton = () => {
  const [nbOfLike, setNbOfLike] = React.useState(0);
  
  return (
    <button type="button">
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

Propriétés

State

# State

Instant bonne pratique.

Tout ce qui est dans un React.useState doit être totalement indépendant des autres useState.

Qu'est ce qu'un effet de bords ?

# State & effects

Composant

Vue

const Timer = () => {
  const [ellapsedTime, setEllapsedTime] = React.useState(0);
  
  
  return <span>Il s'est passé {ellapsedTime} secondes.</span>;
}

Propriétés

State

UseEffect

# State & effects

Composant

Vue

const Timer = () => {
  const [ellapsedTime, setEllapsedTime] = React.useState(0);
  
  React.useEffect(() => {
    setInterval(() => {
      setEllapsedTime((ellapsedTime) => ellapsedTime + 1);
    }, 1000)
  }, [])
  
  
  return <span>Il s'est passé {ellapsedTime} secondes.</span>;
}

Propriétés

State

Fuite mémoire ?

# State & effects

Composant

Vue

const Timer = () => {
  const [ellapsedTime, setEllapsedTime] = React.useState(0);
  
  React.useEffect(() => {
    const interval = setInterval(() => {
      setEllapsedTime((ellapsedTime) => ellapsedTime + 1);
    }, 1000)
    
    return () => {
      clearInterval(interval);
    }
  }, [])
  
  
  return <span>Il s'est passé {ellapsedTime} secondes.</span>;
}

Propriétés

State

Les évènements

Comment écouter le click ?

# Évenement

Composant

Vue

// like.component.jsx
const LikeButton = () => {
  const [nbOfLike, setNbOfLike] = React.useState(0);
  
  return (
    <button type="button">
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

Propriétés

State

onClick ! (camelCase)

# Évenement

Composant

Vue

// like.component.jsx
const LikeButton = () => {
  const [nbOfLike, setNbOfLike] = React.useState(0);
  
  return (
    <button type="button" onClick={() => setNbOfLike(nbOfLike++)}>
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

Propriétés

State

Ses propres évènements ?

# Évenement

Composant

Vue

// like.component.jsx
const LikeButton = ({onLike, nbOfLike}) => {
  
  return (
    <button type="button" onClick={() => onLike()}>
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

Propriétés

State

const Tweet = () => {
  const [nbOfLikes, setNbOfLikes] = useState(0);
  return <LikeButton nbOfLikes={nbOfLikes} onLike={() => setNbOfLikes(nbOfLikes++)} />
}

Comment tester des évènements ?

# Évenement

L'empathie !

Comment tester des évènements ?

# Évenement

Comment tester des évènements ?

# Évenement

import { fireEvent, render } from '@testing-library/react';

it('should display 1 like when cliking on the button', () => {
  const {getByText, container} = render(<LikeButton />);
  
  fireEvent(
    getByText(container, '0 like'),
    new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
    }),
  )

  getByText(container, '1 like')
})

Mieux ?

# Évenement

import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event'

it('should display 1 like when cliking on the button', () => {
  const {getByText, container} = render(<LikeButton />);
  
  await userEvent.click(getByText(container, '0 like'));

  getByText(container, '1 like');
})

React, fin des rappels

Valeurs par défaut

const LikeButton = ({
  onLike = () => {},
  nbOfLike = 0
}) => {  
  return (
    <button type="button" onClick={() => onLike()}>
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

# Rappels Fin

Valeurs par défaut

const LikeButton = ({onLike, nbOfLike}) => {  
  return (
    <button type="button" onClick={() => onLike()}>
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

LikeButton.defaultProps = {
	onLike: () => {},
	nbOfLike: 0
}

# Rappels Fin

Validation de props

import PropTypes from 'prop-types';


const LikeButton = ({onLike, nbOfLike}) => {  
  return (
    <button type="button" onClick={() => onLike()}>
    	{nbOfLike} j'aime{nbOfLike > 1 ? 's' : ''}
    </button>;
  );
}

LikeButton.defaultProps = {
	nbOfLike: 0
}

LikeButton.proptypes = {
  onLike: PropTypes.func.isRequired,
  nbOfLike: PropTypes.number
}

# Rappels Fin

Affichage conditionnel

const Tweets = ({
  isUserTweet
}) => {
  return (
    <article>
      {/* ... */}
      {
        isUserTweet ?
           <EditButton /> :
           null
      }
    </article>
  )
}

# Rappels Fin

Affichage conditionnel ?

const Tweets = ({
  isUserTweet
}) => {
  return (
    <article>
      {/* ... */}
      {isUserTweet && <EditButton />}
    </article>
  )
}

# Tips

Affichage conditionnel ?

const Tweets = ({
  isUserTweet
}) => {
  return (
    <article>
      {/* ... */}
      {isUserTweet ?? <EditButton />}
    </article>
  )
}

# Tips

Transclusion, children, ...

const Parent = () => {
  return (
    <Modal>
    	<h2>lorem ipsum</h2>
    	<button>close</button>
    </Modal>
}


const Modal = ({children}} => {
  return (
    <div className="modal">
	  {children}
    </div>
  )
}

# Tips

Les références

# Refs

Qu'est ce que c'est ?

Un moyen d’accéder aux nœuds du DOM ou éléments React

# Refs

Quand ?

- Besoin d'accéder au DOM pour gérer le positionnement
- Interfaçage avec une API tierce
- Lancer des animations, ...

# Refs

Quand ?

- Besoin d'accéder au DOM pour gérer le positionnement
- Interfaçage avec une API tierce
- Lancer des animations, ...

Cas d'usage rare, a utiliser rarement.

Le cas jamais utilisé

class AnExample extends React.Component {
  constructor(props) {
    super(props);
    this.refToChildren = React.createRef();
  }

  componentDidMount() {
    this.refToChildren.current.displayHello();
  }

  render() {
    return (
      <ISayHello ref={this.refToChildren} />
    );
  }

# Refs

Le cas jamais utilisé

class ISayHello extends React.Component {
  constructor(props) {
    super(props);
    this.sayHello = this.sayHello.bind(this);
  }

  sayHello() {
    console.log('hello la formation')
  }

  render() {
    return (
      <></>
    );
  }
}

# Refs

Le cas jamais utilisé

class AnExample extends React.Component {
  constructor(props) {
    super(props);
    this.refToChildren = React.createRef();
  }

  componentDidMount() {
    this.refToChildren.current.displayHello();
  }

  render() {
    return (
      <ISayHello ref={this.refToChildren} />
    );
  }

# Refs

Ne marche pas avec les Functional Component

Le cas utile

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  focusTextInput() {
    this.textInput.current.focus();
  }

  componentDidMount() {
    this.focusTextInput()
  }

  render() {
    return (
      <>
        <input
          type="text"
          ref={this.textInput} />
      </>
    );
  }
}

# Refs

Le cas utile

function CustomTextInput(props) {
  const textInput = useRef(null);

  useEffect(() => {
    textInput.current.focus();
  }, [])

  return (
    <>
      <input
        type="text"
        ref={textInput} />
    </>
  );
}

# Refs

Le transfert de Refs

const Main = () => {
  const theRef = useRef(null);
  return <Coucou ref={theRef} />
}


const Coucou = () => {
  return (
    <main>
      <section>
		{/* ... */}
	  </section>

	  <section>
		{/* ... */}
	  </section>
    </main>
  );
}

# Refs

Où va la ref ?

Le transfert de Refs

const Main = () => {
  const theRef = useRef(null);
  return <Coucou ref={theRef} />
}


const Coucou = React.forwardRef((props, ref) => {
  return (
    <main ref={ref}>
      <section>
		{/* ... */}
	  </section>

	  <section>
		{/* ... */}
	  </section>
    </main>
  );
})

# Refs

Où va la ref ?

Les Hooks !

Mais avant...

Comment ça fonctionne React ?

https://docs.google.com/presentation/d/1zfuQ8tgtcYpUMsyydrD4R88F9NG-c8SguHlR77Mt2J4/edit#slide=id.g4c4870d5d1_0_413

# Les hooks

Règle #1 :

Toujours appeler les hooks depuis un composant React.

# Les hooks

Règle #2 :

Toujours appeler les hooks au plus haut niveau de la fonction de rendu.

(Pas dans une boucle, pas dans un if, etc.)

# Les hooks

Quel est l'interêt ?

- Réutiliser de la logique !

- Donner du sens au lifecycle

UseMemo

const Einstein = () => {
  const result = React.useMemo(() => whatIsTheLifeGoal(), []);
  
  return result;
}

# Les hooks

UseMemo

const Einstein = ({
  humanName
}) => {
  const result = React.useMemo(
    () => whatIsTheLifeGoal(humanName),
    [humanName]
  );
  
  return result;
}

# Les hooks

UseMemo

const Einstein = ({
  humanName
}) => {
  const result = React.useMemo(() => whatIsTheLifeGoal(humanName));
  
  return result;
}

# Les hooks

UseEffect

const Tweet = ({id}) => {
  useEffect(() => {
   	console.log('A new render occured');
  })
  
  return result;
}

# Les hooks

UseEffect

const Tweet = ({id}) => {
  useEffect(() => {
   	console.log('Id changed', id);
  }, [id])
  
  return result;
}

# Les hooks

UseEffect

const Tweet = ({id}) => {
  useEffect(() => {
   	console.log('Initial id', id);
  }, [])
  
  return result;
}

# Les hooks

UseCallback

const TweetEdit = ({id}) => {
  const handleSubmit = useCallback(() => {
    fetch(`addTweet?userId=${id}`)
  }, [id])
  
  return <TweetForm onSubmit={handleSubmit} />;
}

# Les hooks

Un hook custom ?

const TweetEdit = ({id}) => {
  const [inputValue, setInputValue] = useState(initialValue);
  
  const onInput = (e) => {
    setInputValue(e.target.value);
  }
  
  return <input type="text" onInput={onInput} value={inputValue} />;
}

# Les hooks

Un hook custom !

const useInput = (initialValue) => {
  const [inputValue, setInputValue] = useState(initialValue);
  
  const onInput = (e) => {
    setInputValue(e.target.value);
  }
  
  return [inputValue, onInput];
}



const TweetEdit = ({id}) => {
  const [value, onInput] = useInput()
  
  return <input type="text" onInput={onInput} value={value} />;
}

# Les hooks

UseReducer

const initialState = {hpPokemon1: 500, hpPokemon2: 500};

function reducer(state, action) {
  switch (action.type) {
    case 'pokemon1Attack':
      return {...state, hpPokemon2: state.hpPokemon2 - 50};
    case 'pokemon2Attack':
      return {...state, hpPokemon1: state.hpPokemon1 - 50};
    default:
      throw new Error();
  }
}


const PokemonArena = ({id}) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    dispatch('pokemon1Attack');
  }, [])
  
  return <PokemonBattle hpPokemon1={state.hpPokemon1} hpPokemon2={state.hpPokemon2}>;
}

# Les hooks

UseState Vs useReducer ?

# Les hooks

Quand il y a plusieurs variables liée qui se mettent à jour en même temps, je préfère le useReducer.

C'est moins error-prone de faire des dispatchs dans ces cas là.

D'autre hooks ?

# Les hooks

Bonus : Comment les Hooks sont codé

# Les hooks

https://github.com/FBerthelot/component-test-utils/blob/master/packages/component-test-utils-react/src/dispatcher/index.js

https://twitter.com/asidorenko_/status/1616115618356379663?t=eSm5gFicrha4YFuVJCuXMg&s=31

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

# Les hooks

Qu'est ce que React.StrictMode

useEffect(()=>{
      console.log('How many time I render ?');
}, []);

# Les hooks

StrictMode

useEffect(()=>{
      console.log('How many time I render ?');
}, []);

# Les hooks

StrictMode

2 fois !

Le but ? Être certain que vous faite un bon cleanup et que certaines choses n'arriverons pas en production.

Devtools

Installation

# Devtools

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Demo Time On :

https://react-devtools-tutorial.vercel.app/

Display Name

const MyComponent = () => {
	return <h1>Hello World</h1>;
}

# Devtools

Display Name

const MyComponent = React.forwardRef((props, ref) => {
	return <h1 ref={ref}>Hello World</h1>;
})


// Comment trouver le nom de ce composant ??

# Devtools

Display Name

const MyComponent = React.forwardRef((props, ref) => {
	return <h1 ref={ref}>Hello World</h1>;
});


MyComponent.displayName = "MyComponent";

// Aussi utile si vous minifier le code ;)

# Devtools

UseDebugValue

const Tweet = ({id}) => {
  // Affiche l'ID dans les Devtools React
  useDebugValue(id);
  
  return result;
}

# Devtools

Gestion des Erreurs

Gestion des erreurs

const Tweet = () => {
  return (
    <ErrorBoundary>
      <LikeButton />
    </ErrorBoundary>
  )
}


const LikeButton = () => {
  throw new Error('Not Implemented');
}

# Error boundary

Gestion des erreurs

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    sendErrorToSentry(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Page d'erreur.</h1>;
    }

    return this.props.children;
  }
}

# Error boundary

# Error Boundary

Attention

Cela ne gère pas les erreurs dans les évènements ! C'est uniquement pour les erreurs critiques.

Performance

# Performance

Avant-propos

La recherche de la performance arrive en dernier dans le développement.

Vraiment en dernier.

Genre uniquement quand il y a des problèmes de perfs. Pas avant.

React Lazy

# Les perfs

Attention : Ceci n'est pas disponible côté server.

(Nest.js, propose une alternative similaire)

React Lazy

# Les perfs

Prérequis => https://slides.com/florentberthelot/les-modules-javascript/

React Lazy

# Les perfs

import React, { Suspense } from 'react';

const MyBeautifulComponentThatUseD3JS = React.lazy(
  () => import('./MyBeautifulComponentThatUseD3JS')
);

const MainComponent = () => {
  return (
    <div>
	  <header>
		<h1>Mon super graph</h1>
      </header>
      <Suspense fallback={<div>Chargement...</div>}>
        <MyBeautifulComponentThatUseD3JS />
      </Suspense>
    </div>
  );
}

React Lazy - Devtools

# Les perfs

https://react-devtools-tutorial.vercel.app/toggling-suspense-fallbacks

Un problème de perf ?

# Les perfs

Encore les devstools !

https://react-devtools-tutorial.vercel.app/profiling

Quelques pistes d'améliorations

# Les perfs

1 - Corriger la cause avant d'optimiser !

2 - React.memo
3 - useCallback
4 - useMemo

React.memo

const MyInput = React.memo(function TheNameIsNotUsefullHer(props) {
  console.log('myInput rendered');

  /* ... */
});


const Main = () => {
  const [toto, setToto] = useState(0);
  
  return (
    <>
    	<MyInput toto={toto} />
    	<button onClick={() => setToto(42)}>Push It</button>
    </>
  )
}

# Les perfs

React.memo

const MyInput = React.memo(function TheNameIsNotUsefullHer(props) {
  console.log('myInput rendered');

  /* ... */
});


const Main = () => {
  const [toto, setToto] = useState({anObject: 42});
  
  return (
    <>
    	<MyInput toto={toto} />
    	<button onClick={() => setToto({anObject: 42})>Push It</button>
    </>
  )
}

# Les perfs

React.memo

const MyInput = React.memo(function TheNameIsNotUsefullHer(props) {
  console.log('myInput rendered');

  /* ... */
});


const Main = () => {
  const [toto, setToto] = useState(0);
  
  const handleInputValueChange = () => {
    /** ... **/
  }
  
  return (
    <>
    	<MyInput toto={toto} onChange={handleInputValueChange} />
    	<button onClick={() => setToto(42)}>Push It</button>
    </>
  )
}

# Les perfs

UseCallback

const MyInput = React.memo(function TheNameIsNotUsefullHer(props) {
  console.log('myInput rendered');

  /* ... */
});


const Main = () => {
  const [toto, setToto] = useState(0);
  
  const handleInputValueChange = useCallback(() => {
    /** ... **/
  }, [])
  
  return (
    <>
    	<MyInput toto={toto} onChange={handleInputValueChange} />
    	<button onClick={() => setToto(42)}>Push It</button>
    </>
  )
}

# Les perfs

UseMemo

const Einstein = ({
  humanName
}) => {
  const result = React.useMemo(() => whatIsTheLifeGoal(humanName));
  
  return result;
}

# Les perfs

React Query

AKA TanStack Query

# HTTP

React = Library

Donc pas de manière officiel pour récupérer des données :/

Fetch

const Tweet = () => {
  const [fetchState, setFetchState] = useState({
    error: null,
    data: null,
  	isLoading: true
  });
  
  useEffect(() => {
    fetch('/people.json')
    	.then(res => res.json())
    	.then(data => {
      		setFetchState({
              data,
              isLoading: false
            })      
		});
    	})
        .catch(err => {
        	setFetchState({
            	error: err,
              	isLoading: false
            })      
		});
  }, [])
  
  
  if(fetchState.isLoading) {
    return 'loading...':
  }

  if(fetchState.error) {
    return <>Refresh page</>
  }

  return <>{fetchState.data}</>
}

# HTTP

React Query !

# HTTP

React Query !

npm i react-query

# HTTP

React Query !

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
const queryClient = new QueryClient()
const App = () =>  {
   return (
     <QueryClientProvider client={queryClient}>
       <Tweet />
     </QueryClientProvider>
   )
 }
 
const Tweet = () => {
   const { isLoading, error, data } = useQuery('peoples', () =>
     fetch('/peoples.json').then(res => res.json())
   );
 
   if (isLoading) {
     return 'Loading...';
   }
 
   if (error) {
     return 'Please refresh the page.';
   }
 
   return <>{data}</>
 }

# HTTP

Et les tests ?

# React Query

it('should display the tweet', async () => {
  nock('https://api.twitter.com')
  .get('/tweet/1')
  .reply(200, {
    tweet: {
      id: 1,
      message: 'this is what happens when you don’t recycle your pizza boxes'
    },
  })	
  
  const queryClient = new QueryClient();
  render(
	<QueryClientProvider client={queryClient}>
		<Tweet id="1" />
	</QueryClientProvider>
  )
  
  await waitFor(() => {
    expect(screen.getByText(/loading.../i)).not.toBeInDocument();
  })
  
  expect(
    screen
     .getByText(/this is what happens when you don’t recycle your pizza boxes/i)
  ).toBeInTheDocument();
})

# React Query

Un exemple de test

Marre des wrapper ?

# React Query

https://testing-library.com/docs/react-testing-library/setup

A l'aide, j'ai trop de props 😱

C

State

// app.tsx
const App = () => {
	return (
		<MyApp giveIt={'toMe'} />
	)
}

// MyApp.tsx
const MyApp = (props) => {
   return (
		<OtherCmp {...props} />
	)
}

// OtherCmp.tsx
const OtherCmp = ({giveIt}) => {
   return (
		<div>{giveIt} gnon</div>
	)
}

# Context

// Fichier A
const CookieContext = React.createContext(null);
export const CookieProvider = CookieContext.Provider;
export const useCookie = () => React.useContext(CookieContext);


// // app.tsx
const App = () => {
	return (
		<CookieProvider value={{giveIt: "toMe"}}>
			<MyApp />
		</CookieProvider>
	)
}

// MyApp.tsx
const MyApp = () => {
   return (
		<OtherCmp />
	)
}

// OtherCmp.tsx
const OtherCmp = () => {
  const {giveIt} = useCookie()
   return (
		<div>{giveIt} gnon</div>
	)
}

# Context

La gestion d'état à l'échelle

MobX, Redux & co

Redux VS MVC

https://slides.com/florentberthelot/what-is-redux-and-all-redux-like

MobX

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"

// Model the application state.
class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increase() {
        this.secondsPassed += 1
    }

    reset() {
        this.secondsPassed = 0
    }
}

const myTimer = new Timer()

// Build a "user interface" that uses the observable state.
const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

ReactDOM.render(<TimerView timer={myTimer} />, document.body)

// Update the 'Seconds passed: X' text every second.
setInterval(() => {
    myTimer.increase()
}, 1000)

# State managment

Les patterns

High Order Function

const twice = f => x => f(f(x));

const plusThree = i => i + 3;

// Composition de fonction !
const plusSix = twice(plusThree);

console.log(plusSix(7)); // 13

# Patterns

High Order Component

const LogIt = (WrappedComponent) => {
  const Component = (props) => {
    console.log('redered', props);
    
    return <WrappedComponent {...props} />;
  } 
  return Component;
}

# Patterns

High Order Component

# Patterns

https://github.com/acdlite/recompose

High Order Component

# Patterns

Render Props

# Patterns

<Controller
  control={control}
  name="test"
  render={({
    field: { onChange, onBlur, value, name, ref },
    fieldState: { invalid, isTouched, isDirty, error },
    formState,
  }) => (
    <Checkbox
      onBlur={onBlur} // notify when input is touched
      onChange={onChange} // send value to hook form
      checked={value}
      inputRef={ref}
    />
  )}
/>

Render Props - Attention

# Patterns

- Cas d'usage assez Rare
- Préférer l'utilisation de Children (nesting)
- Si c'est pour partager de la logique => Hooks

Les portals

<html>
  <body>
    <div id="app-root"></div>
    <div id="modal-root"></div>
  </body>
</html>

# Portal

Admettons ce HTML

const appRoot = document.getElementById('app-root');



const App = () => {
  return (
    <Modal>
    	<h2>La formation ?</h2>
    	<button role="button">React Avancé !</button>
    </Modal>
  );
}



render(<App />, appRoot);

# Portal

App

const modalHost = document.getElementById('modal-root');

const Modal = ({children}) => {
  return createPortal(
    children,
    modalHost,
  );
}

# Portal

La modal

<html>
  <body>
    <div id="app-root"></div>
    <div id="modal-root">
      <h2>La formation ?</h2>
      <button role="button">React Avancé !</button>
    </div>
  </body>
</html>

# Portal

Le HTML final

TypeScript

# TypeScript

Avant propos

https://slides.com/florentberthelot/formation-typescript/

Create React App

# TypeScript

Trichez !

# TypeScript

Composants Polymorphique

# Polymorph

Pourquoi ?

Parfois, on essai de faire des composants réutilisable.

Ces composants étant central, respectons le FIRST Principle !

Focus
Independent
Reusable
Small
Testable

FIRST Principle

Je vais faire mes propres boutons

const MyButton = ({onClick, children}) => {
	return <button className="monSuperStyle" onClick={onClick}>{children}</button>
}


// dans un composant
<MyButton onClick={goToHomePage}>
  Elle est top mon API de mon boutton !
</MyButton>

# Polymorph

Et les bonnes pratiques ?!

const MyButton = ({onClick, ...otherProps}) => {
	return (
	<button {...otherProps} className={`monSuperStyle ${otherProps.className}`}>
		{children}
	</button>
	);
}


// dans un composant
<MyButton onClick={goToHomePage}>
  Elle est top mon API de mon boutton !
</MyButton>

# Polymorph

Mais en faite c'est un lien !

const MyButton = ({onClick, ...otherProps}) => {
	return (
	<button {...otherProps} className={`monSuperStyle ${otherProps.className}`}>
		{children}
	</button>
	);
}


// dans un composant
<MyButton href="/" as="a">
  Elle est top mon API de mon boutton !
</MyButton>

# Polymorph

Là c'est bien !

const MyButton = ({onClick, as, ...otherProps}) => {
	return React.createElement(
 		as,
		{
			...otherProps,
			className: `monSuperStyle ${otherProps.className}`,
		},
		children
	);
}


// dans un composant
<MyButton href="/" as="a">
  Elle est top mon API de mon boutton !
</MyButton>

# Polymorph

Le Style !important

Simple !

import 'app.css';

# Style

Mais c'est global ??

Css modules à la rescousse...

import styles from './Button.module.css'; 

const Button = () => {
  return <button className={styles.error}>Error Button</button>;
}

# Style

Css modules à la rescousse...

import styles from './Button.module.css'; 

const Button = () => {
  return <button className={styles.error}>Error Button</button>;
}

# Style

<button class="Button_error_ax7yz">Error Button</button>

Styled-component

Style-component

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  ${props => props.primary && css`
    background: white;
    color: black;
  `}
`

# Style

Style-component

const App = () => {
  return (
    <form>
    	<Button type="submit" as="input" value="Envoyer" />
	</form>
  );
}

# Style

Les tests E2E

Cypress, Playwright

Installation

$ npm install cypress --save-dev

# Cypress

{
  "scripts": {
    "cypress:open": "cypress open"
  }
}

describe('Pokemon', () => {
  it('should start battle between pickachu and salamèche', () => {
    cy.visit('https://localhost:3000/')

    cy.contains('Pickachu').click()
    cy.contains('Salamèche').click()

    cy.get('main')
	.should('contain', 'Pickachu contre Salamèche, le combat commence !')
  })
})

# Cypress

Exemple de test

# Cypress

Des limitations

Les tests tournent dans une iFrame.
Difficile de faire des tests impliquant plusieurs sites web, ...

Playwrite a l'air de ne pas avoir ces limites. A voir...

React Router

# router

Qu'est ce qu'une SPA ?

# Router

Pourquoi faire une SPA ?

# Router

Quel sont les limites d'une SPA ?

# Router

Avant propos

Client

Page web

Serveur

html + css + js + Data

# Router

Avant propos

Client

SPA

Serveur

Statique

Ngnix, GH-page, surge.sh, ...

html + css + js

API

Java, Node, ...

data (Json)

React Router - Init

import { BrowserRouter } from "react-router-dom";

// ...

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// ...

# Router

React Router - Point d'injection

import { Routes, Route, Link } from "react-router-dom";


function App() {
  return (
    <div className="App">
      <h1>Tweeeeeet heure</h1>
      <Routes>
        <Route path="/" element={<Tweets />} />
        <Route path="/edit" element={<EditTweet />} />
      </Routes>
    </div>
  );
}

# Router

React Router - Les liens ?

import { Routes, Route, Link } from "react-router-dom";


function App() {
  return (
    <div className="App">
      <h1>Tweeeeeet heure</h1>
      <nav>
        <Link to="/">Mes tout 8</Link>
        <Link to="/edit">Tout 8, et ?</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Tweets />} />
        <Route path="/edit" element={<EditTweet />} />
      </Routes>
    </div>
  );
}

# Router

React Router - Les params ?

import { Routes, Route, Link } from "react-router-dom";


function App() {
  return (
    <div className="App">
      <h1>Tweeeeeet heure</h1>
      <nav>
        <Link to="/">Mes tout 8</Link>
        <Link to="/edit/toto">Tout 8, et ?</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Tweets />} />
        <Route path="/edit/:tweetId" element={<EditTweet />} />
      </Routes>
    </div>
  );
}

const EditTweet = () => {
  const { tweetId } = useParams();
  
  return <>id: {tweetId}</>
}

# Router

React Router - Les search params ?

import { Routes, Route, Link } from "react-router-dom";


function App() {
  return (
    <div className="App">
      <h1>Tweeeeeet heure</h1>
      <nav>
        <Link to="/">Mes tout 8</Link>
        <Link to="/edit?id=toto">Tout 8, et ?</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Tweets />} />
        <Route path="/edit" element={<EditTweet />} />
      </Routes>
    </div>
  );
}

const EditTweet = () => {
  let [searchParams, setSearchParams] = useSearchParams();
  
  return <>id: {searchParams.get('id')}</>
}

# Router

React Router - Redirection ?

import { Routes, Route, Link } from "react-router-dom";


function App() {
  return (
    <div className="App">
      <h1>Tweeeeeet heure</h1>
      <nav>
        <Link to="/">Mes tout 8</Link>
        <Link to="/edit">Tout 8, et ?</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Tweets />} />
        <Route path="/edit" element={<EditTweet />} />
      </Routes>
    </div>
  );
}

const EditTweet = () => {
  return <Navigate to="/" />
}

# Router

React Router - Redirection JS

function App() {
  return (
    <div className="App">
      <h1>Tweeeeeet heure</h1>
      <nav>
        <Link to="/">Mes tout 8</Link>
        <Link to="/edit">Tout 8, et ?</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Tweets />} />
        <Route path="/edit" element={<EditTweet />} />
      </Routes>
    </div>
  );
}
const EditTweet = () => {
  let navigate = useNavigate();
  
  useEffect(() => {
     navigate("/");
  }, []);
  
  return 'hello';
}

# Router

React Router - Lazy Loading

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Chargement...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

# Router

Les Formulaires

# Forms

React = Library

Donc c'est très manuel, ou alors faut une autre library.

Un hook custom !

const useInput = (initialValue) => {
  const [inputValue, setInputValue] = useState(initialValue);
  
  const onChange = (e) => {
    setInputValue(e.target.value);
  }
  
  return [inputValue, onChange];
}



const TweetEdit = ({id}) => {
  const [value, onChange] = useInput()
  
  return <input type="text" onChange={onChange} value={value} />;
}

# Les hooks

Exemple complet

const TweetEdit = ({id}) => {
  const [valueInput, onChangeInput] = useInput('')
  const [valueSelect, onChangeSelect] = useInput('false')
  const [valueTextArea, onChangeTextArea] = useInput('')
  
  const handleSubmit = (e) => {
    e.preventDefault();
    // ...
  }
  
  return (
    <form onSubmit={handleSubmit}>
    	<label>
    		Titre :
    		<input type="text" name="title" onChange={onChangeInput} value={valueInput} />
        </label>
		<label>
    		Message :
            <textarea name="message" value={valueTextArea} onChange={onChangeTextArea} />
        </label>
		<label>
    		NSFW :
            <select value={valueSelect} onChange={onChangeSelect}>
              <option value="true">Oui</option>
              <option value="false">Non</option>
          	</select>
        </label>
    	<button type="submit">Envoyer</submit>
    </form>
  );
}

# Les hooks

# Form

Composants Contrôlé

# Form

Composant Non Controlé

On définit la valeur par défaut de l'input, après c'est le DOM qui gère.

Un lib ?

React-Hook-Form !

Ne pas utiliser Formik (pas stable)

React-Hook-Form

import { useState } from "react";
import { useForm } from "react-hook-form";
import Header from "./Header";

export function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = handleSubmit((data) => {
    // ...
    console.log(data)
  })

  return (
    <form onSubmit={onSubmit}>
      <input {...register("firstName")} placeholder="Titre" />
      <select {...register("NSFW")}>
        <option value="true">Oui</option>
        <option value="false">Non</option>
      </select>
      <textarea {...register("message")} placeholder="Un T-8 !" />
      <button type="submit" >Envoyer</button>
    </form>
  );
}

# Form

Next.js

SPA classique

# Next.js

Next.JS

React

1 fichier / APP

SPA classique (CSR)

# Next.js

Client

SPA

Serveur

Statique

Ngnix, GH-page, surge.sh, ...

html + css + js

API

Java, Node, ...

data (JSON)

Server Side Rendering (SSR)

# Next.js

Client

APP Angular

Serveur

html + css + js

API

Java, Node, ...

more data (JSON)

+ initial data

data (JSON)

Next.js

Static Side Generation (SSG)

# Next.js

Next.JS

React

1 fichier HTML / page

API

Static Site Generation (SSG)

# Next.js

Client

APP React

Serveur

html + css + js

+ data

Statique

API

Java, Node, ...

more data (JSON)

Incremental Static Regeneration (ISR)

# Next.js

Client

APP React

Serveur

html + css + js

API

Java, Node, ...

more data (JSON)

+ initial data

data (JSON)

Next.js

Serveur

Static

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration

# Next.js

Concrètement ?

Le seul gros changement, c'est le router !

Il se fait fichier par fichier !

React Avancé

Le programme

1.

2.

3.

Informations pratiques

Florent Berthelot

Travaux Pratique

Slides

JavaScript

Histoire et Rappels

Outillage

Outillage Node.js

Create React App

Exercice 1

React

Qu'est ce que React ?

Pourquoi un Framework JS ?

Comment React est apparu ?

Popularité ?

Les avantages

Où se positionne React ?

Le "Hello World"

JSX

Un peu plus ?

Encore peu plus ?

JSX à la rescousse

Composant

Qu'est ce qu'un composant ?

Qu'est ce qu'un composant ?

Qu'est ce qu'un composant ?

Améliorons notre code !

Améliorons notre code !

Et la sémantique HTML ?

Et le style ?

Mieux ?

Encore mieux ?

Les fragments

Les fragments - version courte

Boucles

Boucles

Boucles, autre exemple

Exercice 2

Tests

Tests

Un composant = une fonction sans paramètre !

La vue, l'enjeux des library de test de composants

Un exemple

Comment trouver des éléments ?

Comment trouver des éléments ?

Comment trouver des éléments ?

Une extension de Jest

Exercice 3

Les props

Comment passer des données ?

Comment passer des données ?

Mieux ?

Destructuring ?!

Exercice 4

Events & Hooks

Le state

Le state

Le state : Destructuring !

Instant bonne pratique.

Qu'est ce qu'un effet de bords ?

UseEffect

Fuite mémoire ?

Les évènements

Comment écouter le click ?

onClick ! (camelCase)

Ses propres évènements ?

Comment tester des évènements ?

Comment tester des évènements ?

Comment tester des évènements ?

Mieux ?

Exercice 5

React, fin des rappels

Valeurs par défaut

Valeurs par défaut

Validation de props

Events
&
Hooks