Una de las mejores, sino la mejor manera de crear una aplicación en React es con el paquete create-react-app. Dicho paquete nos permite crear la estructura base de un proyecto en React con un simple comando.
A la fecha que escribo este artículo, este paquete ha sido actualizado a su versión 2.0 lo cual incluye novedades bastante interesantes que mencionaremos en este artículo.
Para obtener la última versión del paquete, basta con ejecutar el siguiente comando en tu terminal:
1npm install -g create-react-app 2
o
1yarn global add create-react-app 2
Creando mi app
Luego de tener instalado y/o actualizado tu paquete creat-react-app podrás iniciar tu proyecto con el comando:
1creat-react-app ed-app 2
Siendo ed-app el nombre de la carpeta que se generará. No se permiten mayúsculas ni espacios para este nombre.
Una vez el proceso haya sido completado debes ingresar a tu carpeta y ejecutar el script start para levantar el proyecto en tu navegador.
1cd ed-app 2yarn start 3
Esta será la primera pantalla que visualizarás en tu navegador:
Cómo puedes ver, ya tienes un proyecto React listo para que puedas trabajar en él. Cada vez que edites el código el navegador actualizará el proyecto sin necesidad que tú tengas que actualizarlo manualmente para ver los cambios.
Novedades de la v2.0 de create-react-app
- Se utiliza nuevas versiones de Babel (7), webpack (4) y Jest (23)
- Más opción para los estilos. Puedes utilizar SASS y CSS Modules out-of-the-box.
- La versión 6 de Node ya no es soportada.
- Se mueve el soporte para IE 9 hasta IE11 a un paquete separado.
- Puedes importar fácilmente un SVG como un componente de React y utilizarlo en JSX.
- Puedes utilizar paquetes escritos con las últimas versiones de Node sin romper el build.
- ... y más.
Puedes consultar todas las novedades en el Blog Post oficial o en el Changelog del proyecto en GitHub.
Espero que este post haya sido de ayuda. Estaré compartiendo nuevamente muy pronto por aquí. Disfruten probando este y muchos otros proyectos para que sea mucho más fácil para ustedes decidir cuál usar cuando estén delante de un proyecto real.
Un abrazo de su amigo Beto Quiroga.