what is react
This is a formatted version of Komadori's answer
(https://tinyurl.com/Komadori)
React is a JavaScript library for building user interfaces.
It is maintained by Facebook and a community of
individual developers and companies.
React can be used as a base in the development of single-page
or mobile applications.react js
//npm
npx create-react-app my-app
//yarn
yarn create react-app my-react-appwhat is react
React is a JavaScript library for building user interfaces.
It is maintained by Facebook and a community of individual developers and
companies.
React can be used as a base in the development of single-page or mobile
applications.reactjs
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similaire à componentDidMount et componentDidUpdate : useEffect(() => { // Met à jour le titre du document via l’API du navigateur document.title = `Vous avez cliqué ${count} fois`; });
return (
<div>
<p>Vous avez cliqué {count} fois</p>
<button onClick={() => setCount(count + 1)}>
Cliquez ici
</button>
</div>
);
}javascript react
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
What needs to be done?
</label>
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
<button>
Add #{this.state.items.length + 1}
</button>
</form>
</div>
);
}
handleChange(e) {
this.setState({ text: e.target.value });
}
handleSubmit(e) {
e.preventDefault();
if (this.state.text.length === 0) {
return;
}
const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(state => ({
items: state.items.concat(newItem),
text: ''
}));
}
}
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
ReactDOM.render(
<TodoApp />,
document.getElementById('todos-example')
);react.js
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// Example usage: <ShoppingList name="Mark" />Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
