El Mundo sin JSX
React ofrece una API “cruda” que te permite crear componentes y en realidad realizar todo lo que pienses sin necesidad de utilizar JSX.
Esta API es la que se encarga de la creación de los componentes y elementos sin que tengas que tocar directamente la API imperativa del DOM, aún así la API de React mantiene cierta semejanza con el DOM.
DOM API:
React API.
La gran (e importante) diferencia es que la API de React acepta props. Un objeto que describe los atributos que este componente u elemento tendrá. En el caso de la API del DOM, si quieres modificar, por ejemplo, el contenido de texto de un elemento harías:
Con la API de React tienes una forma más declarativa:
Es también importante notar que para poder ejecutar React en el browser debes agregar dos script base react y react-dom.
react es la librería que implementa las API necesarias para crear y manejar tus componentes. react-dom es quien "traduce" el árbol de componentes de React a algo que el DOM pueda entender.
Para renderizar tus componentes en pantalla usamos
ReactDOM.render(rootElement, tuApp)
🐾 Primeros Pasos
En esta lección revisaremos como utilizar la API “cruda” para crear elementos y componentes React.
🎯 Objetivos
- Conocer la API base de React para crear elementos y componentes.
- Notar la diferencia entre elemento y componente.
🏋️♂️ Ejercicios
1. Crea una interfaz utilizando las API de Javascript. Para este ejercicio crearás elementos utilizando document.createElement y document.appendChild.
2. Crear un elemento h1 utilizando las API de React. Para este ejercicio crearás un elemento h1 utilizando React.createElement y lo desplegarás en la página principal.
3. Crear elementos anidados. En este caso tendrás que utilizar la api React.createElement para crear un grupo de componentes anidados. La estructura a crear es:
Tip: Recuerda que React.createElement acepta como segundo parámetros un arreglos de props donde una de ellas puede ser children
🍬 Crédito Extra
- Utilizando
React.createElementcrea una lista de 3 elementos utilizandoulyli. - ¿Como definirías esta API. Imperativa o Declarativa? ¿Cómo se relaciona con la API nativa del DOM?
Transcripción
Antes de trabajar directamente con React y crear una aplicación, lo primero es conocer un poco cómo funciona la API de React.
React ofrece una API cruda, es decir, sin mucha sintaxis que te permite crear componentes y realizar todo lo que necesites sin utilizar JSX. Esta API lo que hace básicamente es remplazar la API imperativa del DOM, la que tiene la versión del DOM, para crear un elemento h1 y aquí la versión de React.
La importante diferencia es que React acepta un objeto llamado props que describe los atributos que este componente o elemento recibirá, lo que implica que es una API declarativa.
Ya tenemos React y React DOM en nuestros archivos y llevaremos nuestro primer ejercicio que es básicamente crear una interfaz utilizando la API de JavaScript. Para eso utilizaremos document.createElement y luego, hacer lo mismo, pero utilizando las API de React.
Después, intentaremos trabajar con elementos anidados y un crédito extra que es básicamente crear una lista de elementos utilizando la API de React.