React est une librairie JavaScript pour créer des interfaces Web. Documentation officielle

• yup

• Rapidité (60 fps, render < 16 ms)
• Déclaratif
• Composable

On peut utiliser create-react-app pour commencer un projet React.

Pour un projet en TypeScript:

$ npx create-react-app my-react-ts-app --typescript

Ce qui va créer un répertoire my-react-ts-app.

Pour utiliser SCSS, ajouter ces dépendances:

$ npm i -D node-sass
$ npm i -D @types/node-sass

On peut démarrer le projet avec:

$ npm start

Le projet contient des fichiers TSX.

Pour le linting:

$ npm install tslint tslint-react tslint-config-prettier --save-dev

Fichier tslint.json recommendé, on peut personnaliser:

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "rules": {
    "interface-name": false,
    "ordered-imports": true,
    "object-literal-sort-keys": false,
    "prefer-const": [true, {"destructuring": "any"}],
    "no-debugger": false,
    "no-console": false,
    "no-trailing-whitespace": [true, "always"],
    "semicolon": [true, "always"],
    "whitespace": [true, "check-branch", "check-operator", "check-typecast", "check-module"]
  },
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  }
}

Extensions intéressantes:

• Simple React Snippets

On ne peut retourner qu'un node (DOM) à la fois dans une fonction, alors, on ne peut pas faire:

const HomePage = () => (
  <h1>Titre</h1>
  <p>Texte</>
);

Il faudrait plutôt faire:

const HomePage = () => (
  <div>
    <h1>Titre</h1>
    <p>Texte</>
  </div>
);

Mais ceci fait en sorte que le rendu final aura des éléments <div> supplémentaires pour rien.

On peut alors utiliser React.Fragement :

const HomePage = () => (
  <React.Fragment>
    <h1>Titre</h1>
    <p>Texte</>
  </React.Fragment>
);

ou utiliser le raccourcis:

const HomePage = () => (
  <>
    <h1>Titre</h1>
    <p>Texte</>
  </>
);

Installation:

$ npm install --save react-router-dom
$ npm install --save-dev @types/react-router-dom

Exemple d'utilisation:

const App: React.FC = () => {
  return (
    <Router>
      <div className="App">
        <Route path="/" component={HomePage} exact />
      </div>
    </Router>
  );
}

Pour installer Redux:

$ npm install redux

Ce dernier contient les types.

Spécifiquement pour React, aussi installer:

$ npm install react-redux
$ npm install --save-dev @types/react-redux

Installer aussi :

$ npm install redux-thunk
$ npm install --save-dev @types/redux-thunk

Les composants construits en classe doivent toujours appeler le constructeur de base avec les props (eg. super(props);).

const result = await fetch(`/api/articles/${articleName}/add-comment`, {
  method: 'post',
  body: JSON.stringify({ username, text: commentText }),
  headers: {
    'Content-Type': 'application/json',
  },
});
 
const body = await result.json();
setArticleInfo(body);

• Error Boundaries

Les hooks permet de ne pas avoir besoin de créer des composants de classes, ces derniers ayant pour désavantage de complexifier le code.

Utilisation de base:

const [state, setState] = useState(initialState);
setState(newState);

→ Documentation officielle

useEffect(() => {
  // Équivalent à componentDidMount
  window.addEventListener('unhandledRejection', handler);
  return () => {
    // Équivalent à componentWillUnmount
    window.removeEventListener('unhandledRejection', handler);
  }
}, [])

import React, { useRef } from 'react'; 
 
const ImageToggle = ({ primaryImg, secondaryImg }) => {
  const imageRef = useRef(null);
 
  return (
    <img
      onMouseOver={() => imageRef.current.src = secondaryImg}
      onMouseOut={() => imageRef.current.src = primaryImg}
      src={primaryImg}
      alt="" ref={imageRef}
    />
  );
};

• React Interview Questions & Answers