Share
React ha sido conocido en el pasado por ser difícil de comenzar a crear aplicaciones, ya que realmente tenía que entender cómo configurar las herramientas de construcción manualmente. Esto es incluso antes de escribir una sola línea de código React.
La herramienta crear-reaccionar-aplicación ayuda enormemente con este problema, ya que le permite a cualquier persona crear una aplicación React en pleno funcionamiento sin necesidad de saber cómo configurar las herramientas de construcción. La realidad es que la aplicación crear-reaccionar estará bien para la mayoría de las aplicaciones, especialmente si eres nuevo en Reaccionar.
A medida que adquiera más experiencia con React, es posible que tenga ciertos requisitos para sus aplicaciones que necesitan una configuración personalizada de los archivos de configuración. En este caso, deberías poder configurar las herramientas de compilación React manualmente, ya que la aplicación create-react-app las oculta de forma predeterminada.
En este tutorial, te mostraré cómo configurar una aplicación React configurando manualmente las herramientas de compilación a medida que avanzamos. Esperamos que esto le dé la confianza para seguir adelante y experimentar con configuraciones más complejas..
Aunque puede parecer un poco desalentador al principio, disfrutará de todos los beneficios de tener un control total sobre cada configuración de configuración. Y puede decidir exactamente qué herramientas se incluyen en su aplicación, que pueden variar de un proyecto a otro. Este enfoque también le permite incorporar fácilmente nuevas herramientas de construcción a medida que se presentan (lo que hacen con frecuencia).
¿Estás listo para crear tu primera aplicación React completamente desde cero? Vamos a hacerlo.
Para demostrar cómo configurar una aplicación React a través de la configuración manual de las herramientas de construcción, estaremos construyendo la misma, muy simple, aplicación React de tutoriales anteriores en esta serie.
Comience por crear una carpeta llamada my-first-components-build, y luego abre una ventana de línea de comando que apunta a esta carpeta.
Tipo npm init para crear un paquete.json expediente. Este archivo contendrá toda la información sobre las herramientas utilizadas para crear su aplicación, además de la configuración asociada. Acepta todos los ajustes predeterminados y sigue pulsando. Entrar (alrededor de diez veces) hasta completar.
Si aceptaste todos los valores por defecto, paquete.json se verá así:
"name": "my-first-components-build", "version": "1.0.0", "description": "," main ":" index.js "," scripts ": " test " : "echo \" Error: no se especificó la prueba \ "&& exit 1", "autor": "", "license": "ISC"
Ahora necesitamos agregar los scripts React y ReactDOM a nuestro proyecto. Lo haremos a través de npm, el administrador de paquetes para Node.js.
Dentro del mismo directorio de línea de comandos, ingrese:
npm install --save reaccionar reaccionar-dom
Esto instala tanto React como ReactDom, más cualquier dependencia requerida por esos dos módulos. Notarás que ahora tenemos un nuevo nodo_módulos directorio que es donde los módulos se han añadido a.
Si echas un vistazo a la paquete.json archivo, un nuevo dependencias Se ha agregado una propiedad que contiene información sobre los módulos de nodos que instalamos..
"dependencias": "reaccionar": "^ 15.6.1", "reaccion-dom": "^ 15.6.1"
Esto sucedió porque especificamos la --salvar opción en nuestro npm instalar mando. Esto notificó a npm que queríamos hacer un seguimiento de nuestras dependencias de proyectos instalados. Esto es importante si queremos compartir nuestro proyecto..
Típicamente, porque la nodo_módulos La carpeta es tan grande que no desea intentar compartirla directamente. En su lugar, compartes tu proyecto sin el nodo_módulos carpeta. Entonces, cuando alguien descarga tu proyecto, todo lo que tienen que hacer es escribir npm instalar para duplicar la configuración directamente desde paquete.json.
Nota: En npm 5.x, los módulos instalados se guardan automáticamente en paquete.json. Ya no tiene que especificar manualmente la --salvar opción.
Dentro de my-first-components-build carpeta, crea un nuevo src carpeta, y añadir una index.js archivarlo Volveremos sobre esto más adelante cuando comencemos a crear nuestra aplicación React, una vez que hayamos configurado los archivos de configuración del proyecto..
Agregue un archivo index.html dentro de la misma carpeta con el siguiente código:
Creación manual de una aplicación React, utilizando herramientas de construcción
Queremos poder compilar nuestra aplicación en un solo archivo JavaScript, y también hacer uso de las clases y módulos JSX y ES6. Para hacer esto, necesitamos instalar los módulos Webpack y Babel a través de npm.
Instalemos a Babel primero. Escriba lo siguiente en la ventana de línea de comandos:
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-reaccion
Esto instala todos los módulos necesarios para que Babel compile los códigos ES6 y JSX a JavaScript estándar..
Ahora, instalemos Webpack, de nuevo a través de la línea de comando:
npm install --save-dev html-webpack-plugin webpack webpack-dev-server
Esto instala todos los módulos necesarios para Webpack, un servidor web local, y nos permite dirigir Webpack para crear una dinámica index.html archivo en el público carpeta basada en la que agregamos a la src carpeta. También podemos agregar una referencia dinámica al archivo JavaScript incluido dentro del archivo HTML cada vez que se construye la aplicación..
Después de que estos nuevos módulos hayan sido instalados, su paquete.json archivo ahora se verá así:
"dependencies": "react": "^ 15.6.1", "react-dom": "^ 15.6.1", "devDependencies": "babel-core": "^ 6.25.0", "babel -loader ":" ^ 7.1.0 "," babel-preset-env ":" ^ 1.5.2 "," babel-preset-react ":" ^ 6.24.1 "," html-webpack-plugin ":" ^ 2.28.0 "," webpack ":" ^ 3.0.0 "," webpack-dev-server ":" ^ 2.5.0 "
Esta vez, sin embargo, las dependencias de Webpack y Babel se guardan en paquete.json como dev dependencias.
Esto significa que estos módulos particulares son necesarios durante la fase de desarrollo (es decir, compilación) de la aplicación. Por otro lado, las dependencias (como React y ReactDOM) se requieren durante el tiempo de ejecución, por lo que se incluirán directamente junto con nuestro código de aplicación personalizado.
Para que Webpack genere nuestra aplicación y la incluya en un solo archivo, debemos configurar los ajustes. Dentro de la carpeta de la aplicación raíz, cree webpack.config.js, que se utiliza para almacenar configuraciones de compilación específicas de Webpack.
Necesitamos webpack para hacer tres cosas:
Dentro webpack.config.js, añadir:
Accentsconagua
var ruta = requiere ('ruta'); var HtmlWebpackPlugin = require ('html-webpack-plugin'); module.exports = entry: './src/index.js', output: path: path.resolve (__ dirname, 'public'), nombre de archivo: 'build.js', module: rules: [test : /\.(js)$/, use: 'babel-loader'], plugins: [new HtmlWebpackPlugin (template: 'src / index.html')]No te preocupes demasiado por la sintaxis utilizada aquí; acaba de entender la visión general de lo que está pasando.
Todo lo que estamos haciendo es exportar un objeto JavaScript con ciertas propiedades que controlan cómo Webpack construye nuestra aplicación. los entrada La propiedad especifica el punto de inicio de nuestra aplicación React, que es index.js. A continuación, el salida La propiedad define la ruta de salida y el nombre de archivo del archivo JavaScript empaquetado..
En cuanto al proceso de compilación en sí, queremos que Webpack pase todos los archivos JavaScript a través del compilador de Babel para transformar JSX / ES6 a JavaScript estándar. Hacemos esto a través de la módulo propiedad. Simplemente especifica una expresión regular que ejecuta las transformaciones de Babel. solamente para archivos JavaScript.
Para completar la configuración de Babel, necesitamos agregar una entrada a la paquete.json Archivo para especificar qué transformaciones de Babel queremos realizar en nuestros archivos JavaScript. Abrir paquete.json y agrega un Babel propiedad:
"babel": "presets": ["env", "reaccionar"],
Esto ejecutará dos transformaciones en cada archivo JavaScript en nuestro proyecto. los env la transformación convertirá ES6 JavaScript en JavaScript estándar que es compatible con todos los navegadores. Y el reaccionar la transformación compilará el código JSX hasta createElement () Llamadas de función, que es perfectamente válido JavaScript..
Ahora, de vuelta a nuestro webpack.config.js expediente.
La última propiedad que tenemos es plugins, que contiene cualquier operación especial que queremos realizar durante el proceso de construcción. En nuestro caso, necesitamos Webpack para crear un index.html archivo que incluye una referencia al archivo JavaScript empaquetado. También indicamos una existente index.html El archivo (el que creamos anteriormente) se usará como plantilla para crear el paquete final. index.html expediente.
Ahora agreguemos un guión propiedad a paquete.json. Por cierto, puedes agregar tantos scripts como quieras para realizar varias tareas. Por ahora, solo queremos poder ejecutar Webpack, así que en paquete.json eliminar el "prueba" Guión y reemplazarlo con:
"scripts": "build": "webpack",,
Antes de probar el proceso de compilación, agreguemos un componente React a index.js así que tenemos algo que hacer.
importar React, Componente desde 'reaccionar'; importar ReactDOM desde 'react-dom'; la aplicación de clase extiende el Componente render () return () ReactDOM.render (Hola Mundo!
, document.querySelector ('#app'));
Esto debería parecerte muy familiar si has seguido los tutoriales anteriores de esta serie..
Desde la línea de comando, ejecute:
npm ejecutar construir
Después de un rato, deberías ver un nuevo público carpeta creada dentro my-first-components-build, que contiene index.html y index.js. Abrir index.html Para ver el resultado de nuestra aplicación React de prueba..
Observe que el archivo JavaScript incluido se ha agregado para nosotros, y el componente de prueba se representa en el elemento DOM correcto.
Una vez que comience a realizar varios cambios en su aplicación, pronto descubrirá que es bastante tedioso tener que editar manualmente un archivo, guardarlo, ejecutar el comando de compilación y luego volver a cargar la ventana del navegador para ver los cambios..
Afortunadamente, podemos usar el mini servidor Webpack que instalamos anteriormente para automatizar este proceso. Agrega un segundo script a paquete.json por lo que la propiedad 'scripts' se ve así:
"scripts": "build": "webpack", "dev": "webpack-dev-server --open",
Ahora ejecuta:
npm run dev
Después de unos segundos, verá una nueva pestaña del navegador abierta con su aplicación web ejecutándose. La URL ahora apunta a un servidor local en lugar de apuntar a un archivo local específico. Hacer un cambio menor a index.js en el src carpeta y guardar. Observe que su aplicación se actualiza automáticamente en el navegador casi instantáneamente para reflejar los nuevos cambios.
Webpack ahora supervisará los archivos en su aplicación para detectar cambios. Cuando se realice y se guarde cualquier cambio, Webpack volverá a compilar su aplicación y recargará automáticamente la ventana del navegador con las nuevas actualizaciones.
Nota: el servidor de Webpack no reconstruirá su aplicación, como tal, sino que almacena los cambios en un caché, por lo que puede actualizar el navegador tan rápidamente. Esto significa que no verá las actualizaciones reflejadas en el público carpeta. De hecho, puede eliminar esta carpeta por completo al utilizar el servidor Webpack..
Cuando necesite construir su aplicación, simplemente puede ejecutar npm ejecutar construir para crear el público Carpeta de nuevo (si es necesario) y envíe sus archivos de aplicaciones, listos para su distribución.
Para completar, agreguemos los dos componentes simples que hemos estado usando en los tutoriales anteriores.
Agregue dos nuevos archivos en la carpeta del proyecto raíz llamada MyFirstComponent.js y MySecondComponent.js a la carpeta principal de la aplicación. En MyFirstComponent.js, añade el siguiente código:
importar React, Componente desde 'reaccionar'; la clase MyFirstComponent extiende el Componente render () return (this.props.number: Hola de React!
) exportar por defecto MyFirstComponent;
Y en MySecondComponent.js, añadir:
importar React, Componente desde 'reaccionar'; la clase MySecondComponent extiende el Componente render () return (this.props.number: My Second React Component.
) exportar por defecto MySecondComponent;
Para utilizar estos componentes en nuestra aplicación, actualizar index.js a lo siguiente:
importar React, Componente desde 'reaccionar'; importar ReactDOM desde 'react-dom'; importar MyFirstComponent desde './MyFirstComponent'; importar MySecondComponent desde './MySecondComponent'; la aplicación de clase extiende el Componente render () return () ReactDOM.render (Mis primeros componentes reaccionan!
, document.querySelector ('#app'));
Esto da como resultado el mismo resultado que hemos visto anteriormente, excepto que esta vez a través de la configuración de la aplicación React 100% manualmente.
Una vez que haya realizado esta configuración manual una vez y haya creado los archivos de configuración de configuración, esta es la única vez que necesitará hacer esto completamente desde cero. Para proyectos futuros, puede reutilizar uno o más de sus archivos de configuración existentes, haciendo que los proyectos React posteriores sean mucho más rápidos de configurar.
Incluso podría crear un conjunto de plantillas de inicio React especialmente diseñadas y alojarlas en GitHub. Entonces sería un caso simple de clonar un proyecto de inicio y ejecutar npm init para instalar los módulos Node.js requeridos.
El proyecto React para este tutorial está disponible para descargar, por lo que puede jugar con él o usarlo como una plantilla para nuevos proyectos..
Haga clic en el Descargar adjunto Enlace en la barra lateral derecha para acceder al archivo .zip del proyecto. Una vez descargado, extraerlo y abrir una ventana de línea de comandos. Asegúrate de estar en el my-first-components-build directorio.
Ingrese los siguientes comandos para instalar y compilar la aplicación React.
npm install npm run dev
El primer comando descargará todos los módulos Node.js necesarios para el proyecto, lo que tomará un minuto o dos. El segundo comando compilará la aplicación React y ejecutará el mini servidor web, mostrándolo en el navegador.
Intenta hacer algunos cambios en tu aplicación React. Cada vez que guarde los cambios, su aplicación se volverá a compilar y la ventana del navegador se actualizará automáticamente para reflejar la nueva versión de la aplicación..
Cuando desee compilar su proyecto para su distribución, simplemente ejecute el siguiente comando.
npm ejecutar construir
A lo largo de esta serie de tutoriales, hemos examinado varias formas en que puede acercarse a la configuración de las aplicaciones React, cada una de las cuales requiere progresivamente más tareas de configuración por adelantado. Pero el beneficio a largo plazo es que usted tiene mucho más control y flexibilidad sobre cómo se configura el proyecto exactamente.
Una vez que haya dominado la configuración de React, creo que encontrará el desarrollo de aplicaciones muy divertido. Me encantaría escuchar tus comentarios. Déjame saber qué planeas construir a continuación con React!
