Como crear un app con React

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.

1. Instalar node => NodeJs
   Al instalar node este nos dará la herramienta npm, (Administrador de Paquetes para Node por sus siglas en inglés) el cual nos permite instalar librerias y módulos desarrollados por otros programadores.
    
2. Abrir la terminal esto si usas mac (la consola de comandos para windows)
    
3. 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.
    
4. 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 llamada yarn, muchos de sus ejemplos la utilizan, por lo que es recomendable instalarla npm install -g yarn.
    
5. Y por último, create-react-app myapp (myapp puede ser cambiado por cualquier otro nombre que quieras, como mi-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:

$ node -v
v8.9.3
$ npm install -g create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@1.5.2
added 114 packages in 21.547s
$ npm install -g yarn
/usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js
/usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.5.0
added 1 package in 2.609s
$ create-react-app my-super-app

Creating a new React app in /Users/cristianaraya/Sites/apps/my-super-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

yarn add v1.5.0
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 732 new dependencies.
info Direct dependencies
├─ react-dom@16.2.0
├─ react-scripts@1.1.1
└─ react@16.2.0
...
├─ yallist@2.1.2
└─ yargs-parser@5.0.0
✨  Done in 241.45s.

Success! Created my-super-app at /Users/cristianaraya/Sites/apps/my-super-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-super-app
  yarn start

Happy hacking!

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.

$ cd my-super-app/
$ ls
README.md	
node_modules	
package.json	
public	
src	
yarn.lock

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.