Primeros pasos
Aunque existen varias formas de empezar con React, quizá la forma más fácil es con create-react-app, una aplicación de consola que nos va a permitir crear una aplicación en React rápidamente.
El primer paso es crear nuestra aplicación utilizando npx y el comando create-react-app seguido del nombre que le quieras dar. Por ejemplo:
1
$ npx create-react-app my-app
Copied!
Cuando ejecutas ese comando create-react-app va a crear una carpeta llama my-app con una serie de archivos y subcarpetas para que puedas empezar a trabajar en tu proyecto.
Ingresa a la carpeta my-app y ejecuta el proyecto con los siguientes comandos:
1
$ cd my-app
2
$ npm start
Copied!
El último comando ejecuta el servidor de desarrollo y abre un navegador con una pantalla de bienvenida.
Felicitaciones, has creado tu primera aplicación con React!

¿Qué incluye create-react-app?

Un proyecto creado con create-react-app incluye, además de React, otras librerías como:
    Webpack que se encarga de procesar y empaquetar nuestro código JavaScript (con sus dependencias), archivos CSS y otros archivos estáticos como imágenes y fuentes.
    Babel que nos permite usar nuevas características de ECMAScript y JSX (JavaScript XML).
    PostCSS que es una librería para el procesamiento de CSS.
    Jest que es una librería para testing.
    ... entre otras.
Uno podría configurar un proyecto de React manualmente e incluir cada una de estas librerías, pero es bastante engorroso, create-react-app nos hace la vida más fácil.

Estructura del proyecto

create-react-app crea la siguiente estructura de archivos y carpetas:
1
my-app/
2
README.md
3
node_modules/
4
package.json
5
public/
6
index.html
7
favicon.ico
8
src/
9
App.css
10
App.js
11
App.test.js
12
index.css
13
index.js
14
logo.svg
Copied!
Los dos archivos más importantes son:
    public/index.html - la plantilla de la aplicación
    src/index.js - el punto de entrada de JavaScript
Puedes eliminar o renombrar otros archivos según tus necesidades.
Dentro de src se incluyen todos los archivos JavaScript y CSS de tu aplicación. También es recomendable incluir otros archivos estáticos como imágenes y fuentes en esta carpeta. Puedes crear subcarpetas para organizar mejor los archivos.
En public van todos los archivos estáticos que necesites incluir en la plantilla public/index.html.
Puedes crear otras carpetas además de src y public. Estas carpetas no van a ser incluídas en el paquete de distribución.

Scripts

En la carpeta del proyecto puedes ejecutar los siguientes comandos:
    npm start - inicia el servidor de desarrollo y abre un navegador con la aplicación.
    npm test - ejecuta las pruebas.
    npm run build - empaqueta la aplicación para producción en la carpeta build.
    npm run eject - permite cambiar manualmente las librerías y configuración que utiliza create-react-app por defecto. Ten cuidado con este comando, una vez lo ejecutas no hay marcha atrás.

Hot reloading

Una de las funcionalidades más importantes de los proyectos creados con create-react-app es la capacidad de hacer cambios en caliente sin necesidad de reiniciar el servidor. Si haces un cambio en algún archivo en src o public el navegador se refresca automáticamente.
Last modified 1yr ago