React.Js

Image

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

We start with very simple codes. The more you progress, page after page, the more sophisticated the scripts will be.

C 0001 - Hello World !

Say hello...

<!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/babel-standalone@6.15.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>

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 !

C 0002 - A title and a list

Start developing a page using a small table...

<!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/babel-standalone@6.15.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>

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 !

C 0003 - Playing with a value

Changing colors...

<!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/babel-standalone@6.15.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>

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 !

C 0004 - POPUP

Interact with a POPUP...
<!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/babel-standalone@6.15.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>

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 !

Info+

Creation
» Creation date: 2013
* Created by Facebook
* Continuous integration

* Written in JavaScript
* Cross-platform
* MIT license

Practical cases

In order to train you, we add small programs every week to this section in order to keep you up to speed.

CASE 1

BASIC LEVEL

Apply colors to a list of criteria

This little program will allow you to determine which criteria in the list should be colored, and what type of color...

TRY

CASE 2

INTERMEDIATE LEVEL

Create the React environment

This little kit will allow you to set up the tools you need to practice React.

TRY

CASE 3

EXPERT LEVEL

Create a Web App.

Design and develop a single-page Web App. for customer follow-up, depending on a particular product.

TRY
2021 (C) Fond of Code tm (protected trademark) - Reflex001 / Diego Piccini (da Todi).
All rights reserved. Protected editorial content (www.theethicalweb.com).

About Us...

About Us...
Reflex001

Web
Programming
Development

Main Topics

Main Topics

Legal/Support

Legal/Support
Image