Frontend con React.js

React es una librería Javascript de código abierto enfocada en el desarrollo de interfaces de usuario interactivas, está basada en componentes que encapsulan su propio estado y ciclo de vida, convirtiéndolas en grandes interfaces para el usuario.

Adentrémonos en el mundo de React y construyamos una aplicación.

Creando nuestro primer proyecto

La mejor solución para iniciar un proyecto en React.js es utilizar create-react-app. Se crea una aplicación que se ejecuta por consola que nos permite desarrollar de manera fácil y sin ninguna configuración un proyecto en React listo para trabajar de forma inmediata, liberándonos de configuraciones complejas y, lo mejor de todo, soportada oficialmente por la comunidad de React.

Para poder hacer uso de esta implementación es necesario tener instalado Node.js, utilizar el manejador de paquetes npm y desde nuestra consola o terminal ejecutar el siguiente comando:

npx create-react-app my-app

Ahora, debemos ingresar al directorio de nuestro proyecto para iniciar nuestra primera aplicación en React.

Una vez ejecutado el comando npm start, el cual inicia el proyecto en modo de desarrollo, 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.

¿Qué contiene nuestro proyecto?

• node_modules: todos los paquetes, librerías y dependencias que utiliza nuestra aplicación.

• public/: aquí se encuentra el template de la aplicación (index.html, favicon.ico y manifest.json).

• src/: en este directorio se encuentra todos los recursos que le darán vida a nuestra aplicación. A medida que avancemos con estos recursos, aprenderemos a organizarlos de mejor forma.

• .gitignore: archivo que contiene todos los directorios y archivos que deben de ser ignorados.

• package.json: paquete donde se encuentra la configuración de nuestro proyecto, los scripts así como las dependencias que se necesitan para que se ejecute de forma correcta.

• README.md: en este documento se incluye toda la documentación de create-react-app.

¿Qué incluye create-react-app?

create-react-app incluye una serie de librerías que facilitan la implementación, construcción y puesta en producción de un proyecto en React.

Estas son algunas de las tecnologías incluidas:

• React – Webpack: empaquetador de archivos.

• Babel: nos permite transpilar nuestro código a JavaScript que pueda funcionar en cualquier navegador.

• PostCSS: para procesamiento de CSS.

• Jest: para realizar pruebas.

• ESLint: nos permite mejorar la calidad de nuestro código.

También una de las ventajas que tiene create-react-app es que podemos hacer cambios y verlos en tiempo real en nuestro navegador, ya que incluye un servidor de desarrollo local.

¡Hola Mundo en React!

Dentro de src/ encontraremos una serie de archivos que ejecutan nuestra aplicación actual, vamos a crear un archivo nuevo llamado HelloWorld.jsx.

Ahora, abrimos el archivo index.js y vamos a actualizarlo añadiendo el componente que acabamos de crear.

Guardamos estos cambios y ejecutamos nuestro servidor de desarrollo local para visualizar los cambios.

Aprender React te permite crear fabulosas aplicaciones web, aplicaciones mobiles y aplicaciones de escritorio para GNU/Linux, Windows, OS X y sorprendentes recursos en 360. Además de sus grandes ventajas como la flexibilidad, rapidez de respuesta y organización del código.

¡Prueba la suscripción de Platzi!

¡No te pierdas nuestros lanzamientos!