Introducción a React
Tags: react, javascript, frontend
Published: 2020-04-20 21:32:51

---
series: react-fundamentals
---

# Tabla de contenido
1. [Introducción](#introduccion)
2. [Formas de usar React](#formas)
3. [Jsx, ReactDOM y otras cosas raras](#jsx)

## Introducción<a name="introduccion">

Actualmente existe muchas librerías y frameworks en el mercado, de muchos sabores y colores, y probablemente tú seas fanático de uno u otro, sin embargo hoy quiero darte una pequeña introducción a una librería de JavaScript que en lo personal me ha gustado mucho, he probado los 3 más reconocidos del mercado ([Vue.js](https://vuejs.org), [Angular](https://angular.io), [ReactJs](https://reactjs.org)) y de entre ellos me he quedado con uno y este es [React.Js](https://www.reactjs.org).

Bien, pero ¿por qué React? React es una librería para construir interfaces de usuario y consigo trae muchos beneficios dentro de las muchas ventajas que encontré de trabajar con [React](https://www.reactjs.org) vs [Vue.js](https://www.vuejs.org) y [Angular](https://www.angular.io) que de hecho fue la que más llamó mi atención fue la expresividad de [React](https://www.reactjs.org), la forma en la que se declaran los componentes (obviamente es porque jsx es una belleza), también aprovecha al máximo las nuevas características de la especificación ECMAScript, últimamente hubieron cambios importantes dentro de la librería motivando a los programadores a dejar de usar componentes de clase y en su lugar utilizar componentes funcionales, los cuales apoyan la programación funcional con React, los hooks son baterías incluídas que nos facilitan la tarea de trabajar con componentes funcionales, por supuesto la enorme comunidad que hay detrás de React creando librerías y herramientas que nos facilitan muchas tareas complejas, por último los ingenieros de Facebook son los creadores y quienes mantienen la librería y por supuesto que React también es usado dentro del core de la red social quizá esto nos garantiza que no va a ser un proyecto abandonado, por el contrario en cada actualización habrán cambios y mejoras en beneficio de todos, esto y más hace de React una excelente opción, pero bueno para eso es esta introducción y vamos allá.

## Formas de usar React <a name="formas"></a>

Puedes usar React de varias maneras, desde instalar [react-create-app](https://create-react-app.dev/docs/getting-started/) con [npm](https://www.npmjs.com) hasta usarlo con una simple etiqueta script (dos realmente) y esta última opción es la que ocuparemos, al ser una introducción no necesitamos más.

Lo primero que haremos será crear la estructura básica de un HTML con el nombre `index.html` en el cual vamos a agregar los scripts que corresponden a react y a react-dom, de igual manera crearemos un elemento `div` con un id llamado `root`:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React - Basic Example</title>
</head>
<body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</body>
</html>
```

La primer etiqueta corresponde al core de la librería, este script apenas tiene un peso de 100kb lo que lo convierte en una librería bastante ligera, el segundo script corresponde a react-dom el cual nos proporciona métodos del dom que es con los que React hace su magia. OJO!! Estos scripts son únicamente para DESARROLLO, no es correcto usarlos en producción, en posteriores tutoriales aprenderemos la forma correcta de trabajar un proyecto de react que puedas llevar a producción.

Dentro de la misma carpeta donde creamos el archivo `index.html` vamos a crear un nuevo archivo con el nombre `app.js` este es el que va a contener todo nuestro codigo `jsx`, ahora agregamos el script dentro de nuestro html debajo de los dos scripts de React:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React - Basic Example</title>
</head>
<body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="app.js" type="text/javascript"></script>
</body>
</html>
```

## Jsx, ReactDOM y otras cosas raras <a name="jsx"></a>

Estamos listos para empezar a explorar todas las funcionalidades que React nos proporciona, primero para empezar a trabajar dentro de nuestro archivo `app.js` vamos a proceder a declarar una constante:

```javascript
const greeting = 'Hola React!!'
```

Obviamente, esto aún no renderiza nada en el navegador, ya que aún no estamos haciendo uso de react, pero vamos allá, **no te desesperes**, ¿recuerdas el script de `react-dom`? bien ahora vamos a usarlo para poder empezar a jugar con sus métodos y comprender como es que react intereactúa con nuestro navegador, primero tenemos que agregar el método `render` que nos proporciona la clase `ReactDOM` y lo hacemos de la siguiente manera:

```javascript

const greeting = 'Hola React!!'

ReactDOM.render()
```

Probablemente y si estas siguiendo este ejemplo conmigo veas un error en consola que diga algo así `Uncaught Error: Target container is not a DOM element.` tranquilo/a no hay que preocuparse, este error se debe a que el método `render` de `ReactDOM` recibe dos parámetros, el primero es un elemento que puede ser de cualquier tipo (string, number, html o mejor dicho jsx, etc...) y el segundo es un contenedor que será quien contenga todo el rederizado de nuestra aplicación, recuerdas cuando que creamos la estructura de nuestro `html` creamos un elemento `<div id="root"></div>` aquí es el momento donde lo vamos a ocupar.

Como primer parámetro pasaremos nuestra constante `greeting`, y como segundo parámetro pasaremos nuestro elemento `root` de la siguiente manera:

```javascript

const greeting = 'Hola React!!'

ReactDOM.render(
    greeting,
    document.getElementById('root')
)
```

Para poder probar en tu navegador nuestro código yo estoy haciendo uso de una extensión de VS Code que se llama live server que nos levanta un servidor para probar aplicaciones como la de nuestro ejemplo, si vamos al navegador podemos ver algo como esto:

![Wow, habemus render](https://i.ibb.co/QPjJ4Wx/navegador-renderizado.png)

Wow, ¿sabes que acaba de ocurrir? bien, te explico, el método `render` tomo nuestra constante `greeting` y la puso dentro de nuestro contenedor, si así es, nuestro elemento `#root`, si inspeccionamos el `html` podemos comprobarlo, se vería algo así:

![Google chrome console](https://i.ibb.co/KGYcCzC/inspeccion.png)

Ok, pero..., React no sería tan divetido si solo hiciera eso, bien hagamos algo mejor, que tal si empezamos con `jsx`, bueno, pero ¿qué es `jsx`? (según la documentación oficial de [React](https://reactjs.og)), [`jsx`](https://es.reactjs.org/docs/introducing-jsx.html) es:

> #### JSX
>
> - Es una extensión de la sintaxis de JavaScript.
> - Se usa para describir cómo debería ser la interfaz de usuario. 
> - JSX puede recordarte a un lenguaje de plantillas (HTML), pero viene con todo el poder de JavaScript.
> - JSX produce “elementos” de React.

Pero te ayudaré a comprenderlo un poco mejor, `jsx` es una "manera" de escribir `html` dentro de nuestro código `javascript` sin la necesidad de escribirlo entre comillas, o `strings literals` o concatenarlo etc... (tu me entiendes eso que hace engorroso a `html` dentro de `javascript`), pero, ¿cómo lo hacemos? ¡es muy fácil! presta mucha atención lo primero que debemos hacer son dos modificaciones a nuestro archivo `index.html`, **recuerda que esto es solo una introducción muy básica a React y lo que te muestro aquí nunca debe ser usado en producción**, aclarado una vez mas continuemos: 

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React - Basic Example</title>
</head>
<body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="app.js" type="text/babel"></script>
</body>
</html>
```

Si pudiste observar que sucedió te darás cuenta que agregamos una etiqueta `script` nueva la cual contiene `babel` y nuestra etiqueta que contiene el enlace a nuestro archivo `app.js` le cambiamos el atributo `type` de `text/javascript`a `text/babel` pero ¿porqué hicimos esto?, mira, si bien los navegadores actuales ya soportan la mayoría de las nuevas características de `javascript`, ellos no entienden `jsx` porque esta sintaxis es propia de React, entonces `babel` nos ayuda a convertir nuestro código `jsx` a algo que los navegadores puedan entender, una vez comprendido este asunto, continuemos porque... ¡ya podemos usar `jsx` en nuestro pequeño ejemplo!, vamos hacer lo siguiente:

```react

const greeting = 'Hola React!!'

const element = <h1>{greeting}</h1>

ReactDOM.render(
    element,
    document.getElementById('root')
)
```

Si vamos al navegador podemos ver que nuestra constante `greeting` se mira mas grande y el texto se ve como en __negritas__ y esto es porque si inspeccionamos nuestro `html` de nuevo podemos observar que dentro de nuestro contenedor (así es de nuevo nuestro `#root`) se encuentra una etiqueta `h1` que contiene el texto de nuestro saludo, aquí podemos observar dos de las características mas poderosas de React, la primera es la forma en la que podemos incluir etiquetas `html` dentro de nuestro código `javascript` esto mi querid@ amig@ es `jsx` y la segunda es la forma en la que podemos pasar código dinámico a nuestras etiquetas de `jsx` por medio de las llaves, brackets, corchetes o como te guste llamarlos `{}`, lo importante es que conozcas que estas características son las que le darán poder y dinamismo a tu código y si tienes la oportunidad de trabajar con esta librería en tu empleo o empresa, este será el pan de cada día.

Antes de terminar este post que por supuesto fue muy básico pero que nos ayudó a comprender como funciona React, quisiera hacer unas pequeñas aclaraciones, `jsx` NO es `html`, es solo una extensión del código `javascript` que usa React y la segunda aclaración es que este ejemplo se pudo haber hecho de muchas maneras, sin embargo decidí que fuera así porque de esta forma es como realmente se trabaja a nivel profesional (hablando de la sintaxis ocupada), si quizá conoces un poco de React puede que conozcas `React.createElement` pero no tiene caso extender el tutorial solo para comparar ambas formas.

Espero que este artículo te haya abierto el panorama con respecto al funcionamiento de esta librería que por cierto tiene un amplo abaníco laboral, en próximos tutoriales haremos cosas mucho mas interesantes para que puedas conocer los usos reales que le podemos dar a React, muchas gracias por leer este artículo y nos vemos en el próximo.