¿Como Comenzar con React?

Este es el primero de los recursos con los cuales vamos a ir aprendiendo a trabajar con react, desde la configuración inicial hasta tener un proyecto robusto y listo para producción. Asi que sin mas rodeos vamos a iniciar este recurso con una breve introducción.

¿Que es React JS?

React es una librería de JavaScript que nos permite crear interfaces de usuario complejas para aplicaciones web o móviles. React es mantenida por Facebook e Instagram y por la comunidad de desarrolladores independientes, siendo es una tecnologia de codigo libre.

Creando nuestro primer proyecto.

La mejor solución para iniciar un proyecto en React JS es utilizar “create-react-app” una aplicación que se ejecuta por consola que nos permite crear de manera facil y sin ninguna configuracion un proyecto en React listo para trabajar de forma inmediata librandonos de configuraciones complejas y lo mejor de todo soportada oficialmente. [Documentacion]

Para poder hacer uso de esta implementación es necesario tener instalado NodeJS y utilizar el manejador de paquetes “npm” para  instalar el paquete necesario desde nuestra consola con el siguiente comando:

npm install -g create-react-app

Una vez instalado vamos a crear nuestro primer proyecto.

create-react-app my-app

Cuando termina la instalación veremos las siguientes instrucciones con las cuales podremos iniciar nuestro proyecto.

create react app

Ahora debemos de entrar en el directorio de nuestro proyecto para iniciar nuestra primera aplicación en React.

cd my-app npm start

Una vez ejecutado el comando “npm start” el cual inicia el proyecto en modo de desarrollo en el cual podemos visualizar la aplicación que incluye por defecto en nuestro navegador en la ruta: localhost:3000

Para entender la estructura de nuestra primera aplicación, es necesario abrir el proyecto con el editor de código a tu preferencia en mi caso utilizo Atom,

¿Que contiene nuestro proyecto?

node_modules : Todos los paquetes, librerías y dependencias que utiliza nuestra aplicación.
public/ : Aquí se encuentran el template de la aplicación  (index.html, favicon.ico y manifest.json).
src/ : En este directorio es donde se encuentran todos los recursos que le daran vida a nuestra aplicacion y conforme avancemos con esta serie de recursos sobre react aprenderemos a organizar de mejor forma.
.gitignore : archivo que contiene todos los directorios y archivos que deben de ser ignorados a la hora de utilizar git en este proyecto.
package.json : Paquete donde se encuentra la configuración de nuestro proyecto, los scripts así como las dependencias que necesita para que se ejecute de forma correcta.
README.md : En este documento se incluye toda la documentacion de create-react-app

¿Que incluye create-react-app?
Create react app incluye una serie de tecnologías que facilitan la implementación, construcción y puesta en producción de un proyecto en react.

Tecnologías: React – Webpack (empaquetador de archivos) – Babel (Transpilador para escribir la próxima generación de JavaScript) – PostCSS (para procesamiento de CSS) – Jest (para realizar pruebas) – ESLint (nos permite mejorar la calidad de nuestro código) entre otras tecnologías.

También una de las ventajas que tiene create-react-app es que podemos hacer cambios y verlos en tiempo real en nuestro navegador.

¡Hola Mundo en React!

Dentro de “src/” encontraremos App.js el cual incluye nuestra aplicación que visualizamos previamente en el navegador, vamos a editar el contenido para poner el típico “Hola Mundo“. (esto es una broma).

Hasta aquí vamos a dejar nuestro proyecto, te invito a que le pongas un poco de atencion al archivo README.md ya que este archivo incluye la documentación explicada a detalle de como utilizar a la perfección create-react-app.

**¿Por que recomiendo utilizar Create-react-app?
**Luego de que react ganará la batalla entre que tecnología elegir para enfocar mi aprendizaje (Competidores: Angular, Vue y React).

Una de los principales problemas que me encontré es que existen muchas formas de prepara tu proyecto, desde la estructura de nuestros directorios, que si vamos a utilizar webpack o browserify, si hay que utilizar eslint o no, como integrar babel con webpack y perdí horas y horas intentando configurar mi proyecto, cuando lo único que deseaba era hacer mi ¡Hola Mundo! en React.

Pero la espera y las horas de lectura, ejercicios, demos, recursos, videotutoriales me llevaron a conocer create-react-app y ahora soy muy feliz.

Tan Feliz que actualmente estoy desarrollando un portal administrativo para el manejo de las cuentas de usuarios en CityDrive y me he librado de la odiosa y complicada configuración inicial de un proyecto en react con tan solo utilizar “create-react-app”.

También aquí puede ver un pequeño proyecto en produccion creado con este metodo: https://dev.gndx.co/gresume-react el cual sera el proyecto final de esta serie de recursos.

En el siguiente recurso vamos a iniciar con la construction de nuestro portafolio en línea.

Show Comments

Get the latest posts delivered right to your inbox.