JavaScript - React

Rechercher…
JavaScript - React
React est un framework JavaScript orienté composant développé par Facebook
Création d'un projet
Fedora
Installer nodejs :
1
$ sudo dnf install nodejs
Copied!
Installer yarn, une alternative plus rapide à npm :
1
$ curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
2
$ sudo dnf install yarn
Copied!
Créer une application React grâce à l'outil développé par Facebook :
1
$ npx create-react-app nom_de_lapplicaton
Copied!
Lancer le serveur :
1
$ yarn start
Copied!
Cela ouvre un navigateur sur un port libre et affiche une page de bienvenue.
Structure
Deux dossiers:
1.public qui contient l'html
2.src qui contient l'app JS
Dans le dossier src, le fichier index.js import les dépendances nécessaires à React et importe une classe App du fichierApp.js. Ce fichier contient un ou plusieurs Component.
Component
C'est une classe JS (typescript) qui hérite de Component. Plusieurs choses caractérisent un composant (Component) :
1.Les propriétés (props) : des données immuables qui permettent de transférer 
des données entre les composants.
2.L'état (state), constamment mué, représente l'état du composant.
Un Component doit posséder une méthode render() qui renvoie du code qui ressemble à du HTML, il s'agit de la syntaxe JSX. Par exemple :
1
class App extends Component {
2
    render() {
3
        return (
4
            <h1>Hello World!</h1>
5
        );
6
    }
7
}
Copied!
Props
Les props (raccourcis de propriétés) sont le moyen de transmettre des variables d'un composant parent à un composant enfant. Pour se faire, on passe les props en arguments des composants enfants dans la fonction render() du composant parent. Par exemple, un composant App appelle un composant enfant Welcome en lui donnant une prop name de valeur "Guillaume". Cette prop est immuable et est accessible pour l'enfant à this.props.name.
1
// App.js
2
​
3
import Welcome from './Welcome'; // pas besoin de .js
4
​
5
class App extends Component {
6
    render() {
7
        return (
8
            <Welcome name='Guillaume'/>
9
        );
10
    }
11
}
12
​
13
// Welcome.js
14
​
15
class Welcome extends Component {
16
    render() {
17
        return (
18
            <h1>Welcome {this.props.name}</h1>
19
            // name est accessible dans les propriétés de l'objet
20
        );
21
    }
22
}
23
​
24
export default Welcome;
Copied!
State
Le state d'un Component représente son état, i.e. permet de mémoriser des paramètres qui lui sont propres. L'état est initialisé dans le constructeur du composant.
1
class Welcome extends Component {
2
    constructor(props) {
3
        super(props)
4
        this.state = {
5
            inc: 0
6
        }
7
    }
8
​
9
    render() {
10
        return (
11
            <h1>Welcome {this.props.name}</h1>
12
            // name est accessible dans les propriétés de l'objet
13
        );
14
    }
15
}
Copied!
Note : Il faut toujours prendre au moins props en paramètre et commencer par appeler le constructeur parent : super(props).
Les variables de l'état sont accessibles par this.state.clé. L'état peut être modifié grâce à la méthode setState({ clé: nouvelleValeur }).
Événements
On peut rendre nos composants interactifs avec grâce aux événements.
1
class Welcome extends Component {
2
    constructor(props) {
3
        super(props)
4
        this.state = {
5
            inc: 0
6
        }
7
    }
8
​
9
    render() {
10
        return (
11
            <div>
12
              <h1>Welcome {this.props.name}</h1>
13
              <button onClick={() => this.setState({inc: this.state.inc + 1})}>
14
                Clique !
15
              </button> {this.state.inc}
16
            </div>
17
        );
18
    }
19
}
Copied!
Fonctions Components
On peut écrire un composant sous forme de fonction. Si on reprend le composant Welcome comme il était à l'origine :
1
class Welcome extends Component {
2
    render() {
3
        return (
4
            <h1>Welcome {this.props.name}</h1>
5
            // name est accessible dans les propriétés de l'objet
6
        );
7
    }
8
}
Copied!
On pourrait l'écrire comme ceci :
1
function Welcome(props) {
2
    return (
3
        <h1>Welcome {props.name}</h1>
4
    );
5
}
Copied!
Pas besoin d'indiquer this. Il y a aussi un avantage pour l'appel de fonctions. Imaginons :
1
class App extends Component {
2
    constructor(props) {
3
        super(props)
4
        this.state = {
5
            inc: 0
6
        }
7
    }
8
​
9
    render() {
10
        return (
11
            <Welcome 
12
              name = 'Guillaume'
13
              onClick = {() => this.setState({ inc: this.state.inc + 1})}
14
              inc = {this.state.inc}
15
            />
16
        );
17
    }
18
}
19
​
20
function Welcome(props) {
21
    return (
22
        <div>
23
          <h1>Welcome {this.props.name}</h1>
24
          <button onClick = {props.onClick}>
25
            Clique !
26
          </button>{props.inc}
27
    );
28
}
Copied!
Pour faire référence à une fonction, plus besoin de () => fonction() mais simplement fonction.
CSS - display: flex
Suivant - Mini mémos
SQL
Dernière mise à jour 2yr ago
Copier le lien
Sommaire