Alphorm.com Formation React : Les fondamentaux

Une formation
https://go.eolem.com/yt
https://go.eolem.com/linkedin
https://go.eolem.com/twitter
Formation
React
Les fondamentaux

Une formation
Plan de la formation
Introduction
1. Une introduction à JSX
2. Rendering des éléments
3. Composants et props
4. State et cycle de vie
5. Gestion des événements
6. Affichage conditionnel
7. Listes et clés
8. Formulaires
9. Notion de State
10. Composition ou héritage ?
Conclusion

Une formation
Public concerné
Développeur Web front : JavaScript/CSS/HTML

Une formation
Pré-requis
Connaître JavaScript

Présentation de React
Une formation

Une formation
Plan
Historique de React
Le problème du pattern MVC
Le virtual DOM
Notion de Components

Une formation
Historique de React

Une formation
Le problème du MVC

Une formation
Notion de Components

Installation de
l'environnement
Une formation

Une formation
IDE
Node
Outils de développement
Plan

Une formation
Outils divers
Create React App
https://github.com/facebook/create-react-app
Json Server
https://www.npmjs.com/package/json-server
Http Server
https://www.npmjs.com/package/http-server

Hello World
Une formation

Présentation du projet
de la formation
Une formation

Une formation
Présentation de Figma
Wireframing du projet Todo
Plan

Une formation
Figma
https://www.figma.com/

JSX : JavaScript XML
Une formation

Une formation
JSX ?
Syntaxe et utilisation de JSX
Plan

Une formation
JSX ?
JSX est une extension JavaScript
JavaScript XML
Elle facilite la création d’élément DOM

Une formation
const element = <h1>Bonjour, monde !</h1
>;
Syntaxe de base

Une formation
Fonctionnement
const element = (
<h1 className="greeting">
Bonjour, monde !
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Bonjour, monde !'
);

Une formation
const name = 'Clarisse Agbegnenou';
const element = <h1>Bonjour, {name}</h1
>;
Utilisation de Variable

Une formation
Appel de fonction
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Kylian',
lastName: 'Mbappé'
};
const element = (
<h1>
Bonjour, {formatName(user)} !
</h1>
);

Une formation
Utilisation sous la forme d’expression
function getGreeting(user) {
if (user) {
return <h1>Bonjour, {formatName(user)} !</
h1>;
}
return <h1>Bonjour, Belle Inconnue.</h1>;
}

Une formation
Spécifier des attributs
const element1 = <div tabIndex="0"></div>;
const element2 = <img src={user.avatarUrl}></i
mg>;

Une formation
Spécifier des éléments enfants
const element = (
<div>
<h1>Bonjour !</h1>
<h2>Content de te voir ici.</h2>
</div>
);

Démarrage du projet TodoList
Une formation

Rendering des éléments
Une formation

Une formation
La méthode render
Eléments immuables
Mise à jour de l’arbre DOM
Plan

Une formation
La méthode render
<div id="root"></div>

