Tutorial de React

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

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

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

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

Características de React

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

  • 2. Eficiente−React simula el DOM, minimizando al máximo la interacción con el DOM.

  • 3. Flexible−React puede funcionar bien con bibliotecas o frameworks conocidos.

  • 4.JSX− JSX es una extensión de la sintaxis de JavaScript. El desarrollo con React no requiere necesariamente JSX, pero recomendamos usarlo.

  • 5. Componentes− Al construir 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 reactivo− React implementa un flujo de datos unidireccional 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, necesitas tener los siguientes conocimientos básicos:

Primer ejemplo de React

En cada capítulo, puedes editar el ejemplo 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; puedes, 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 React simple function App() { return<h1>Hello, React!</h1>;<App />); </script>

Pruébalo »

Introducir 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 introducen respectivamente las bibliotecas React, ReactDOM y Babel Standalone.

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

O el entorno de desarrollo de React creado con la herramienta create-react-app (que se presentará en el próximo 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 />);

En este momento, al abrir el navegadorhttp://localhost:3000/se mostrará la salida:

Hello World!

Referencias

Otras extensiones