New Python Resources
New Python ressources for intermediate levels...
Read More
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.
BEGINNER
⇒ Code Examples
→ You must be bilingual (Fr/En). Code examples are in English.
→ 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 !
Copy this code (do not copy and paste!).
<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
Copy this code (do not copy and paste!).
<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 - Values
Copy this code (do not copy and 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="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
Copy this code (do not copy and paste!).
<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>
C 0005 - Values
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/This email address is being protected from spambots. You need JavaScript enabled to view it. .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 - Title and List
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/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><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/This email address is being protected from spambots. You need JavaScript enabled to view it. .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/This email address is being protected from spambots. You need JavaScript enabled to view it. .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>
CHOOSE YOUR COMPILER
Reproduce this code, choosing one of the compilers below (don't copy and paste! It would be too easy). They all have the same function, just choose one according to your preferences.
When copying your code, replace the existing (default) code already in the compiler with your own.
Warning! For some of these compilers, you must choose the programming language yourself from the menu that is then offered. Of course, don't forget to click on RUN!
Code
Recent versions
Tools/Methodologies
Info+
» Creation date: 2013
* Created by Facebook
* Continuous integration
* Written in JavaScript
* Cross-platform
* MIT license
News
The comments you leave us are systematically subject to rigorous moderation. Incivility and slander, threats, intimidation of all kinds, more generally all gratuitous verbal violence, or the dissemination of unverified information... are not tolerated. We also reserve the right to publish only comments which effectively advance the debate and allow a better understanding of the subject covered by the article presented on this page (as well as all its ramifications) and this, whatever its overall content.
