REACT.JS

⇒ React.Js

Beginner

React (or React.js) is a JavaScript library, designed by the Facebook company in 2013.

The goal was to streamline and make App. Web single-pages as autonomous and fluid as possible.

Code Examples

→ Let's start with very simple codes. The more you progress, page after page, the more sophisticated the scripts will be. However, you must go over 30 to 40 pages per level, before moving on to the next step...

→ In order to evaluate your codes, click on the icon on the left at the bottom of the page (gears), then choose a compiler from the list that will be open in another tab. Finally, test your work.

NOW REPRODUCE AND IMMERSE YOURSELF!

C 0001 - Hello World !

Reproduce this code (please do not copy-paste!).

<!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/This email address is being protected from spambots. You need JavaScript enabled to view it..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 - A Title and a List

Reproduce this code (please do not copy-paste!).

<!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/This email address is being protected from spambots. You need JavaScript enabled to view it..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 - Playing With a Value

Reproduce this code (please do not copy-paste!).

<!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/This email address is being protected from spambots. You need JavaScript enabled to view it..0/babel.min.js"></script>
<body>
<div id="ex4"></div>
<script type="text/babel">class Arbre extends React.Component {  render() {    return <h2>I'm a tree {this.props.color} !</h2>;  }}ReactDOM.render(<Arbre color="blue"/>, document.getElementById('ex4'));</script>
</body>
</html>

C 0004 - POPUP

Reproduce this code (please do not copy-paste!).

<!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/This email address is being protected from spambots. You need JavaScript enabled to view it..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>

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 !

W3School