2019-10-06: Creation
2019-10-10: Suppression emprunte hash dans nom de fichiers builder

ReactJS

Installation

Notes sur Yarn

$ yarnpkg add create-react-app

Création d'un projet React dans un projet Django

La structure Django

pyblog
├── blog
│   ├── migrations
│   ├── __pycache__
│   └── templates
├── django_app
│   ├── migrations
│   ├── __pycache__
│   └── templates
├── doc
│   ├── diagram
│   ├── django_forms
│   ├── json
│   ├── plc-web-monitor
│   ├── screens
│   ├── snap7
│   ├── tia-portal
│   └── uml
├── media
├── pyblog
│   └── __pycache__
├── static
│   ├── admin
│   ├── bootstrap4
│   ├── framework
│   ├── img
│   ├── js
│   ├── node_modules
│   ├── src
│   └── src_old
├── static-src
│   ├── framework  <-- c'est ici que ça va se passer !
│   ├── img
│   └── js
├── templates
├── tests
└── visudyn
    ├── migrations
    ├── __pycache__
    └── templates

La structure React dans static-src/framework

Faire une nouvelle branche avec git car on ne sait jamais, surtout quand on apprend :

$ git co -b reactjs001

Création d'un projet ReactJS :

$ npx create-react-app reactjs_prj
reactjs_prj
├── node_modules
│   ├── [...]
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── components
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

Lancement du serveur de développement:

$ cd reactjs_prj
$ yarnpkg start

Aller sur la page d'accueil du projet ReactJS :

http://localhost:3000

Outils React

Firefox: Ajouter React Developer Tools

Cette extension ajoute dans la barre Firefox, une icône react carrée:

  • Icône react en blanc sur fond rouge: Version de développement à ne pas pousser en production. Il faudra builder l'application.
  • Icône react en bleu sur fond noir: Version en production.
  • Dans la vue de développement (F12) il a un onglet React qui permet de naviguer dans l'arborescence ses Conponents React.

IDE VS code: Simple React Snippets

  • imrc+TAB: Import React Component
import React, { Component } from 'react';
  • cc+TAB: Create Class
class XXX extends Component {
    state = {  };
    render() {
        return(  );
    }
}
 
export default XXX;

IDE Atom.io: React-Snippets

  • _irc→ import react and component
import React, { Component } from 'react';
  • _clss→ class extends
class Foo extends React.Component {
    render() {
 
    }
}
Retrouver la customisation de React-Snippets Notes sur Atom

ReactJS: Comment ça marche ?!

Principe

Pour ce positionner dans les dossiers, on est dans :

static-src/framework/reactjs_prj/src

Il faut créer un dossier src/components

reactjs_prj
├── node_modules
│   ├── [...]
├── public
└── src
    └── components

Dans ce dossier components sont stockés tous les fichiers .jsx qui définissent les composants.
On crée le component Hello.jsx:

import React, { Component } from 'react';
 
class Hello extends Component {
    state = {};
    render() {
        return(
            <div>
                <h2>Hello World !</h2>
            </div>
        );
    }
}
 
export default Hello;

Cette class un titre Hello World !.
Pour utiliser cette class, on édit le fichier Apps.js:

import React from 'react';
 
import Hello from './components/Hello'
 
function App() {
  return (
      <Hello />
  );
}
 
export default App;
La classe Hello ce comporte comme une balise html5.

Le processus yarnpkg start du terminal propulse le rendu dans firefox (live-reload):

Build

Installer une lib

Exemple de react-toastify qui permet d'afficher des notification dans la page web :

$ yarnpkg add react-toastify

Importer la lib dans App.js:

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// minified version is also included
// import 'react-toastify/dist/ReactToastify.min.css';

Dans le fichier où l'on veut utiliser la notification :

<ToastContainer />

Appel de la notification dans le code :

toast('Pause', {autoClose: 1500});

Suppression du hash

La commande yarnpkg build permet de générer les fichier JS et CSS.
Le problème est que l'emprunte hash apparaît dans le nom du fichier. Exemple :

main.14d48c02.chunk.js

Pour supprimer le hash du nom du fichier, il faut modifier le fichier du configuration webpack

./node_modules/webpack-dev-server/client/webpack.config.js
  • Pour le JS: Rechercher output: { et quelques lignes plus bas modifier :
//        ? 'static/js/[name].[contenthash:8].js'
        ? 'static/js/[name].js'
    
//        ? 'static/js/[name].[contenthash:8].chunk.js'
        ? 'static/js/[name].js'
  • Pour le CSS: Rechercher static/css/[name] et modifier :
//          filename: 'static/css/[name].[contenthash:8].css',
//          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
          filename: 'static/css/[name].css',
          chunkFilename: 'static/css/[name].chunk.css',

Jargon et design patern

  • Component parent qui contient les états : Smart Component ou Container Component
  • Component enfant sans calcul (juste gfx): Dum component ou présentational Component
  • Stateless Function Component: Ca mission est uniquement un rendu graphique (avec ses props). Exemple :
const Info = (props) -> {
    return(
        <div>
            <h2>Bienvenue...</h2>
            Créer ...
            <button onClick={props.onHandleShowEstimateform }>Nouveau devis</button>
            <div>
        </div>
     </div>
}
 
export default Info;