Conociendo JSX
JSX es una abstracción sobre la API Reac.createElement que permite expresar de forma aún más declarativa la definición de la UI que quieres renderizar.
JSX es una forma más intuitiva de crear componentes, al menos más intuitiva o declarativa que la API React.createElement. Es muy similar a HTML.
Pero JSX no es javascript por lo que necesitamos algunas herramientas extra, en particular Babel.
Babel se encarga de transpilar o transformar el código JSX en javascript puro, es decir en llamadas a React.createElement.
Es una buena idea recordar que tras el uso de JSX hay un grupo de llamadas a React.createElement a modo de “compilador humano". Esto te ayudará cuando necesites realizar operaciones complejas sobre JSX.
🐾 Primeros Pasos
Iniciaremos los primeros pasos utilizando JSX para crear elementos y componentes React incluyendo anidación, comprendiendo así la ventajas que ofrece el uso de JSX.
Para eso primero agregaremos babel a nuestra app, inicialmente usaremos una versión “standalone” que permite ejecutar el proceso de transpilación directamente en el browser. Es importante mencionar que esta forma estática de uso de Babel no es la adecuada para producción, para esos casos estarás ejecutando el proceso de compilación en tiempo de compilación, antes de hacer tu deploy.
🎯 Objetivos
- Crear componentes y elementos JSX.
Para lograr esto primero debemos agregar Babel a nuestro proyecto, lo haremos directamente con un snippet en nuestro HTML
Además tenemos que realizar una pequeña modificación extra, en el tag <script>que contiene nuestro trabajo agregaremos al atributo type=“text/babel”
🏋️♂️ Ejercicios
- Crear un elemento h1 usando JSX
Para este ejercicio crearás un elemento h1 utilizando JSX y lo desplegarás en la página principal.
🍬 Crédito Extra
- Utilizando
JSXcrea una lista de 3 elementos utilizandoulyli. - Ahora, usando la lista antes creada ¿Cómo automatizarías la creación de múltiples items
li?
Transcripción
Comencemos con algo más de React. En esta ocasión conoceremos JSX. JSX no es más que una abstracción de la API React.createElement que vimos en la lección anterior.
Trata de hacer una forma más intuitiva para crear componente, ya que se parece mucho HTML. Pero ojo, que JSX no es JavaScript. Para eso necesitamos herramientas extras como Babel, que no es más que un transpilador o compilador. Básicamente, convierte el código JavaScript a otra versión de código JavaScript.
Babel entiende JSX y lo convierte llamadas a React.createElement. Es una buena idea recordar que detrás de JSX hay llamada createElement a modo de compilador humano. Eso te va a ayudar mucho cuando tenga que realizar operaciones complejas con JSX.
Lo primero que vamos a hacer es agregar Babel a nuestro HTML usando este script y comenzaremos con nuestro ejercicio, que básicamente es crear un elemento h1 utilizando JSX. Una vez que tengas hecho eso, podrás avanzar el crédito extra creando una lista anidada.