Tutorial de React

React es una biblioteca de JAVASCRIPT para construir interfaces de usuario.

React se usa principalmente para construir UI; muchos consideran que React es la V (vista) en MVC.

React se originó como un proyecto interno de Facebook para construir el sitio de Instagram, y se convirtió en código abierto en mayo de 2013.

React tiene un alto rendimiento y su lógica de código es muy simple; cada vez más personas comienzan a prestarle atención y a usarlo.

Características de React

  • 1. Diseño declarativo−React utiliza un paradigma declarativo, lo que permite describir aplicaciones fácilmente.

  • 2. Eficiente−React, mediante la simulación del DOM, minimiza al máximo la interacción con el DOM.

  • 3. Flexible−React se integra bien con bibliotecas o frameworks conocidos.

  • 4.JSX− JSX es una extensión de la sintaxis de JavaScript. No es obligatorio usar JSX en el desarrollo con React, pero lo recomendamos.

  • 5. Componentes− Al crear componentes con React, el código es más fácil de reutilizar y se puede aplicar muy bien en el desarrollo de proyectos grandes.

  • 6. Flujo de datos unidireccional y reactivo− React implementa un flujo de datos unidireccional y reactivo, reduciendo así el código repetido; por eso es más simple que el enlace de datos tradicional.

Conocimientos necesarios antes de leer este tutorial:

Antes de comenzar a aprender React, necesita tener los siguientes conocimientos básicos:

Primer ejemplo de React

En cada capítulo, puede editar los ejemplos en línea y luego hacer clic en el botón para ver el resultado.

Este tutorial utiliza la versión 18.2.0 de React; puede, en el sitio web oficial,https://react.dev/descargar la última versión.

Ejemplo de React

<div id="example"></div> <script type="text/babel">// Componente simple de React function App() { return<h1>Hello, React!</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); // Renderiza el componente React en el DOM root.render(<App />); </script>

Pruébalo »

Importar scripts externos:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script>

Estas tres líneas de código importan las bibliotecas React, ReactDOM y Babel Standalone, respectivamente.

  • React se usa para construir interfaces de usuario.
  • ReactDOM se usa para renderizar componentes de React en el navegador.
  • Babel Standalone se usa para compilar la sintaxis de JSX al instante en el navegador.

O utilice el entorno de desarrollo de React creado con la herramienta create-react-app (que se presentará en el siguiente capítulo):

Ejemplo

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

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

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

Cuando abra el navegadorhttp://localhost:3000/se mostrará:

Hello World!

Referencias

Otras extensiones