🧪Hola Mundo en ReactJS
Published: 2023-06-01 23:25:26


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5q4dkc79xfxx8gmtyv8j.png)

**👩‍💻¿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:**

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

**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 
<center>
  _<u>npm install -g create-react-app</u>_
</center>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzg4zyvr3m0e9nonmfig.png)

Una vez instalado, Podemos crear nuestra aplicación poniendo el siguiente comandito
<center>
_<u>create-react-app project-name</u>_
</center>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upw16qzfhr6o4cal84fy.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsjg6wciymbja55svm6b.png)

**🤔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. 😅

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsbl0fdfhjwcuujfed08.png)