Notes sur Yarn

$ yarnpkg add create-react-app

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

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

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.

• imrc+TAB: Import React Component

import React, { Component } from 'react';

• cc+TAB: Create Class

class XXX extends Component {
    state = {  };
    render() {
        return(  );
    }
}
 
export default XXX;

• _irc→ import react and component

import React, { Component } from 'react';

• _clss→ class extends

class Foo extends React.Component {
    render() {
 
    }
}

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;

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

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});

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',

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