React se ha convertido rápidamente en un marco popular para crear vistas tanto del lado del cliente como del servidor. Hubo una barrera de entrada más alta con herramientas, junto con cierta frustración con la fatiga de JavaScript de la comunidad. La aplicación crear-reaccionar fue creada para tratar esas frustraciones..
Primero querrá asegurarse de que tiene Node instalado en su sistema. Debe tener al menos la versión 4 de Node instalada, pero recomiendan tener la versión 6 para descargas más rápidas y un mejor uso del disco. Puede usar nvm para cambiar fácilmente entre las versiones de Node también.
Después de instalar Node, querrá abrir su herramienta de línea de comandos favorita e instalar la aplicación create-react-global para que pueda ejecutarla en cualquier parte de su sistema..
npm install -g create-react-app
Primero querrá abrir la línea de comandos y navegar o crear un directorio donde realizará su desarrollo. A continuación crearemos la aplicación ejecutando. crear-reaccionar-aplicación tuts-plus-reaccion-app
. Esto ejecutará la herramienta cli para crear nuestra aplicación tuts-plus-react-app.
Una vez que se complete la herramienta CLI, accederá a una pantalla de resumen que le permitirá saber dónde se creó la aplicación y le mostrará una lista de comandos que puede usar.
A continuación, querrá navegar a nuestra nueva aplicación ejecutando cd tuts-plus-react-app
.
Puede ejecutar la aplicación localmente ejecutando npm start
. Una vez que se inicie la aplicación, se lo dirigirá automáticamente a http: // localhost: 3000 / en su navegador y verá su nueva aplicación React..
La aplicación utiliza webpack para ejecutar un servidor de desarrollo local. Hay una función de vigilancia, por lo que cuando edites tu código React y guardes, verás los cambios aparecerán automáticamente en el navegador..
Si comete algún error con su código, verá que esos errores o advertencias aparecen en el navegador.
ESLint se incluye para garantizar que su código siga los estilos de código comunes. Esto le ayudará a asegurarse de que su código sea consistente, lo cual es especialmente útil cuando hay múltiples contribuyentes a un proyecto. Yo sugeriría usarlo si usted es nuevo en React también para aprender buenos estilos de codificación React y JavaScript.
Si está familiarizado con la escritura de pruebas para su código, se incluye Jest para ejecutar pruebas. Jest es un marco de prueba creado y mantenido por Facebook, los creadores de React. Para ejecutar tus pruebas, ejecuta prueba de npm
en su herramienta de línea de comandos. Esto ejecutará las pruebas y luego iniciará un observador para ejecutar sus pruebas cuando cambie su código de producción. Hay un archivo de prueba existente que puede agregar en src / App.test.js
.
Cuando haya terminado de realizar todas las ediciones, es hora de implementar su aplicación. Todo lo que necesitas hacer es ejecutar npm ejecutar construir
en su directorio de aplicaciones. Esto utilizará a Babel para transpilar su código React a un código que el navegador entienda. También minimizará su código para garantizar que tenga el mejor rendimiento en el navegador.
Si decide seguir utilizando la aplicación crear-reaccionar, le sugiero que dedique tiempo a leer la guía del usuario. Tiene mucha información útil sobre otros temas relacionados con la vista, como agregar hojas de estilo CSS, importar otros componentes, importar imágenes y fuentes, y otros. También tiene información sobre prácticas de desarrollo web como el uso de HTTPS, la conexión a un back-end de Node, la creación de aplicaciones web progresivas y más..
También hay documentación extensa sobre cómo probar y desplegar su aplicación..
Espero que ahora puedas ver lo fácil que es crear una aplicación React utilizando el proyecto crear-reaccionar. Espero que esto ayude a bajar la barrera de entrada y que comience con React. Sé que lo vas a disfrutar!