Prefacio
El artículo anterior introdujo tres términos, a saber:¿Qué es Babel?¿Qué es el paquete web?¿Qué es la NPM?
Este artículo lo guiará en la configuración de un proyecto de React, que incluye:entorno construido,Crea un proyecto de reacción,Inicie un proyecto y use la extensión React.
entorno construido
Al crear una aplicación React, todas las herramientas deben descargarse de Internet. Estas herramientas se presentaron en artículos anteriores.
Nodo.js
Node.js tiene un servicio npm incorporado que nos permite descargar rápidamente paquetes React u otros paquetes.
Para instalar la herramienta React Crear aplicación React, debe instalar el comando JavaScript en su computadora para ejecutarla.
venirPágina web oficial, puede seleccionar el idioma en la esquina superior derecha y es compatible con la interfaz de chino tradicional
- LTS: Es una versión estable, mantenida por el oficial durante mucho tiempo, suele durar más de 30 meses.
- Actual: Tiene las últimas funciones y es menos estable
Si desea confirmar si la instalación se realizó correctamente, sin importar si es Windows, MacOS o Linux, puede abrir la terminal e ingresar el siguiente comando para saber si la instalación se completó.
nodo -v
Crear un proyecto de reacción
Método 1: establecimiento del comando CRA en el sitio web oficial
Una vez establecido el entorno de Node, el siguiente paso es construir nuestro primer proyecto de React que prefiero usar.Reaccionar sitio web oficialproceso de enseñanza, aunque existen otras formas de construir proyectos rápidamente.
Una vez que se confirme que Node.js se instaló correctamente, ingrese el siguiente comando en la terminal para crear una carpeta my-app en la ubicación correspondiente, con los archivos y carpetas correspondientes.
npx crear-reaccionar-aplicación mi-aplicación
La siguiente es la estructura de la carpeta. Habrá tres carpetas y tres archivos en la carpeta my-app.
Se colocarán varios paquetes en node_modules y los paquetes instalados mediante npm install también se colocarán en esta carpeta.package.json realizará algunas configuraciones para este proyecto.
/mi-aplicación -/public -/node_modules -/src -package.json -README.md -package-lock.json
Iniciar proyecto
Una vez construido el proyecto, ¿cómo iniciarlo?
Se puede iniciar a través de las siguientes dos líneas de comando. La primera línea de comando es para ingresar a la carpeta my-app y la segunda línea de comando es para iniciar el proyecto.
cd mi aplicación npm inicio
Si se ejecuta con éxito,Quedarse sin esta pantalla significa que hemos creado con éxito nuestro primer proyecto React.
Método 2: construye tu propio entorno
También puede utilizar métodos de creación propia para crear el entorno, incluido Webpack | Npm | Babel presentado en el artículo anterior, y todo el proceso utiliza instrucciones para agregar y crear las funciones necesarias.
¿Qué es el paquete web?
Webpack es una herramienta de empaquetado modular. Su función principal es integrar varios archivos en el proyecto, incluidos JavaScript, CSS, LESS, SCSS, JSX, etc., en uno o más archivos finales. Este paquete modular ayuda a mejorar la eficiencia del desarrollo, especialmente en proyectos grandes, podemos modularizar y dividir funciones para facilitar la reutilización y las pruebas del código.
Webpack es más que una simple herramienta de empaquetado, también proporciona una serie de características poderosas, como la división de código (Code Splitting), que permite que el código se divida en múltiples fragmentos y se cargue solo cuando sea necesario para mejorar la velocidad de carga de la página. Al mismo tiempo, la modularización (Modulize) es el concepto central de Webpack. Al dividir funciones grandes en archivos y funciones pequeños, la estructura del código del programa es clara y fácil de mantener y probar.
¿Qué es la NPM?
Npm es el registro de software más grande del mundo. Los desarrolladores de código abierto de todos los continentes utilizan npm para compartir y tomar prestados paquetes de módulos de software, y muchas empresas también utilizan npm para gestionar el desarrollo privado.
El nombre completo de Npm es Node Package Manager. Podemos instalar y administrar paquetes a través de la herramienta npm cli en Node.
Por ejemplo, si desea utilizar el paquete React, solo necesita ingresar el comando en la terminal, y npm encontrará automáticamente el marco frontal de reacción del Registro y lo descargará a la carpeta node_modules.
¿Qué es Babel?
Babel es una herramienta indispensable. Su función principal es convertir la última versión de la sintaxis de JavaScript, especialmente la sintaxis de ECMAScript 6 (ES6), a una versión anterior de JavaScript que el navegador pueda comprender y ejecutar.
ES6 introduce muchas características poderosas, como funciones de flecha, cadenas de plantilla, asignación de desestructuración, etc. Sin embargo, debido a los diferentes niveles de soporte del navegador, para garantizar la compatibilidad entre navegadores, necesitamos usar Babel para la compilación.
Además, al desarrollar aplicaciones React utilizando la sintaxis JSX, también se requiere Babel para la compilación. JSX es una extensión de sintaxis de JavaScript que se utiliza para describir la estructura de los componentes de React. Permite escribir marcas similares a HTML en JavaScript, pero los navegadores no pueden ejecutar directamente la sintaxis JSX, por lo que se requiere que Babel la convierta en JavaScript puro.
Instrucciones complementarias para la compilación de React
Instalar React Developer Tools (extensión del navegador)
React Developer Tools es una herramienta de extensión para el navegador Google Chrome. Utilice el navegador para conectarse. Reaccionar herramientas de desarrollo, luego instálelo (haga clic en "Agregar a CHROME" en la esquina superior derecha) y finalmente asegúrese de que esté habilitado en el navegador.
Se puede utilizar para encontrar mensajes de error y observar algunos registros de ejecución de JavaScript en páginas web en aplicaciones React.
Instalar y configurar herramientas de desarrollo de React
La herramienta de desarrollo utilizada aquí es VS Code, que es un editor gratuito al que puede conectarse Código de estudio visual Descargue e instale la versión apropiada para el sistema operativo de su computadora.
VS Code no es una herramienta que sea completamente funcional una vez instalada. Requiere la instalación de muchas extensiones adicionales para desarrollar React.
Conclusión
Ha habido casi diez artículos sobre el movimiento vernáculo React, pero recién hemos comenzado a establecer y lanzar proyectos React.
La razón por la que enseño cómo iniciar proyectos tan tarde es porque es muy importante tener muchos conceptos antes de aprender React, incluidos npm, node.js, webpack y babel, que son herramientas que pueden usarse en el futuro.
Los artículos futuros continuarán explicando el conocimiento y las tecnologías relacionados con React.
Si tiene alguna sugerencia o pregunta, ¡deje un mensaje!
Reaccionar serie de deportes vernáculos
Babel, Webpack y NPM – Reaccionar el movimiento vernáculo 07
React JSX – Reaccionar movimiento vernáculo 06
Cómo funciona React – React Vernacular Movement 05
Funciones de alto orden de JavaScript: React Vernacular Movement 04
JavaScript Async Await - Reaccionar movimiento vernáculo 03
Español 
繁體中文 
English 
简体中文 
한국어 
日本語