ReactDOM.render

Clase 6 de 37 • Curso de React.js 2019

Clase anteriorSiguiente clase

Resumen

React y ReactDOM trabajarán en conjunto.
- React como análogo a createElement
- ReactDOM a appendChild
ReactDOM.render() toma dos argumentos: Qué queremos renderizar y dónde lo queremos renderizar.
Siempre que escribas JSX es requisito importar React.

Eduardo Hidalgo Díaz Rugama

student•

Mis respetos al profesor por explicar la ingeniería detrás de ReactDOM. hace tiempo investigué como React funciona por detrás y es muy interesante, pero casi nadie se sienta a enseñarlo/aprenderlo. Iré a darle follow en twitter <3

Richard B. Kaufman López

teacher•

¡Gracias!

Carlos Gómez Mont

student•

Si es un crack, es muy pro!!!

Juan David Reyes

student•

He estado resumiendo lo que voy estudiando como una forma de tener un aprendizaje más activo:

Willy David Da Conceicao Lozada

student•

que buena imagen joder

Miguel Angel Escurra

student•

Muchas gracias por el aporte!

Sergio Armando Velasco Guzmán

student•

React es el análogo a create elements ReactDom es el análogo appendChild

Con esa frase algo hizo click en mi cerebro y apesar de que ya se lo basico de react no lo habia notado :O

Alex John Chamba Macas

student•

Es importante tener en cuenta que para que Create React App funcione correctamente debemos tener obligatoriamente el fichero principal de html en “public/index.html” y el punto de entrada de javascript en “scr/index.js”.

Richard B. Kaufman López

teacher•

¡Súper importante!

Cristihan Albarran

student•

ya esta por default en el index.html!

Juan Pablo Arnedo

student•

Para realizar el render en el index.js pueden usar tambien:

import { render } from 'react-dom'
....
render(__que__, __donde__)

Jorge Ossa

student•

esto es react hooks?

Cristihan Albarran

student•

no @jorgehossa

Edith Hernández Navarrete

student•

Para poder seguir al profesor debemos cambiar de rama usando git checkout $ git checkout 1.ReactDOM.render $ git branch

1.ReactDOM.render master

Mauricio Chávez Olea

student•

Usar JSX en React es posible gracias a Babel. Babel se encarga de transpilar el JSX a llamadas que se ven como "React.createElement()", por eso es necesario que importemos React.

Carlos Eduardo Diaz Polanco

student•

GUIA COMPLETA DE REACT.JS

Estoy haciendo una guia en Notion de React peudes verla 👉 aqui

Dale like para seguir actualizandola.

Luis Enrique Lemus Hernandez

student•

Insersión de un elemento con React

Primero se importan las librerías

Seguidamente, se crea una constante que contendrá el elemento, esta vez el elemento puede ir con todo y contenido, pues react soporta cualquier html dentro de una variable

const element = &lt;h1&gt; Hello Platzi &lt;/h1&gt;;

ahora se escribe el contenedor

const container = document.getElementById('app');

una vez seleccionado el div con id App, toca unirlos con la función "render" de la librería "ReactDOM", esta pasa dos parámetros,

El elemento a insertar
El elemento que recibirá la insersión

React.DOM.render(element, container);

listo. Ya con esto está realizada la insersión del h1 dentro del div con id "app".

Jimmy Buriticá Londoño

student•

Gracias, la última línea es:

ReactDOM.render(element, container);

Luis Enrique Lemus Hernandez

student•

Resumen de lo hecho antes de usar react para declarar constantes en react, usamos "const", seguido del nombre de la variable. Por ejemplo, queremos crear un h1, y meter dentro del este contenido, pues simplemente tenemos que crear la constante e igualarla a document( body del virtual DOM ).createElement( 'componente' );

const elemento = document.createElement ( ' h1 ' )

seguidamente vamos a usar el innerText y lo vamos a igualar a lo que queremos introducir

elemento.innerText( ' Texto dentro de  h1 ')

ahora, vamos a marcar el contenedor en el cual se va a escribir el código que hemos programado, para eso, vamos a usar una constante que se igualara a tomar el id de nuestro div que esta en el index.html, por lo general es app

const contenedor = document.getElementById( ' app' )

con esto hacemos que contenedor tenga control sobre el div con id "app".

ahora, solo queda insertarlo, y eso lo hacemos con appendChild, que es relativo a "Anexar ni;o", y queremos anexar el elemento al contenedor, por lo tanto vamos a aplicar la función a contenedor.

contenedor.appendChild( elemento );

de este modo, ya tenemos nuestro elemento que es un "h1", dentro de nuestro contenedor que es el div seleccionado con el id de "app."

Alejandro Betancur

student•

JSX: Es lo que me permite hacer esto utilizando etiquetas HTML. ES un híbrido entre JS y HTML. (Es requisito importar React para utilizar JSX)
ReactDOM es el análogo a AppendChild en JS. (se renderiza en alguna parte del DOM.) React es el análogo a createElement en JS.(Creo el elemento HTML).

John Benvin

student•

Si eres NOOB y estas viendo este vídeo, tranquilo. Se ocupado muchos elementos. No tienen la explicación mas precisa pero trata de ir ocupandolos. SI no te sirve este tutorial, trata de sacar lo que mas puedas y buscar otro. Animo! no decaigas <3

Alonso Castellanos

student•

Siempre me había dado miedo entrar en React, pero con este profe es muy sencillo y sobre todo, explica muy bien cada cosita, gracias Platzi <3

David Santiago González Ramos

student•

No sé ni entiendo el porqué pero tambn siempre le habia tenido miedo a aprender React. Pero hasta el momento voy ree feliz aprendiendo react y Richard lo explica super sencillo

Jorge Arturo Salgado Ordoñez

student•

Todas mis expectativas puestas en React.

Luis Jeanpier Monserrate

student•

igual ! me esta gustando como pinta el curso

Luis Carlos Valiente Salazar

student•

¿Se realiza una declaración render para cada elemento que se dese agregar?

Juan Castro

teacher•

En realidad, no. Puedes renderizar un componente que por dentro tenga toooodos los componentes de tu aplicación. Lo vamos a ver más claro en las próximas clases. :wink:

Javier Romero

student•

una pregunta compañeros, el código que dejo comentado en el inicio de la clase era JavaScript Puro verdad ? después lo comparó con react ¿cierto? es decir cuando escribió los imports o estoy muy equivocado ?

Ernesto Vizcaíno Alvarado

student•

Así es.

Fernando Pioli Martínez

student•

les dejo el link del tutorial para tunear la consola de mac como el profe por si a alguno le interesa: o lo buscan con "Configurar iTerm Mac OSX". es de Alex Arriaga

Janice Prendas

student•

El enlace al tutorial: https://www.youtube.com/watch?v=RIjCXi5QMfs

Manuel Ferrer García

student•

A mi me ha clonado el proyecto completo... xD

Heyder Danilo Belalcazar Lugo

student•

si estoy en las mismas :(

Mauricio Chávez Olea

student•

Pueden cambiar de rama de la siguiente manera:

git checkout 1.ReactDOM.render

Ricardo Lugo Recillas

student•

ReactDOM.render = recibe dos argumentos:

el que
y el donde

Gustavo Quino Crispín

student•

De esta manera lo entendí a la perfección, Gracias!

//ReactDOM.render(Qué, Dónde);

ReactDOM.render

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión