Cristian Fernando Hace unas semanas publiqué un artículo titulado: Crea tu primer componente con Vue.js (para dummies) el cual tuvo buena recepción por parte de la comunidad, estos días de cuarentena debido a la emergencia sanitaria mundial por el covid-19 he decidido ser autodidacta en React.js, por ello iré compartiendo diferentes artículos relacionados con esta tecnología.
React.js es una librería creada por el equipo de desarrollo de Facebook para la creación de interfaces gráficas de usuario. En los últimos años ha adquirido gran popularidad en las comunidades de desarrollo web, además de tener una fuerte salida laboral en el mercado front-end de varios países.
¿Qué es react-create-app?
Existen varias maneras de crear un proyecto con React.js, una de ellas es instalando las herramientas necesarias (Babel, WebPack, etc.) de manera manual, para ello se necesita tener ciertos conocimientos para poder configurar dichas herramientas de la manera adecuada; esto puede ser algo desmotivante e intimidante para alguien que recién comienza a familiarizarse con esta tecnología.
create-react-app es una forma más sencilla de poder crear proyectos pre-configurados y listos para usarse, omitiendo de esta manera la configuración inicial permitiéndonos trabajar de inmediato en nuestro proyecto.
¿Cómo crear un proyecto usando create-react-app?
Para poder crear un nuevo proyecto de React.js usando create-react-app necesitamos tener instalado en nuestro ordenador tanto node.js como npm.
Existen varios tutoriales en la red sobre como instalar estas tecnologías.
Una vez que cuenten con node y npm bastará con seguir los siguientes pasos:
En una terminal (y en el directorio de su preferencia) ejecutar:
npm install -g create-react-app. Este comando instalará de manera global el paquetecreate-react-app.Para verificar que el paquete ha sido instalado con éxito, ejecutar en la consola:
create-react-appy esperar un mensaje de instalación satisfactoria.
- Ya para finalizar, podemos crear un nuevo proyecto con la siguiente sintaxis de comando:
create-react-app nombre-del-proyecto
Por ejemplo, si quisiera crear un nuevo proyecto llamado Tienda_Online tendría que escribir el siguiente comando: create-react-app Tienda_Online. ¡Y listo! eso es todo.
Tener en cuenta que la creación de un nuevo proyecto usando este método puede demorar varios minutos, es normal y variará dependiendo el ancho de banda.
Una vez finalizada la creación del proyecto se puede ejecutar npm start que inicializará un servidor de desarrollo (por lo general en el puerto 3000)
Conclusiones
Para evitar configuraciones complejas al momento de iniciar con React.js es recomendable crear proyectos usando
react-create-app.create-react-appes extremadamente sencillo de instalar y de usar.