Une formation
La méthode render
const element = <h1>Bonjour, monde</h1>;
ReactDOM.render(element, document.getElementById('roo
t'));

Une formation
Eléments immuables
Définition : Un objet immuable est un
objet dont l'état ne peut pas être modifié
après sa création
Un éléments React ne peut plus être
modifié après sa création

Une formation
Mise à jour de l’arbre DOM
Nous devons appeler la méthode
render() à chaque modification

Une formation
Exemple Mise à jour du DOM
function tick() {
const element = (
<div>
<h1>Bonjour, monde !</h1>
<h2>Il est {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);

Rendu des éléments du projet
Une formation

Composants et props
Une formation

Une formation
Composants Function
Composants Class
Les props
Assemblage de composants
Plan

Une formation
Composants Function
function Welcome() {
return <h1>Bonjour</h1>;
}

Une formation
Composants Class
class Welcome extends React.Component {
render() {
return <h1>Bonjour</h1>;
}
}

Une formation
Les props
Les Props sont des arguments passés
aux composants de React
Les Props sont transmis aux composants
par le biais d'attributs HTML
Les Props sont « readonly »

Une formation
Les props - function
function Welcome(props) {
return <h1>Bonjour, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);

Une formation
Les props - class
class Welcome extends React.Component {
constructor(props) {
super(props)
}
render() {
return <h1>Bonjour {this.props.name} </h1>;
}
}
const element = <Welcome name="Sara" />;
ReactDOM.render( element, document.getElementById('root’));

Une formation
Assemblage de composants
function Welcome(props) {
return <h1>Bonjour, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render( <App />, document.getElementById('root'));

Ajout de Composants
et props au projet
Une formation

Etat et cycle de vie
Une formation

Une formation
Notion d’état
Convertir une fonction en classe
Ajouter un état local à une classe
Cycle de vie d’un composant
Conseils et Bonnes pratiques
Circulation des données
Plan

Une formation
Notion d’état
Définition :
L’état d'un objet est sa forme à un instant
donné, telle que décrite par les valeurs de
l'ensemble de ses propriétés.
Avec React, seuls les composants basés sur
des classes peuvent utiliser la state

Une formation
Notion d’état
Les composants function sont StateLess
Les composants class sont StateFul

Une formation
function Clock(props) {
return (
<div>
<h2>Il est {props.date.toLocaleTimeString()}.</h2>
</div>
);
}

Une formation
class Clock extends React.Component {
render() {
return (
<div>
<h2>Il est {this.props.date.toLocaleTimeString()}.</h
2>
</div>
);
}
}

Une formation
Ajouter un état local à une classe
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h2>Il est {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

Une formation
Cycle de vie d’un composant
...
componentDidMount() {
}
componentWillUnmount() {
}
...
}

Une formation
Ne modifiez pas la state directement !
// Erroné
this.state.comment = 'Bonjour';
// Correct
this.setState({comment: 'Bonjour'});

Une formation
Les mises à jour de l’état peuvent être asynchrones
// Erroné
this.setState({
counter: this.state.counter + this.props.increment,
});
// Correct
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
// Correct
this.setState(function(state, props) {
return { counter: state.counter + props.increment };
});

Une formation
Les mises à jour de l’état sont fusionnées
super(props);
this.state = { posts: [], comments: []};
}
componentDidMount() {
fetchPosts().then(response => {
this.setState( {posts: response.posts} );
});
fetchComments().then(response => {
this.setState({ comments: response.comments});
});
}

Une formation
Circulation des données
Les données descendent
<h2>Il est {this.state.date.toLocaleTimeString()}.</h
2>
<FormattedDate date={this.state.date} />
function FormattedDate(props) {
return <h2>Il est {props.date.toLocaleTimeString()}.</h2>;
}

Amélioration du projet :
State et récupération de données
Une formation

Gestion des événements
Une formation

Une formation
Syntaxe de déclaration d’un event
Rappel sur l’utilisation de ‘this’
Plan

Une formation
<button onclick="activateLasers()">
Activer les lasers
</button>
<button onClick={activateLasers}>
Activer les lasers
</button>
HTML
React

Une formation
Rappel sur l’utilisation de ‘this’
https://www.w3schools.com/js/js_this.asp
In a method, this refers to the owner object.
Alone, this refers to the global object
In a function, this refers to the global object
In a function, in strict mode, this is undefined
In an event, this refers to the element that received
the event
Methods like call(), and apply() can refer this to any
object

Une formation
class Toggle extends React.Component {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' :
'OFF'} </button> );
}
}

Une formation
class LoggingButton extends React.Component {
handleClick = () => {
console.log('this vaut :', this);
}
render() {
return (
<button onClick={this.handleClick}>
Clique ici
</button>
);
}
}

Une formation
<button onClick={(e) => this.deleteRow(id, e)}>Supprimer la ligne</butto
n>
<button onClick={this.deleteRow.bind(this, id)}>Supprimer la ligne</butto
n>

Projet :
Supprimer un élément
Une formation

Affichage conditionnel
Une formation

Une formation
Variables d’éléments
Condition à la volée
Opérateur ternaire
Empêcher l’affichage d’un composant
Plan

Une formation
function UserGreeting(props) {
return <h1>Bienvenue !</h1>;
}
function GuestGreeting(props) {
return <h1>Veuillez vous inscrire.</h1>;
}

Une formation
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
<Greeting isLoggedIn={false} />,
);

Une formation
En JavaScript :
true && console.log("ok") => "ok"
false && console.log("ok") => false
true && expression : est toujours évalué à expression
false && expression : est toujours évalué à false

Une formation
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Bonjour !</h1>
{unreadMessages.length > 0 &&
<h2>
Vous avez {unreadMessages.length} message(s) non-lu(s).
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];

Une formation
Opérateur ternaire
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
L’utilisateur <b>{isLoggedIn ? 'est actuellement' : 'n’est pas'}</b> conn
ecté.
</div>
);
}

