javascript react

1This is a formatted version of Komadori's answer 
2(https://tinyurl.com/Komadori)
3React is a JavaScript library for building user interfaces. 
4It is maintained by Facebook and a community of 
5individual developers and companies. 
6React can be used as a base in the development of single-page 
7or mobile applications.
8

1//npm
2npx create-react-app my-app
3
4//yarn
5yarn create react-app my-react-app

1React is a JavaScript library for building user interfaces.
2
3It is maintained by Facebook and a community of individual developers and
4companies.
5
6React can be used as a base in the development of single-page or mobile
7applications.
8

1import React, { useState, useEffect } from 'react';
2function Example() {
3  const [count, setCount] = useState(0);
4
5  // Similaire à componentDidMount et componentDidUpdate :  useEffect(() => {    // Met à jour le titre du document via l’API du navigateur    document.title = `Vous avez cliqué ${count} fois`;  });
6  return (
7    <div>
8      <p>Vous avez cliqué {count} fois</p>
9      <button onClick={() => setCount(count + 1)}>
10        Cliquez ici
11      </button>
12    </div>
13  );
14}

1class ShoppingList extends React.Component {
2  render() {
3    return (
4      <div className="shopping-list">
5        <h1>Shopping List for {this.props.name}</h1>
6        <ul>
7          <li>Instagram</li>
8          <li>WhatsApp</li>
9          <li>Oculus</li>
10        </ul>
11      </div>
12    );
13  }
14}
15
16// Example usage: <ShoppingList name="Mark" />

1class TodoApp extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = { items: [], text: '' };
5    this.handleChange = this.handleChange.bind(this);
6    this.handleSubmit = this.handleSubmit.bind(this);
7  }
8
9  render() {
10    return (
11      <div>
12        <h3>TODO</h3>
13        <TodoList items={this.state.items} />
14        <form onSubmit={this.handleSubmit}>
15          <label htmlFor="new-todo">
16            What needs to be done?
17          </label>
18          <input
19            id="new-todo"
20            onChange={this.handleChange}
21            value={this.state.text}
22          />
23          <button>
24            Add #{this.state.items.length + 1}
25          </button>
26        </form>
27      </div>
28    );
29  }
30
31  handleChange(e) {
32    this.setState({ text: e.target.value });
33  }
34
35  handleSubmit(e) {
36    e.preventDefault();
37    if (this.state.text.length === 0) {
38      return;
39    }
40    const newItem = {
41      text: this.state.text,
42      id: Date.now()
43    };
44    this.setState(state => ({
45      items: state.items.concat(newItem),
46      text: ''
47    }));
48  }
49}
50
51class TodoList extends React.Component {
52  render() {
53    return (
54      <ul>
55        {this.props.items.map(item => (
56          <li key={item.id}>{item.text}</li>
57        ))}
58      </ul>
59    );
60  }
61}
62
63ReactDOM.render(
64  <TodoApp />,
65  document.getElementById('todos-example')
66);
67