Las razones para que React construya el flujo de trabajo se han discutido anteriormente. Ahora, el siguiente paso es entender cómo podemos lograrlo.
– Tener una herramienta de gestión de la dependencia es lo más importante. Se trata de bibliotecas proporcionadas por terceros. React, React DOM y casi todas las herramientas de construcción que vamos a utilizar son dependencias. El Gestor de Paquetes de Nodos, también conocido como NPM, es una herramienta de construcción esencial para la gestión de paquetes y dependencias.
– Además de una herramienta de gestión de dependencia, podemos utilizar un paquete para generar código modular. Si el código es modular, tendrá múltiples archivos que contienen código para diferentes partes de la aplicación que realizan su propia funcionalidad. Webpack, por ejemplo, es un bundler muy útil cuando necesitamos enviar archivos divididos al navegador. Algunos de los navegadores no admiten archivos múltiples y, aunque lo hagan, no podemos enviar varias solicitudes de estos archivos.
– Finalmente, se requiere un servidor para ejecutar y probar el código en nuestro ordenador local.
Algunos de estos pueden ser muy confusos para un principiante. Pero afortunadamente, hay una herramienta desarrollada por el equipo de React para crear aplicaciones que soporten todos los puntos que hemos discutido anteriormente, y no necesitamos configurar nada manualmente. Esa herramienta especial es Create React App. Es importante señalar que se debe dejar el servidor del NPM funcionando para que todos los cambios en el código puedan ser observados inmediatamente. Es importante discutir algunos de los archivos y carpetas principales.
123456789101112131415161718.├── nodo__copia3── public│ ├── favicon.ico│ ├── index.html│ └── manifiesto.json├── README.md├── src│ ├─── App.css│ ├── App. js│ ├── App.test.js│ ├── index.css│ ├── index.js│ ├── logo.svg│ └ └── registerServiceWorker.js├─── paquete.json├── package-lock.json├─── README.md
javascript
El archivo «paquete.json» contiene todas las dependencias del proyecto.
12345678910111213141516171819202122232425262728293031{"nombre": "mi-react-app", "versión": "1.0.0", "privado":true, "dependencias":{"reaccionar":"^16.8.6", "react-dom":"^16.8.6", "reac-scripts": "3.0". 1"}, "scripts":{"start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject"}, "eslintConfig":{"extends": "react-app"}, "browserslist":{"production":[">0. 2%", "no muerto", "no op_mini all"], "development":["last 2 Chrome version", "last 3 Firefox version", "last 5 Safari version"]}}javascript
Se puede ver a través del archivo package.json que nuestro proyecto tiene tres dependencias. También se puede ver que hemos importado a React. El proyecto está usando:
– La última versión de React.
– Reaccionar DOM, que proporciona métodos específicos para DOM. Sólo se utilizará el método de renderización de este módulo en el archivo index.js con el fin de renderizar la aplicación al DOM.
– React Scripts, un paquete que contiene scripts y configuraciones que cumplen los requisitos para el flujo de trabajo de React build e incluye el servidor de desarrollo y las últimas características de JavaScript.
– La carpeta node_modules: Aquí es donde se encuentran todas las dependencias y sub-dependencias de la aplicación. Sólo tres de las dependencias fueron discutidas en el archivo package.json: React, React DOM, y React Scripts. Específicamente, React Scripts tiene muchas otras dependencias, que consisten en todas las herramientas de construcción que compilan nuestro código y así sucesivamente. Es importante señalar que nada en la carpeta node_modules debe ser modificado.
Esta es la carpeta raíz de nuestro proyecto, y nuestro servidor web interactúa directamente con ella. Hay un archivo importante presente en esta carpeta llamado index.html. Es el único archivo HTML del proyecto hasta ahora y contiene una simple página HTML como se muestra a continuación:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546<! DOCTYPE html;<htmllang="en"<head;<metacharset="utf-8"/;<link/;<metaname="viewport "content="width="ancho=ancho de dispositivo, escala inicial=1"/;<metaname="theme-color "content="#000000"/;<! -- manifest.json proporciona metadatos que se utilizan cuando se instala la aplicación web en el dispositivo móvil o en el escritorio de un usuario. Ver https://developers.google.com/web/fundamentals/web-app-manifest/ --;<link/;--;!-- Fíjate en el uso de %PUBLIC_URL% en las etiquetas de arriba. Será reemplazado por la URL de la carpeta "pública" durante la construcción. Sólo los archivos dentro de la carpeta `pública` pueden ser referenciados desde el HTML.A diferencia de "/favicon.ico" o "favicon.ico", "%PUBLIC_URL%/favicon.ico" funcionará correctamente tanto con el enrutamiento del lado del cliente como con una URL pública no raíz. Aprende a configurar una URL pública no-raíz ejecutando "npm run build". -- React App</title;/head;-- body;-- noscript;-- Necesitas habilitar JavaScript para ejecutar esta aplicación.-- Este archivo HTML es una plantilla. Si lo abre directamente en el navegador, verá una página vacía. Puede añadir fuentes web, meta tags o análisis a este archivo. El paso de construcción colocará los scripts empaquetados en la etiqueta <body;-- Para comenzar el desarrollo, ejecute `npm start` o `yarn start`. Para crear un paquete de producción, use "npm run build" o "yarn build". --;Cuerpo--;/cuerpo--;/html--;
html
El flujo de trabajo de la construcción de React instalará los archivos del guión en el archivo anterior. Podemos añadir código HTML a este archivo, pero se recomienda no actualizarlo. Hay un importante elemento div con ID root que debe ser discutido aquí:
1<div.../div...
html
El significado de esta división radica en el hecho de que nuestra aplicación React se renderizará a esta división. Las librerías CSS y las metaetiquetas pueden ser importadas en este archivo HTML. El archivo manifest.json tiene el siguiente aspecto:
123456789101112131415{"short_name": "React App", "name": "Create React App Sample", "icons":[{"src": "favicon. ico", "tamaños": "64x64 32x32 24x24 16x16", "tipo": "image/x-icon"}], "start_url":".", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff"}javascript
La información sobre la aplicación es proporcionada al navegador por este archivo. Por ejemplo, este archivo es esencial para los navegadores móviles para facilitar la adición de un atajo a la aplicación web.
Otra carpeta importante es el src. Contiene archivos con la aplicación React en la que vamos a trabajar. El archivo index.js está dentro de esta carpeta:
12345678910importReactfrom$0027react$0027;importReactDOMfrom$0027react-dom$0027;import$0027./index.css$0027;importAppfrom$0027./App$0027;import*as serviceWorker from$0027./serviceWorker$0027;ReactDOM. render(<App/,document.getElementById($0027root$0027));// Para que nuestra aplicación funcione sin conexión y tenga una carga más rápida, podemos cambiar unregister() por register() a continuación. // Sin embargo, esto tiene algunos inconvenientes.// Podemos conocer más sobre los trabajadores del servicio en el siguiente enlace; https://bit.ly/CRA-PWAserviceWorker.unregister();
javascript
El elemento DOM raíz, es decir, el elemento con id raíz en el archivo HTML, se accede desde este script.
1ReactDOM.render(<App/>,document.getElementById($0027root$0027));
javascript
Como habrán notado, el código anterior utiliza el método de renderizado para renderizar la aplicación React. También hay una referencia al objeto App, que se importa desde el archivo App.
1importarAplicaciones de$0027./App$0027;
javascript
No es necesario añadir la extensión .js para el archivo de la aplicación porque se añade automáticamente por el flujo de trabajo de la construcción de Reactancia. A continuación está nuestra App.js:
123456789101112131415161718192021222324importReactfrom "reacciona";importar logo de"./logo.svg";importar"./App. css";functionApp(){retorno(<div className="App"><header className="App-header">img src={logo} className="App-logo" alt="logo"/;p>Edit<code>src/App. js</código;y guardar para recargar.¹;/p>;a className="App-link";LearnReact</a>/cabecera;¹;/div;);}exportdefaultApp;javascript
Actualmente, App es el único componente de React que tenemos en nuestro proyecto. A continuación se muestra el App.css;
1234567891011121314151617181920212223242526272829.App{text-align: center;}.App-logo{animación: App-logo-gira 5s lineal 2s infinito alternativo;altura:40vh;puntero-eventos: ninguno;}.App-cabecera{color de fondo:#efefef;min-altura:150vh;visualizar: flex;flex-dirección: fila;alinear-artículos: izquierda;justificar-contenido: izquierda;tamaño de fuente:calc(10px+3vh);color: blanco;}. App-link{color:#efefef;}@ keyframes App-logo-turn{from{transform:rotate(0deg);}to{transform:rotate(180deg);}}css
El estilo del componente de la aplicación en App.js está determinado por el archivo App.css. Sin embargo, los estilos definidos aquí no se aplican sólo al componente App. En realidad son estilos globales. También existe el archivo index.css como se muestra a continuación:
12345678910body{margin:0;font-family: "Times New Roman", Times, serif, Arial, sans-serif, Helvetica;-webkit-font-smoothing: auto;-moz-osx-font-smoothing: auto;}code{font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;}css
El CSS anterior representa los estilos globales. El archivo registerServiceWorker.js es importante para registrar a cualquier trabajador de servicios. Carga los archivos de script del proyecto, pero no es necesario añadir ninguna configuración aquí. También puede ser eliminado si no queremos utilizar ningún trabajador de servicio.Finalmente, tenemos el archivo App.test.js como se muestra a continuación:
123456789101112131415161718192021222324importReactfrom$0027react$0027;import logo from$0027./logo.svg$0027;import$0027./App. css$0027;functionApp(){return(<div className="App"><header className="App-header">img src={logo} className="App-logo" alt="logo"/ <p>Edit<code>src/App. js</código;y guardar para recargar.¹;/p>;a className="App-link";LearnReact</a>/cabecera;¹;/div;);}exportdefaultApp;javascript
El propósito del código anterior es escribir una prueba para varios componentes de la aplicación.