🧪Hola Mundo en ReactJS

👩‍💻¿Por qué React?

• Es declarativo: Ayuda a crear interfaces de usuario interactivas de forma sencilla, ya que react se encarga de actualizar y renderizar los componentes cuando los datos cambian.

• Basado en componentes: Podrás crear componentes encapsulados que manejen su propio estado, ya que la lógica de los componentes esta escrita en JS y no en plantillas, puedes pasar datos de forma sencilla a través de tu aplicación y mantener el estado fuera del DOM.

📝Características de React

Algunas características principales de React son:

• JSX: Extensión de la sintaxis de JS que amplía las características de ES6(ECMAScript 2015). Esto nos permite combinar la lógica y el marcado de JS en un componente.

• DOM virtual: Es una copia del objeto DOM que primero actualiza y vuelve a renderizar nuestras paginas cuando se realizan cambios; para después comparar el estado actual con el DOM original para mantenerlo sincronizado con los cambios, como resultado tenemos una renderización de las páginas más rápida.

• Componentes: Las aplicaciones de react se conforman por diferentes componentes reutilizables que tienen su propia lógica e interfaz de usuario.

👀¿Qué es el estado en react?

También conocido como state, es el segundo tipo de dato que maneja la librería de JS, se conforma por los datos internos que un componente puede manejar, a medida que los datos son modificados, ya sea por una interacción de usuario o por una recepción de datos del API, el estado será modificado.

😎 ¿Qué es un hook?

Los hooks son funciones que te permiten “enganchar” el estado de react y el ciclo de vida desde componentes de función, no funcionan dentro de las clases – te permiten usar react sin clases. Veamos algunos Hooks integrados en React.

Recordemos que tenemos varios tipos de hooks, 👀veamos cuales son:

State Hooks:

• useState: es un Hook que permite añadir el estado de React a un componente de función.
• useReducer: nos permite manipular el state de nuestros componentes funcionales, esto se logra a través de:
  • Una función reducer
  • Y una función de retorno llamada dispatch con la cual podemos combinar o emparejar el state.

Context Hooks

• useContext: proporcionan un camino para compartir por fuera del árbol de componentes el estado.

Ref Hooks

• useRef: crea y manipula referencias a elementos del DOM en una aplicación de React.
• useImperativeHandle: Nos permite definir qué propiedades y métodos queremos que sean accesibles desde el componente padre.

Effect Hooks

• useEffect: al usar este hook, le estamos indicando a React que el componente tiene que hacer algo después de renderizarse.

Performance Hooks

• useMemo: te permite guardar en caché el resultado de un cálculo entre renderizados.
• useCallback: te permite almacenar la definición de una función entre renderizados subsecuentes.

Veamos el como comenzar a crear un App en React utilizando create-react-app:

1. Tenemos que instalar de manera global create-react-app lo cual conseguiremos npm install -g create-react-app

Una vez instalado, Podemos crear nuestra aplicación poniendo el siguiente comandito

_create-react-app project-name_

Algo que siempre deberíamos de tener en cuenta 🧐, que se nos crea un archivo importante llamado package.json, en el cual podremos encontrar dependencias y scripts que utilizamos en nuestro proyecto, el cual se vera de la siguiente forma.

🤔Nota mental 🤔: Recuerda que, en ese archivo podrás ver los scripts con los cuales podrás correr tu proyecto, por default, utilizamos npm start.

Ahora si tendremos nuestro Hola Mundo en React, podemos realizar un sinfín de cosas, pero eso es tema para otro artículo. 😅