Une formation
Empêcher l’affichage d’un composant
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning"> Attention !
</div>
);
}

Affichage d’une Todo en
fonction de son statut
Une formation

Listes et clés
Une formation

Une formation
Parcourir une liste en JavaScript
Afficher plusieurs composants
Composant basique de liste
Les clés
Utilisation dans JSX
Plan

Une formation
Parcourir une liste en JavaScript
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2)
;
console.log(doubled);

Une formation
Afficher plusieurs composants
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
);

Une formation
Composant basique de liste
function NumberList(props) {
const numbers = props.numbers;
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render( <NumberList numbers={numbers} />,
);

Une formation
Les clés
const numbers = [1, 2, 3, 4, 5];
<li key={number.toString()}>
{number}
</li>
);

Une formation
Les clés
const todoItems = todos.map((todo)
=>
<li key={todo.id}>
{todo.text}
</li>
);

Une formation
Utilisation dans JSX
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}

Afficher la liste des Todos
Une formation

Une formation
Utilisation des listes pour afficher
les Todos
Plan

Les Formulaires
Une formation

Une formation
Composants contrôlés
Gérer plusieurs saisies
Présentation de formik
Plan

Une formation
Problème
<input>, <textarea>, et <select> possèdent aussi un état interne
Les formulaires HTML possèdent un état interne
Solution
L’état interne des éléments sera stocké dans la state React
React devient la « Single Source of Truth» (SSOT)

Une formation
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text"
value={this.state.value}
onChange={this.handleChange} />
<input type="submit" value="Envoyer" />
</form>
);
}

Une formation
Gérer plusieurs saisies
class Reservation extends React.Component {
// ...
iChange(event) {
const value = event.target.name === 'isGoing' ? event.target.checked : event.targe
t.value;
const name = event.target.name;
this.setState({ [name]: value });
}
render() {
return (
<form>
<input name="isGoing » type="checkbox" checked={this.state.isGoing}
onChange={this.iChange} />
<br />
<input name="numberOfGuests" type="number" value={this.state.numberOfGuests
onChange={this.iChange} />
</form>
);
}
}

Une formation
Présentation de formik

Ajouter un formulaire au
Projet Todo
Une formation

Ajouter Formik au Projet
Todo
Une formation

Mieux utiliser la State
Une formation

Une formation
Faire remonter la State
Component 1
App
Component 2
State
State State

Une formation
Faire remonter la State
Component 1
App
Component 2
State
Props Props

Faire remonter
la State du Projet
Une formation

Une formation
Gérer l'état de l'application Todo et
de ses composants
Plan

Composition ou héritage ?
Une formation

Une formation
Délégation de contenu
Spécialisation
Plan

Une formation
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-
' + props.color}>
{props.children}
</div>
);
}

Une formation
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Bienvenue
</h1>
<p className="Dialog-message">
Merci de visiter notre vaisseau spatial !
</p>
</FancyBorder>
);
}

Une formation
Spécialisation
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title"> {props.title}</h1>
<p className="Dialog-message">{props.message}</p>
</FancyBorder>
);
}
function WelcomeDialog() {
return (
<Dialog title="Bienvenue" message="Merci de visiter notre vaisseau spatial !"
);
}

React et Docker
Une formation

Conclusion
Une formation

Une formation
Bilan
1. Une introduction à JSX
2. Rendering des éléments
3. Composants et props
4. State et cycle de vie
5. Gestion des événements
6. Affichage conditionnel
7. Listes et clés
8. Formulaires
9. Notion de State
10. Composition ou héritage ?

Alphorm.com Formation React : Les fondamentaux

Alphorm.com Formation React : Les fondamentaux

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Alphorm.com Formation React : Les fondamentaux

Ähnlich wie Alphorm.com Formation React : Les fondamentaux (20)

Mehr von Alphorm

Mehr von Alphorm (20)

Alphorm.com Formation React : Les fondamentaux