React.Js

Image

React (ou React.js) est une bibliothèque JavaScript, conçue par l'entreprise Facebook en 2013.

L'objectif était de fluidifier et de rendre le plus possible autonome des App. Web de type monopage.

Exemples de codes

Nous commencons par des codes très simples. Plus vous progresserez, page après page, plus les scripts seront sophistiqués.

C 0001 - Bonjour tout le monde !

Dîtes bonjour...

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<div id="ex1"></div>
<script type="text/babel">class Hello extends React.Component {  render() {    return <h1>Bonjour tout le monde !</h1> }}ReactDOM.render(<Hello />, document.getElementById('ex1'))</script>
</body>
</html>

Reproduisez ce code, en choisissant l'un des compilateurs (♦ voir DEF.) ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.

Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.

Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !

C 0002 - Un titre et une liste

Commencer à développer une page en utilisant un petit tableau...

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<div id="ex2"></div>
<div id="ex3"></div>
<script type="text/babel">ReactDOM.render(<p>Bonjour, voici la liste...</p>, document.getElementById('ex2'));const myelement = (<table><tr><th>Noms :</th></tr><tr><td>Brian</td></tr><tr><td>Lucida</td></tr></table>);ReactDOM.render(myelement, document.getElementById('ex3'));</script>
</body>
</html>

Reproduisez ce code, en choisissant l'un des compilateurs (♦ voir DEF.) ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.

Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.

Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !

C 0003 - Jouer avec une valeur

Changer de couleurs...

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<div id="ex4"></div>
<script type="text/babel">class Arbre extends React.Component {  render() {    return <h2>Je suis un arbre {this.props.color} !</h2>; }}ReactDOM.render(<Arbre color="bleu"/>, document.getElementById('ex4'));</script>
</body>
</html>

Reproduisez ce code, en choisissant l'un des compilateurs (♦ voir DEF.) ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.

Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.

Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !

C 0004 - POPUP

Interagir avec une POPUP...

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body><div id="ex5"></div>
<script type="text/babel">class Ciblez extends React.Component {  click() {    alert("Dans le mille!"); }  render() {    return (      <button onClick={this.click}>Essayez !</button>   ); }}ReactDOM.render(<Ciblez />, document.getElementById('ex5'));</script>
</body>
</html>

Reproduisez ce code, en choisissant l'un des compilateurs (♦ voir DEF.) ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.

Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.

Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !

Info+

Origine
» Date de création : 2013
* Créé par Facebook
* Intégration continue

* Écrit en JavaScript
* Multiplateforme
* Licence MIT

Cas pratiques

Afin de vous entraîner, nous ajoutons chaque semaine dans cette section des petits programmes pour vous maintenir à niveau.

CAS 1

NIVEAU BASE

Appliquer des couleurs à une liste de critères

Ce petit programme vous permettra de déterminer quels critères présents dans la liste doivent être colorés, et quel type de couleur...

ESSAYEZ

CAS 2

NIVEAU INTERMÉDIAIRE

Créer l'environnement React

Ce petit kit vous permettra de mettre en place les outils nécessaires à la pratique de React.

ESSAYEZ

CAS 3

NIVEAU EXPERT

Créer une application Web monopage

Concevoir et développer une application Web monopage pour le suivi clientèle, en fonction d'un produit en particulier.

ESSAYEZ
2021 (C) Fond of Code tm (marque déposée) - Reflex001 / Diego Piccini (da Todi).
Tous droits réservés. Contenu éditorial protégé (www.lewebethique.com).

À propos...

À propos...
Reflex001

Programmation
Développement Web

Rappels

Rappels

Légal/Support

Légal/Support
Image