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

• 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);).

• Error Boundaries