REFLEX001 - React.Js

: 29 Oct

⇒ React.Js

Débutant(e)

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 autonome le plus possible, des App. Web de type monopage.

Exemples de codes

→ Commençons par des codes très simples. Plus vous progresserez, page après page, plus les scripts seront sophistiqués. Vous devez néanmoins passer le cap de 30 à 40 pages par niveau, avant de passer à la prochaine étape...

→ Afin d'évaluer vos codes, cliquez sur l'icône à gauche en bas de page (rouages), puis choisissez un compilateur dans la liste qui s'ouvrira dans un autre onglet. Finalement, testez votre travail.

MAINTENANT, RECOPIEZ ET IMPRÉGNEZ-VOUS !

C 0001 - Bonjour tout le monde !

Reproduisez ce code (ne le copier-coller pas!).

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..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>

C 0002 - Un titre et une liste

Reproduisez ce code (ne le copier-coller pas!).

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..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>

C 0003 - Jouer avec une valeur

Reproduisez ce code (ne le copier-coller pas!).

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..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>

C 0004 - POPUP

Reproduisez ce code (ne le copier-coller pas!).

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..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>

CHOISISSEZ VOTRE COMPILATEUR

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 !