Qu'est-ce que React ?

React est une bibliothèque JavaScript. React est mince et il est extrêmement facile de le mélanger avec d'autres bibliothèques tierces.

npx create-react-app my-app
cd my-app
npm start

Lorsque vous regardez des exemples React, vous avez probablement déjà vu JSX en action.

const rootElement =
 React.createElement(‘div’, {},
   React.createElement(‘h1’, {style: {color: ‘red’}}, 
     ‘The world is yours’),
   React.createElement(‘p’, {}, 
     ‘Say hello to my little friend’)
 )
ReactDOM.render(rootElement, document.getElementById(‘app’))

Le DOM virtuel (VDOM) est un concept de programmation où la représentation d'une UI est stockée dans une mémoire standard, ou "virtuelle", et synchronisée avec un "vrai" DOM ​​par une bibliothèque comme ReactDOM. Ce processus est appelé réunion. Ils ressemblent à un arbre dans la mise en œuvre du "dôme virtuel" en réponse.

Composant:

Les composants React sont similaires dans leur aspect différent dans les données. Un site Web comporte trop de sections. Parfois, nous voyons que les structures de certaines sections sont les mêmes mais que les données sont dynamiques. Dans cette situation, nous devons réécrire nos codes. En utilisant le composant React, nous ne pouvons pas dupliquer nos codes. C'est la principale beauté d'un composant.

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}

Styled-components est une bibliothèque pour React et React Native qui vous permet d'utiliser des styles au niveau des composants dans votre application qui sont écrits avec un mélange de JavaScript et CSS

First we need to install styled-components library
npm install styled-components --save
Now we can create a variable by selecting a particular HTML element where we store our style keys
const Div = styled.htmlElemnet`color: pink`

Parfois, nous devons transmettre des données d'un composant à d'autres composants. Props est une méthode permettant de transmettre des données d'un composant parent à un composant enfant. Les accessoires sont si efficaces pour les petites applications.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />      <Welcome name="Cahal" />      <Welcome name="Edite" />    </div>
  );
}

• useState
• useEffect
• useContext

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

npm install react-router-dom

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

Dans React, les styles en ligne ne sont pas spécifiés sous forme de chaîne. Au lieu de cela, ils sont spécifiés avec un objet dont la clé est la version camelCased du nom du style et dont la valeur est la valeur du style, généralement une chaîne.

import React from ‘react’;
const divStyle = { margin: ‘40px’, border: ‘5px solid pink’};
const pStyle = { fontSize: ‘15px’, 
textAlign: ‘center’}; const Box = () => ( 
    <div style={divStyle}> 
        <p style={pStyle}>Get started with inline style</p> 
    </div>
); export default Box;

Context-API est une autre méthode pour transmettre certaines données des composants. Nous savons que les accessoires peuvent transmettre des données d'un composant parent à un composant enfant. Mais parfois, nous devons transmettre des données de l'enfant au parent ou à d'autres composants qui ne sont pas les mêmes. Dans cette situation, nous utilisons Context-API et transmettons facilement les données de chaque composant de notre application React.