¿Para Quíen es este post?
Ahora que haz llegado a este post, seguro no necesito explicarte a profundidad qué es ReactJs, cuales son sus ventajas, porqué es tan cool o porqué es una buena opción por sobre Angular o incluso Vue.js.
Si estas aquí seguro sabes bien todo lo anterior, la intención de este post no es repetir esto si no, dar una introducción suficientemente amigable para que si estas comenzando con la programación web y aún no tienes todas las bases y fundamentos que hacen falta para el desarrollo web frontend, backend o fullstack pero tienes curiosidad y quieres usar ReactJs, vayas adquiriendolos y puedas experimentar sin necesitar entender que es el boilerplate de un entorno de desarrollo para React (npm, webpack, babel etc...) y puedas crear tus primeros componentes en cuestión de minutos y online.
Parte 1 - ReactDOM
Herramientas
ReactDOM es la librería que se encarga de colocar en el DOM los componentes e interpretarlos, componentes que se crean con ReactJs, estas librerías a partir de la versión 15 son dos librerías separadas pero que al mismo tiempo trabajan de forma conjunta, para poder comenzar vamos a abrir jsbin.com. e instalar ReactJS con el boton "Add Library" y encontremos ReactJs.
Una vez que tenemos React js instalado, podemos crear nuestro primer componente y colocarlo en el DOM, para ello vamos a colocar una etiqueta
con id root en la parte izquierda de nuestro editor, recordemos que tenemos varias secciones entre ellas: html, css, javascript, console y output, solo dejaremos activadas solo html, javascript y html.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="root" ></div>
</body>
</html>
Tu primer componente
En la sección de javascript debemos seleccionar el transpilador correcto, esto es seleccionar en vez de javascript "ES6/Babel" y escribiremos nuestro primer componente:
const App = () => (
<div>
BlisS
</div>
)
ReactDOM.render(<App/>, root)
Observemos que el metodo render de ReactDOM, recibe 2 argumentos, el primero es el componente de React que queremos colocar en un formato jsx (como una etiqueta html) y el segundo es donde lo queremos colocar, podemos entregar este segundo argumento con un selector document.getElementById('root') pero en las versiones más modernas de ReactDOM es suficiente con el nombre del id, incluso sin comillas.
Deberiamos ver el resultado en la sección de Output, y esto nos hace saber que nuestro código funciona.
Esto es increiblemente simple, pero nos dá una perspectiva de qué es un componente y cómo es que funciona ReactJs como simple librería.
Feliciades haz creado tu primer componente con ReactJs y lo haz renderizado en el DOM, sonrie y nos vemos en la siguiente parte ;)
Top comments (0)