Cos'è Reagire?

React è una libreria JavaScript. React è sottile ed è estremamente facile combinarlo con altre librerie di terze parti.

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

Quando guardi gli esempi di React, probabilmente hai già visto JSX in azione.

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’))

Virtual DOM (VDOM) è un concetto di programmazione in cui la rappresentazione di un'interfaccia utente è archiviata in una memoria standard, o "virtuale", e sincronizzata con un DOM "reale" da una libreria come ReactDOM. Questo processo è chiamato riunione. In risposta, sembrano un albero nell'implementazione della "cupola virtuale".

Componente:

I componenti di React sono simili nell'aspetto diverso nei dati. Un sito Web ha troppe sezioni. A volte vediamo che le strutture di alcune sezioni sono le stesse ma i dati sono dinamici. In questa situazione, dobbiamo riscrivere i nostri codici. Utilizzando il componente react non possiamo duplicare i nostri codici. Questa è la principale bellezza di un componente.

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

Styled-components è una libreria per React e React Native che ti consente di utilizzare stili a livello di componente nella tua applicazione scritti con una combinazione di JavaScript e 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`

A volte abbiamo bisogno di passare alcuni dati da un componente ad altri componenti. Props è un metodo in cui possiamo passare i dati dal componente padre al componente figlio. Gli oggetti di scena sono così efficaci per applicazioni di piccolo tipo.

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>
  );
}

In React, gli stili inline non sono specificati come una stringa. Vengono invece specificati con un oggetto la cui chiave è la versione camelCased del nome dello stile e il cui valore è il valore dello stile, solitamente una stringa.

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 è un altro metodo per passare alcuni dati dai componenti. Sappiamo che gli oggetti di scena possono passare i dati dal componente padre al componente figlio. Ma a volte abbiamo bisogno di passare i dati dal figlio al genitore o ad altri componenti che non sono gli stessi. In questa situazione, utilizziamo Context-API e passiamo facilmente i dati da ogni componente nella nostra app di reazione.