Ejercicio

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:

document.createElement(‘h1’)

React API:

React.createElement(‘h1’, props)

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)

Desafío

En este desafío revisaremos cómo utilizar la API “cruda” para crear elementos y componentes React. Los objetivos son los siguientes:

  • Conocer la API base de React para crear elementos y componentes.
  • Notar la diferencia entre elemento y componente.
  1. Crea una interfaz utilizando las API de Javascript. Para este ejercicio crearás crea un elemento H1 y crea una lista de al menos dos items.
  2. Crear un elemento h1 utilizando las API de React.
    1. Para este ejercicio crearás un elemento h1 utilizando React.createElement y lo desplegarás en la página principal.
  3. Crear elementos anidados.
    1. 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

  1. Utilizando JSX crea una lista de 3 elementos utilizando ul y li.
  2. Ahora, usando la lista antes creada ¿Cómo automatizarías la creación de múltiples items li ?