Diferencias

Muestra las diferencias entre dos versiones de la página.

--- informatica:programacion:javascript:bibliotecas:react [2024/03/06 16:10] – tempwin
+++ informatica:programacion:javascript:bibliotecas:react [2024/03/06 16:26] (actual) – [Estructura de un proyecto React] tempwin
@@ Línea 18: / Línea 18: @@
   * 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''