Nouvelles ressources en React
Nouvelles ressources pour les niveaux intermédiaires.
Lire la suite...
React (ou React.js) est une bibliothèque JavaScript conçue par Facebook en 2013. L'objectif était de simplifier et de rendre les pages web monopages App.Web aussi autonomes et fluides que possible.
DÉBUTANT(E)
⇒ Exemples de codes
→ Vous devez être bilingue (Fr/En). Les exemples de code sont en Anglais.
→ Commençons par des codes très simples. Plus vous progresserez, page après page, plus les scripts seront sophistiqués. Vous devrez cependant parcourir 30 à 40 pages par niveau, avant de passer à l'étape suivante…
→ Pour évaluer vos codes, cliquez sur l'icône en bas à gauche de la page (roues dentées), puis choisissez un compilateur dans la liste qui s'ouvrira dans un autre onglet. Pour finir, testez votre travail.
À VOUS DE REPRODUIRE ET DE VOUS IMMERGER !
C 0001 - Hello World !
Reproduisez ce code (ne pas copier-coller !).
<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/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>Hello World !</h1> }}ReactDOM.render(<Hello />, document.getElementById('ex1'))</script>
</body>
</html>
C 0002 - Titre et liste
Reproduisez ce code (ne pas copier-coller !).
<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/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>Hello, this is the list...</p>, document.getElementById('ex2'));const myelement = (<table><tr><th>Names :</th></tr><tr><td>Brian</td></tr><tr><td>Lucida</td></tr></table>);ReactDOM.render(myelement, document.getElementById('ex3'));</script>
</body>
</html>
C 0003 - Valeurs
Reproduisez ce code (ne pas copier-coller !).
<!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/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="ex"></div>
<script type="text/babel">class Tree extends React.Component { render() { return <h2>I'm a {this.props.color} !</h2>; }}ReactDOM.render(<Tree color="blue tree"/>, document.getElementById('ex'));</script>
</body>
</html>
C 0004 - PopUp
Reproduisez ce code (ne pas copier-coller !).
<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/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("Yesss !"); } render() { return ( <button onClick={this.click}>Try !</button> ); }}ReactDOM.render(<Ciblez />, document.getElementById('ex5'));</script>
</body>
</html>
C 0005 - Valeurs
Reproduisez ce code (ne pas copier-coller !).
<!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/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="ex"></div>
<script type="text/babel">class Tree extends React.Component { render() { return <h2>I'm a {this.props.color} !</h2>; }}ReactDOM.render(<Tree color="red tree"/>, document.getElementById('ex'));</script>
</body>
</html>
C 0006 - Titre et liste
Reproduisez ce code (ne pas copier-coller !).
<!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/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>Hello, this is the list...</p>, document.getElementById('ex2'));const myelement = (<table><tr><th>Names :</th></tr><tr><td>Brian</td></tr><tr><td>Lucida</td></tr><tr><td>Jean</td></tr><tr><td>Hector</td></tr><tr><td>Jennifer</td></tr><tr><td>Tom</td></tr></table>);ReactDOM.render(myelement, document.getElementById('ex3'));</script>
</body>
</html>
C 0007 - PopUp
Reproduisez ce code (ne pas copier-coller !).
<!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/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="ex"></div>
<script type="text/babel">class Ciblex extends React.Component { click() { alert("Hello ! How are you ?"); } render() { return ( <button onClick={this.click}>Try !</button> ); }}ReactDOM.render(<Ciblex />, document.getElementById('ex'));</script>
</body>
</html>
C 0008 - PopUp
Reproduisez ce code (ne pas copier-coller !).
<!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/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="ex"></div>
<script type="text/babel">class Ciblex extends React.Component { click() { alert("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."); } render() { return ( <button onClick={this.click}>Try !</button> ); }}ReactDOM.render(<Ciblex />, document.getElementById('ex'));</script>
</body>
</html>
CHOISISSEZ VOTRE COMPILATEUR
Reproduisez ce code, en choisissant l'un des compilateurs 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 !
Code
Versions récentes
Outils/Méthodologies
Info+
» Date de création : 2013
* Créé par Facebook
* Intégration continue
* Écrit en JavaScript
* Multiplateforme
* Licence MIT
* Créé par Facebook
* Intégration continue
* Écrit en JavaScript
* Multiplateforme
* Licence MIT
Actualité
Les commentaires que vous nous laissez sont systématiquement soumis à une modération rigoureuse. Les incivilités et calomnies, les menaces, les intimidations de toutes sortes, plus globalement toutes les violences verbales gratuites, ou bien la diffusion d’informations non vérifiées… ne sont pas tolérées. Nous nous réservons en outre le droit de ne publier que les commentaires qui font effectivement avancer le débat et permettent une meilleure compréhension du sujet traité par l'article présenté sur cette page (ainsi que toutes ses ramifications) et ce, quelle qu’en soit la teneur globale.
