====== React ======

Biblioteca de [[informatica:programacion:javascript|JavaScript]] para construir interfaces de usuario.

  * [[https://es.react.dev/|Web oficial]]

===== Características =====

  * Arquitectura basada en componentes
  * Gran comunidad de desarrolladores
  * Declarativo 

===== Requisitos =====

Para el desarrollo con React es necesario:

  * Navegador web
  * Editor de código
  * Motor de ejecución de JavaScript como [[informatica:software:node.js|Node.js]]

Si usamos [[informatica:software:vscodium|Visual Studio Code]] como editor de código, son interesantes las siguientes extensiones:

  * Prettier - Code formatter

===== Hola, mundo =====

Creamos un proyecto React desde la línea de comandos:

<code>
npx create-react-app <NOMBRE_PROYECTO>
</code>

Esto descargará todo lo necesario para comenzar a desarrollar una aplicación con React.

Si vamos al directorio recién creado y ejecutamos:

<code>
npm start
</code>

Se abrirá el navegador web en ''%%http://localhost:3000%%'' con la aplicación React en ejecución.

===== Estructura de un proyecto React =====

Tras crear la estructura mediante ''npx create-react-app'', veremos unos cuantos ficheros interesantes:

  * ''package.json'': dependencias y scripts necesarios para el proyecto
  * ''node_modules/'': lugar de instalación de todas las dependencias (cuando hacemos ''npm install'' o ''npx create-react-app'')
  * ''public/'': contiene el único fichero HTML que tendrá nuestra aplicación (''index.html''). React construye aplicaciones de una sola página (//single page web//). Rara vez tendremos que tocar este fichero.
  * ''src/'': 
    * ''index.js'': punto de partida de una aplicación React.
    * ''App.js''