Introducción a React
Isaac Cantún
Posted on April 20, 2020
Tabla de contenido
Introducción
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, Angular, ReactJs) y de entre ellos me he quedado con uno y este es React.Js.
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 vs Vue.js y Angular que de hecho fue la que más llamó mi atención fue la expresividad de React, 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
Puedes usar React de varias maneras, desde instalar react-create-app con npm 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:
<!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:
<!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
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:
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:
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:
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, ¿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í:
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), jsx 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:
<!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/javascripta 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:
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.
Posted on April 20, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
October 22, 2024
