2019-10-06: Creation
2019-10-10: Suppression emprunte hash dans nom de fichiers builder
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:
import React, { Component } from 'react';
class XXX extends Component { state = { }; render() { return( ); } } export default XXX;
import React, { Component } from 'react';
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
// ? 'static/js/[name].[contenthash:8].js' ? 'static/js/[name].js' // ? 'static/js/[name].[contenthash:8].chunk.js' ? 'static/js/[name].js'
// 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',
const Info = (props) -> { return( <div> <h2>Bienvenue...</h2> Créer ... <button onClick={props.onHandleShowEstimateform }>Nouveau devis</button> <div> </div> </div> } export default Info;