1-react-intro

React es una biblioteca JavaScript para construir interfaces de usuario.
React se utiliza para construir aplicaciones de una sola página.

React nos permite crear componentes de interfaz de usuario reutilizables.

Es una libreria de javascript para crear interfaces de usuarios en una sola pagina index.html

 Estructura react:

import React from 'react';
import ReactDOM from 'react-dom/client';

function Hello(props) {
  return <h1>Hello World!</h1>;
}

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<Hello />); 

Crear aplicación de reacción

Para aprender y probar React, debe configurar un entorno de reacción sobre tu computadora. Este tutorial utiliza la create-react-app. El create-react-app herramienta es una forma de apoyar oficialmente para crear aplicaciones de React.

Node.js está obligado a utilizar create-react-app.

Abra su terminal en el directorio que le gustaría crear su la aplicación.Ejecute este comando para crear una aplicación de React llamada my-react-app:

npx create-react-app my-react-app

create-react-app configurará todo lo que necesita para ejecutar una aplicación de React. Si ya has instalado create-react-app a nivel global, se recomienda que desinstale el paquete para asegurar que npx siempre utilice la última versión de create-react-app. Para desinstalar, ejecute este comando: 

npm uninstall -g create-react-app.

Ejecute la aplicación de reacción

Ejecute este comando para pasar a la my-react-app directorio:

cd my-react-app

Ejecute este comando para ejecutar la aplicación React my-react-app:

npm start

Una nueva ventana del navegador aparecerá con su nueva aplicación de reacción. Si no, abre tu navegador y escribe localhost:3000 en la barra de direcciones.

Modificar la aplicación de reacción

Hasta ahora, muy bien, pero cómo puedo cambiar el contenido?

Mira en el my-react-app directorio, y usted encontrará la carpeta 

src. Dentro de la src carpeta hay un archivo llamado App.js, ábrelo y se verá así:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Qué sigue?

Trate de cambiar el contenido HTML y guardar el archivo. Tenga en cuenta que los cambios son visibles inmediatamente después de guardar el archivo, no tiene que volver a cargar el navegador.

Reemplazar todo el contenido dentro de la <div className="App"> con un <h1>elemento.Consulte los cambios en el navegador cuando haga clic en Guardar.

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

Observe que hemos eliminado las importaciones que no necesitamos (logo.svg y App.csss).

El resultado:

Ahora tienes un Entorno de React en tu computadora, y estás listo para aprender más sobre React.

En el resto de este tutorial utilizaremos nuestra herramienta "Modear React" para explicar los diversos aspectos de React, y cómo se muestran en el navegador.

Si quieres seguir los mismos pasos en tu computadora, comienza por desnudando la  carpeta src  para contener sólo un archivo: index.js. También debe eliminar cualquier Líneas innecesarias de código dentro de la index.js archivo para que se vean como el ejemplo en la herramienta "Show React" abajo:

Ejemplo

Haga clic en el botón "Ejejeje" para ver el resultado.

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';

const myFirstElement = <h1>Hello React!</h1>

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);

Actualización para reaccionar 18

La actualización de una aplicación de reacción existente a la versión 18 solo requiere dos pasos.

Si ya está utilizando la última versión de create-react-appque utiliza la versión de reacción 18 puede omitir esta sección.

Paso 1: Instalar Reacto 18

Para instalar la última versión, desde la carpeta de proyecto ejecute lo siguiente desde el terminal:

npm i react@latest react-dom@latest  

Paso 2: Utiliza la nueva API raíz

Para aprovechar las características concurrentes de React 18 tendrás que usar la nueva API root para la representación del cliente.

// Before
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// After
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

 Su aplicación funcionará sin usar la nueva API raíz. Si continúas usando ReactDOM.renderSu aplicación se comportará como React 17.