¿Qué es Reaccionar?

React es una biblioteca de JavaScript. React es delgado y es extremadamente fácil mezclarlo con otras bibliotecas de terceros.

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

Al mirar los ejemplos de React, probablemente ya haya visto JSX en acción.

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) es un concepto de programación en el que la representación de una interfaz de usuario se almacena en una memoria estándar o "virtual" y se sincroniza con un DOM "real" mediante una biblioteca como ReactDOM. Este proceso se llama reunión. Se ven como un árbol en la implementación de la "cúpula virtual" en respuesta.

Componente:

Los componentes de React son similares en apariencia y diferentes en los datos. Un sitio web tiene demasiadas secciones. A veces vemos que las estructuras de algunas secciones son las mismas pero los datos son dinámicos. En esta situación, necesitamos reescribir nuestros códigos. Al usar el componente de reacción, no podemos duplicar nuestros códigos. Esa es la principal belleza de un componente.

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

Styled-components es una biblioteca para React y React Native que le permite usar estilos de nivel de componente en su aplicación que están escritos con una combinación de JavaScript y 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 veces necesitamos pasar algunos datos de un componente a otros componentes. Props es un método en el que podemos pasar datos del componente principal al componente secundario. Los accesorios son muy efectivos para aplicaciones de tipo pequeño.

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

En React, los estilos en línea no se especifican como una cadena. En su lugar, se especifican con un objeto cuya clave es la versión camelCased del nombre del estilo y cuyo valor es el valor del estilo, generalmente una cadena.

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 es otro método para pasar algunos datos de los componentes. Sabemos que los accesorios pueden pasar datos del componente principal al componente secundario. Pero a veces necesitamos pasar datos de child a parent u otros componentes que no son los mismos. En esta situación, usamos Context-API y pasamos fácilmente datos de cada componente en nuestra aplicación de reacción.