¡Hey Coders! Bienvenidos al curso práctico de React. En este curso aprenderemos a usar una de las bibliotecas de Javascript más ampliamente utilizadas para la creacion de aplicaciones web.

Aplicaciones como Netflix, Instagram, Discord, o Facebook por ejemplo. De hecho estas Aplicaciones estan creadas con React.

React es solo una biblioteca que nos ayuda a crear interfaces pero gracias a esto concepto tan simple se puede usar para crear mucho más que web, como aplicaciones moviles usando React Native o aplicaciones de escritorio usando React Desktop o incluso en el backend. Pero todo esto solo entenderas si tienes buenas bases en React Primero.

Así que en este curso te eneseñare ¿Qué es React?, como instalarlo, como configurarlo, como usar sus multiples bibliotecas y funcionalidades para que al terminarlo empieces a crear aplicaciones usando esta biblioteca.

Requerimientos del Curso

Antes de explicarte que es React, primero te voy a explicar todo lo que necesitas saber previamente para que puedas entender este curso:

• HTML, CSS, Javascript. Estas 3 son las bases de la web, asi que voy tomar en cuenta que ya conoces estas tecnologias, y sabes como escribir codigo usandolas.
• Javascript. De hecho Javacript es el requerimiento principal de este curso, ya que a pesar que React esta basado en Javacript, no te evita que uses el lenguaje, todo lo contrario vas a necesitar tener buenos fundamentos en Javascript para poder dominar React. Lo que necesitas saber principalmente de Javacript es:
  • Condicionales
  • Bucles
  • Funciones
  • Clases
  • Objetos
  • Metodos
  • Eventos de Javascript

Asi que si conoces muy poco de Javascript, te recomiendo estudiar a la par o ir primero a estudiar Javascript y luego continuar con React. Javascript es la tecnología nucleo de React.

¿Qué es React?

React es una biblioteca de Javascript que nos permite crear interfaces de Usuarios

Si te preguntas que ¿Que son las interfaces de Usuarios?. Basicamente esto son todos los elementos que vemos cuando navegamos en la web, como botones, navegaciones, enlaces, tarjetas, imagenes, etc. Todos estos elementos son comunes desde sitios pequeños hasta sitios grandes como redes sociales, blogs, y aplicaciones en general:

¿Porque usar React?

• Es una de las bibliotecas más populares de Javascritpt (Most Popular frontend frameworks - stateofjs). Esto es algo bueno porque cuando desarrolles no solo vas a encontrar muchas información y comunidades, sino que encontrarás mucho código usando esta bibliteca, lo que te permitira añadir funcionalidad rapidamente a tu proyecto. Al dia de hoy muchas empresas tienen bibliotecas creadas con React, que son Open Source, asi que podras usar los mismos componentes que usans estas empresas grandes.
• Es una biblioteca optimizada para crear Interfaces grandes, gracias a su Virtual DOM, el cual permite analizar solo las partes que han cambiado y solo actualiza esas partes
• componentes. React nos permite dividir una Interfaz grande en pequeñas partes llamadas componentes, esto es muy util porque podemos mejorar solo una parte de la interfaz y esta se puede reutilizar en todos lados, hasta puedes empaquetarla y compartirla con otros desarrolladores y viceversa, puedes encontrar muchos de estos componentes listos para reutilizar.
• Tambien puede funcionar desde el Servidor: SSR

Herramientas Relacionadas

React al tan solo ser una bibliteca de Interfaces hay otros frameworks y bibliotecas que se han desarrollado encima de React para crear herramientas más completas o que lo complementan, estas herramientas son:

• Nextjs
• Remix
• Gastby
• React Native, Expo
• Redux
• GraphQL
• Material UI, Ionic
• MERN Stack. Cuando hablamos de Stacks estamos hablando de un conjunto de tecnologias. En este caso MERN es un abreviado de Mongodb, Express, React, Node. Lo que significa que puedes crear una aplicación completa usando solo Javascript. En el pasado teniamos que aprender Javascript en el frontend y un lenguaje de Backend, bueno; actualmente es posible crear una aplicacion completa usando Javascript tanto en el backend como en el frontend.

Instalación de React

Para crear un proyecto de React tenemos 3 enfoques principalmente.

• Usar una CDN
• Instalar los modulos de React desde cero
• Usar un generador de proyectos

En nuestro caso usaremos el enfoque más común que es usar un generador de proyecto como lo es create-react-app.

Actualmente tambien hay otro generador de proyectos alternativo a create-react-app llamado vite, que si bien es más rapido y tiene muchas ventajas, con el objetivo de no hacer más confuso el tutorial simplemente lo dejare de lado. Pero si quieres saber más de vite usando react puedes ver este video: https://youtu.be/UX4gvort2TU

Para poder usar este generador de proyectos, demos instalar Nodejs, puedes descargarlo desde su sitio oficial https://nodejs.org/en/

Una vez instalado puedes ejecutar el comando, para crear tu primer proyecto. En mi caso primero me movere usando la consola al escritorio y luego creare un proyecto que se llame miprimerapp

cd Desktop
npx create-react-app miprimerapp

este proceso tomará unos minutos, una vez termine podras ejecutar:

cd miprimerapp
npm start

si visitas el http://localhost:3000, podrás ver como obtienes una pagina con un logo de React. Listo ya tienes tu primer proyecto creado.

Instalacion de Visual Studio Code

Ahora editemos nuestro proyecto de react, para eso vamos a necesitar de un editor de código, en mi caso voy a usar Visual Studio Code, puedes descargarlo de aqui: https://code.visualstudio.com/

Una vez instalado vamos a abrir una terminal, de esta forma no tendremos que usar una terminal de fuera de vscode.

Estructura del Proyecto

Scripts de package.json

npm start

npm run build

Limpiando aplicacion

Para empezar con nustro ejemplo vamos a eliminar nuestra carpeta de React

Tu Primer compoennte

un componente en React es una funcion

puedes añadir CSS

y un compoennte puede estar conformado por HTML, CSS y Javascript.

Podemos reutilizar nuestro componentes cuantas veces queramos.

Los componentes pueden recibir datos personalizados a traves de lo que llaman props.

Props

Estado

JSX

Una de las razones principales de usar JSX, es que nos evita estar escribiendo sintaxis de React usando código puro de Javascript, que es muy dificil de entender a medida que crece el código.

• https://babeljs.io/repl

Arbol de componentes

Este es un diseño de aplicacion:

Este es un ejemplo de arbol de componentes en React:

Puedes ver el tutorial aqui: