Introducción a React | Ironhack

Marzo 8, 2018

React wallpaper

Este medium forma parte del primer maratón front-end de Ironhack, así que seguramente llegaste aquí por la presentación, caso contrario dejo a tu disposición el link a ella para que tengas un poco más de contexto.

Primera aplicación con React

Objetivos:

1. Aprender las bases de un framework front-end
2. Configurar un proyecto completo para React.
3. Conocer como funcionan los componentes en React.
4. Desarrollar una aplicación basado en componentes.
5. Aprender que es una SPA (Single Page Application) y como se desarrolla en React.

Requisitos

• instalar nodejs.
• clonar este repo en una carpeta ~/ironhack/.
• Asegurate de tener instalado chrome.

Conocimientos Previos

• NPM.
• Javascript (ES6).
• HTML y el DOM(Document Object Model).
• Uso de la terminal.

¡Empecemos con el código!

En esta época donde los requerimientos para desarrollar aplicaciones están por las nubes, nos vemos casi obligados a escoger alguna herramienta que nos aporte bastantes de las cosas que nos solucionan un muy buen porcentaje de dichos requisitos (o todos), tanto para el cliente como para el servidor, es ahí donde hacen presencia los frameworks y en nuestro caso, Front-end Frameworks; Aquellos sets de herramientas que nos facilitan el desarrollo en el navegador de nuestros usuarios, por ejemplo: los elementos en el Dom, vistas, entre otros. Pero no solo estilizar o hacer “bonita” una página. A día de hoy nos toca preocuparnos por cosas aun más avanzadas: rutas, validaciones, manejar estados, componentes, comunicación entre componentes, servicios, formularios… y algo muy importante de lo que se encargan todos los frameworks AJAX quien nos da el poder de intercambiar información sin refrescar la página y sin hacer peticiones de más a los servidores.

Primeros Componentes

Para nuestro primer contacto con React, utilizaremos codesandbox, un editor en linea para probar rápido y fácil.

Hasta el momento tenemos una aplicación funcional de React la cual tiene varios elementos:

• Importación de React desde la librería
• importación de render de la librería react-dom
• importación de un nuevo componente llamado Hello
• estilos dentro del componente
• Componente App donde está toda la mágia
• Método render

Componente nuevo

El componente cuenta con muchas de las cosas más importantes del desarrollo en react básico:

1. Componente con clase
2. Jsx
3. Props
4. State
5. Modificar el estado
6. Re utilización de componente

Listo, ahora conoces los elementos básicos que hacen a React lo que es hoy en día y con lo cual ya estás listo para ir un poco más allá y desarrollar una app sencilla.

Iniciando un proyecto en react

Conociendo ya los conceptos básicos comencemos con un proyecto en forma, para esto haremos uso del repositorio que clonaste en un principio, si no lo hiciste aquí está para que puedas seguir con el ejercicio. Este es un proyecto creado con create-react-app el cual nos da un proyecto entero que nos permite dedicarnos 100% a nuestra aplicación.