React introducción de base cero al andamiaje de práctica de proyectos create-react-app para construir proyectos de React

Comenzando con React desde cero hasta la práctica real del proyecto

Capítulo 2 Andamiaje create-react-app para crear aplicaciones React

---

---

1. ¿Qué es crear-reaccionar-aplicación?

create-react-app es una herramienta de andamiaje desarrollada oficialmente por el equipo React de FaceBook para crear aplicaciones React de una sola página .
Integra el propio Webpack y está configurado con una serie de cargadores integrados y scripts npm predeterminados, lo que le permite desarrollar aplicaciones React sin configuración.
La aplicación Create React le permite crear aplicaciones web modernas con solo una línea de comandos. No es necesario aprender ni configurar una gran cantidad de herramientas de compilación, y la función de actualización de página en tiempo real le permite concentrarse más en la codificación.

2. Entorno requerido

1. Node.js: http://nodejs.cn/download/
   Simplemente continúe con el siguiente paso durante la instalación. Instálelo en su propio directorio de entorno.
2. Git: https://git-scm.com/downloadsMirror
   : https://npm.taobao.org/mirrors/git-for-windows/

3. Aplicación de creación-reacción de andamios

1. Cree una nueva carpeta (por ejemplo: reaccionar-proyecto) y abra la terminal o VsCode en la carpeta de destino.

# 全局安装 create-react-app
npm install -g create-react-app
# 或者如果不想全局安装，可以直接使用npx（临时安装，拿的是最新的脚手架）
npx create-react-app

# 查看是否安装成功
create-react-app -V

2. Cree la primera aplicación React
1) create-react-app para crear una aplicación React

# 这里的 my-app 是项目名称，注意命名方式（不能有大写字母）
create-react-app my-app

--------------创建中-------------
Creating a new React app in E:\React\project\my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

Lleva un tiempo, pero este proceso en realidad instala tres cosas:

• reaccionar: biblioteca de nivel superior para reaccionar
• reaccionar-dom: Debido a que reaccionar tiene muchos entornos operativos, por ejemplo, el lado de la aplicación es nativo de reacción y se usa reaccionar-dom cuando se ejecuta en la web.
• reaccionar-scripts: contiene todos los scripts y configuraciones para ejecutar y empaquetar aplicaciones de reacción.

Cuando aparece la siguiente interfaz, significa que el proyecto se creó correctamente.

2) De acuerdo con las indicaciones, ingrese el directorio del proyecto que creó mediantecd my-appnpm start el comando y ejecútelo. Puede ejecutar el proyecto y abrir el navegador para acceder de forma predeterminada. El número de puerto predeterminado es 3000.

3) ¡Usemos VsCode para abrir el proyecto ahora mismo!

Durante el desarrollo del proyecto, descripción de la estructura del directorio:

• build/: almacena el archivo de configuración
  (donde, dev.js: el archivo de configuración del servicio del entorno de desarrollo. webpack.dev.conf.js: el archivo de configuración del servidor en segundo plano en el entorno de desarrollo).
• node_modules: utilizado para almacenar archivos de dependencia instalados por npm install (paquetes de dependencia necesarios para la ingeniería de proyectos)
• package-lock.json: bloquea el número de versión del paquete durante la instalación para garantizar que las dependencias desarrolladas por el equipo sean consistentes
• público: directorio público estático
• src: directorio del código fuente del proyecto
  (donde, módulos: código del módulo. menos: archivo de estilo)
• estático: archivo de recursos estático
• estático/js: biblioteca pública
• dist: archivo ejecutable empaquetado

Detengámonos aquí primero, ¡hasta la próxima!