
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 !
<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
<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
<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
<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>

CHOOSE YOUR COMPILER
Reproduce this code, choosing one of the compilers below (♦ see DEF) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.
When you copy your code, replace the existing code (by default) with your own.
Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !
React.Js Technical Specifications
Info+ (React.Js)
* Created by Facebook
* Continuous integration
* Written in JavaScript
* Cross-platform
* MIT license
Tools+ (React.Js)
Practical Cases
CASE 1
BASIC LEVEL
Apply colors to a list of criteria ⇒ TRY
This little program will allow you to determine which criteria in the list should be colored, and what type of color...
CASE 2
ADVANCED LEVEL
Create a Web App.
Design and develop a single-page Web App. for customer follow-up, depending on a particular product.
CASE 3
EXPERT LEVEL
Preparing a series of small style libraries
Design and develop a complete library, gathering several styles families applicable to websites or Web App., depending on a dominant category.
News
- REACT / Exercices
- Hits: 321