Sí has estado leyendo sobre noticias relacionadas a la web/internet/programación recientemente, entonces has escuchado hablar sobre React.js, el punto es, como crear un app con React?
La respuesta es sumamente sencilla, pero aquí te explicamos detalladamente todo el stack necesario.
- Instalar
node
=> NodeJs
Al instalar node este nos dará la herramientanpm
, (Administrador de Paquetes para Node por sus siglas en inglés) el cual nos permite instalar librerias y módulos desarrollados por otros programadores.
- Abrir la terminal esto si usas mac (la consola de comandos para windows)
- Escribir en la terminal
npm install -g create-react-app
este comando va instalar una herramienta que creará la versión inicial de cualquier app de React, con su estructura predefinida y todas las librerias extenas requeridas.
- Aunque
npm
es la herramienta por defecto para administrar dependencias, el equipo de Facebook (creadores de React) ha desarrollado una alternativa mucho más eficiente llamadayarn
, muchos de sus ejemplos la utilizan, por lo que es recomendable instalarlanpm install -g yarn
.
- Y por último,
create-react-app myapp
(myapp puede ser cambiado por cualquier otro nombre que quieras, comomi-super-app
o algo parecido). Este comando creará un folder donde instalará todas las dependencias necesarias para el proyecto. Además te dará ciertas indicaciones para poder ejecutarla.
Lo siguiente es lo que podemos ver en nuestra terminal al crear un app con react:
Estas instrucciones al final son las más importantes. Hay 4 comandos que se pueden utilizar: start, build, test, eject
.
En nuestro editor favorito abrimos la carpeta que se creó, que en este caso se llama myapp. Ahí veremos la siguiente estructura.
En la carpeta public van los archivos estáticos como imágenes, html y demás.
En src va nuestro código, y package.json es donde registramos nuestros módulos y librerias externos así como configuraciones de nuestra app.
Enseguida podemos empezar a crear nuestra app escribiendo nuestro propio código.
Abrir el proyecto en un navegador
yarn start
Para iniciar nuestra aplicación usamos el comando yarn start
este abrirá nuestro navegador favorito con nuestra aplicación recién creada y también un ambiente de desarrollo en http://localhost:3000/ y una pequeña app como plantilla.
yarn run build
Este comando realiza una optimización en nuestra app para poder usarla en un ambiente de producción. Esto significa que todo los archivos de javascript de nuestra app sean optimizados para que nuestro navegador pueda entenderlos y utilizarlos.
yarn test
Inicia un ambiente donde se pueden realizar pruebas a nuestro código y así probar la funcionalidad. Este comando nos brinda unas herramientas especiales donde podemos aplicar pruebas a cada parte de nuestro app y así comprobar que funciona correctamente.
Siguientes pasos.
¡Felicidades! 🎉 hemos cubierto lo más básico de como crear un app con react.
Además hemos explorado un poco la terminal y el uso de comandos y así darle diferentes funcionalidades a nuestras aplicaciones.
Es un buen comienzo, y el camino es largo y entretenido.
En futuros tutoriales vamos a explorar un poco mas profundo lo que podemos hacer con esta base. Desde crear nuestros componentes y saber como reutilizarlos, también agregar navegación con React Router o el manejo del estado de nuestra aplicación con Redux.
Además explorar diferentes conceptos sobre React que son de mucha importancia y son utilizados diariamente como props, state, renderProps, ES2015 classes. También explorar un poco mas sobre los comandos de build y eject y que significan exactamente.