ReactJS
Philippe Depouilly
March 2019
Philippe Depouilly ReactJS
ReactJS l’arme de guerre pour décupler l’expérience
utilisateur...
I ReactJS est un framework moderne de développement d’interfaces
Web modernes et riches... il permet de développer rapidement des
composants qu’il suffit ensuite d’imbriquer... mais...
I ReactJS est un peu compliqué à mettre en oeuvre...
I Pourquoi ?
Philippe Depouilly ReactJS
ReactJS l’arme de guerre pour décupler l’expérience
utilisateur...
I ReactJS est un framework outil moderne de développement
d’interfaces Web modernes et riches... il permet de développer
rapidement des composantes qu’il suffit ensuite d’imbriquer... mais...
I ReactJS tout seul n’est pas rigolo... car ça revient à écrire du du
HTML en JavaScript...
I Mais le JavaScript standard c’est trop simple... alors écrivons en
ES6... qu’il faudra ”transpiler” en JavaScript standard...
I Alors JSX c’est tellement mieux pour simplifier mon code... c’est
une syntaxe compacte de JavaScript qu’il faudra aussi ”transpiler”
en JavaScript
I Donc il faut utiliser Babel pour convertir le JSX en JavaScript... et
ES6 en standard...
I Qu’il est plus sympa d’utiliser un environnement de développement
comme Webpack (Aı̈e...)
Philippe Depouilly ReactJS
ReactJS l’arme de guerre pour décupler l’expérience
utilisateur...
I ReactJS est un outil moderne de développement d’interfaces Web
modernes et riches... il permet de développer rapidement des
composantes qu’il suffit ensuite d’imbriquer... mais...
I Il m’a fallu installer 67 Mo de modules npm pour afficher
< div > Hello World < div > sur mon navigateur
I Un fichier [Link], [Link], une arborescence pour
découper tout cela en trois fichier js...
I [Link], app/[Link] app/[Link] [Link] [Link]
Mais je m’en suis sorti...
Philippe Depouilly ReactJS
ReactJS, alors c’est quoi...
Pour la suite de cette présentation j’ai repris in extenso l’excellent article
de Batiste Donaux :
[Link]
Philippe Depouilly ReactJS
ReactJS, alors c’est quoi...
Avec ReactJS vous pouvez fabriquer des composant sous la forme
import React from "react"; // Syntaxe ES6
class App extends [Link] {
render() {
// Syntaxe JSX
return <div id="main-element" className="title">
Hello World !</div>
}
}
export default App;
Philippe Depouilly ReactJS
ReactJS, alors c’est quoi...
Au lieu de
const React = require("react");
class App extends [Link] {
render() {
return [Link](
"div",
{id: ’main-element’, className: "title"},
"Hello, world!"
)
}
}
export default App;
Philippe Depouilly ReactJS
ReactJS, alors c’est quoi...
Et voici le JavaScript qui va injecter le composant React dans le DOM
HTML
import React from "react";
import ReactDom from "react-dom";
import App from "./App";
[Link](<App />, [Link](’app’));
Philippe Depouilly ReactJS
ReactJS, un exemple de composant de liste
Fichier [Link]
const React = require("react"),
Item = require("./[Link]");
class List extends [Link] {
render() {
return <ul>
{[Link]((item) => <Item
content={[Link]}
/>)}
</ul>;
}
}
[Link] = List;
Philippe Depouilly ReactJS
ReactJS, un exemple de composant de liste
Fichier [Link]
const React = require("react");
class Item extends [Link] {
render() {
return <li>
{[Link]}
</li>;
}
}
[Link] = Item;
Philippe Depouilly ReactJS
ReactJS, un exemple de composant de liste
fichier [Link]
const React = require("react"),
ReactDOM = require("react-dom"),
List = require("./[Link]"),
items = [{
content: "Foo"
}, {
content: "Bar"
}, {
content: "Baz"
}];
[Link](
<List
items={items}
/>,
[Link]("container")
);
Philippe Depouilly ReactJS
ReactJS sans redux c’est dommage...
redux est un middelware permettant de gérer l’état des objets React (les
données d’un composant), de les modifier et de permettre à un
composant de connaı̂tre l’état d’un autre composant (ses données).
redux utilise un mécanisme de ”store”
Philippe Depouilly ReactJS
Redux, intégration de redux dans ReactJS
const List = require("./components/[Link]"),
Provider = require("react-redux").Provider,
React = require("react"),
ReactDOM = require("react-dom"),
reducers = require("./redux/[Link]"),
Redux = require("redux");
let store = null;
[Link] = () => {
store = [Link](
reducers,
{
items: []
}
);
[Link](
<Provider store={store} >
<List/>
</Provider>,
[Link]("container")
Philippe Depouilly ReactJS
Redux, instrumentation des l’objet List
const actions = require("./redux/[Link]"),
Item = require("./[Link]"),
React = require("react"),
ReactRedux = require("react-redux");
class List extends [Link] {
render() {
return <ul>
{[Link]((item) => <Item
content={[Link]}
deleteItem={[Link](null, ite
/>)}
</ul>;
}
}
[Link] = [Link](
(state = {}) => state,
(dispatch, props) => [Link]({}, props, {
deleteItem: [Link](null, dispatch)
}) Philippe Depouilly ReactJS
Redux, instrumentation des l’objet Item
const React = require("react");
class Item extends [Link] {
render() {
return <li>
{[Link]}
<a onClick={[Link]}>
Supprimer
</a>
</li>;
}
}
[Link] = Item;
Philippe Depouilly ReactJS
Redux, action deleteItem
Fichier redux/[Link]
function deleteItem(dispatch, item) {
dispatch({
type: "REMOVE_ITEM",
item: item
});
}
[Link] = {
deleteItem: deleteItem
};
Philippe Depouilly ReactJS
Redux, le reducers qui gère la source des données
Fichier redux/[Link]
function reducer(state, action) {
const newState = [Link]({}, state);
switch ([Link]) {
case "REMOVE_ITEM":
const index = [Link]([Link]);
if (index !== -1) {
[Link](index, 1);
}
break;
default:
return state;
}
return newState;
}
[Link] = reducer;
Philippe Depouilly ReactJS
Les fichiers utiles...
npm init
# repondre oui...
npm install --save @babel/preset-react @babel/preset-env \
webpack webpack-cli babel-loader @babel/core react react-dom
Et le fichier [Link] est prêt et les modules sont dans node modules
Philippe Depouilly ReactJS
Les fichiers utiles...
Fichier [Link]
[Link] = {
entry: "./app/[Link]",
output: {
path: __dirname + "./",
filename: "[Link]"
},
devServer: { // configuration du server permettant le live-reload
inline: true,
port: 8080
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: ’babel-loader’,
query: {
presets: [’@babel/preset-env’,’@babel/react’]
}
}
]
}
}
Utiliser webpack-dev-server pour un serveur http sur le port 8080 pour
afficher localement son site
Philippe Depouilly ReactJS
ReactJS
Des Questions ?
Philippe Depouilly ReactJS