JSX

Name: JSX
Uploaded: 2019-03-27T21:00:00+00:00
Duration: 10 min 8 s
Description: JSX es una extensión de JavaScript creada por Facebook para el uso con la biblioteca React. Sirve de preprocesador (como Sass o Stylus a CSS) y transf

Clase 7 de 37 • Curso de React.js 2019

Clase anteriorSiguiente clase

Resumen

JSX es una extensión de JavaScript creada por Facebook para el uso con la biblioteca React. Sirve de preprocesador (como Sass o Stylus a CSS) y transforma el código generado con React a JavaScript.

JSX tiene su alternativa que es React.createElement pero es preferible JSX porque es mucho más legible y expresivo. Ambos tienen el mismo poder y la misma capacidad.

React.createElement recibe 3 argumentos:

El tipo de elemento que estamos creando
sus atributos o props
y el children que es el contenido.

Ejemplo:
React.createElement(‘a’, { href: ‘https://platzi.com’ }, ‘Ir a Platzi’);

En JSX se utilizan las llaves para introducir variables o expresiones de Javascript. Lo que sea que esté adentro se va a evaluar y su resultado se mostrará en pantalla.

Las expresiones pueden ser llamadas a otras funciones, cálculos matemáticos, etc. Si las expresiones son false, 0, null, undefined, entre otros, no se verán.

Jesus Olivo Lacroix

student•

Creo que el profesor se refería con "Azucar sintetica" a "Sugar Syntax" (Azucar SINTACTICO), un pequeño error de traducción, algo común en personas con manejo de múltiples idiomas, los llamados falsos amigos. Pero, ¿Que es eso de Azúcar sintáctico?; en informática, el azúcar sintáctico es un término acuñado por Peter J. Landin en 1964 para referirse a la adición de un diseño de sintaxis en un lenguaje de programación que nos permite hacer algunas construcciones más fáciles codear, expresar y leer.

Bernardo Aguayo Ortega

student•

gracias bro

Jair Neri

student•

super nunca supe bien que significaba

Mario Jesús Arango Cupe

student•

Este video me inspiro, que bueno cuando te explican el porque de las cosas, eso es lo más genial :)

Andrés Felipe García Rendón

student•

Pc en definitiva de los mejores profesores que tiene Platzi

Fabio Andres Arango Grajales

student•

Por fin un comentario de este mes....en todos los cursos anteriores son de 8 meses como minimo

Jaime David Burbano Montoya

student•

En un par de meses, quizá seas famoso. Guarda el link de este comentario para un futuro cercano

Bernardo Aguayo Ortega

student•

eres famoso

Luis Cordero

student•

Código para mirar mejor los ejemplos

// Clase 7 
//-> Lección 1
/*
import React from 'react';
import ReactDOM from 'react-dom';

const jsx = <h1>Hello, Platzi Badges!</h1>;

const container = document.getElementById('app');
ReactDOM.render(jsx, container);
*/
//-> Lección 2 
/*
import React from 'react';
import ReactDOM from 'react-dom';

const element = React.createElement(
    'a',
    {
        href: 'https://google.com'
    },
    'Ir a Google'
);

const container = document.getElementById('app');
ReactDOM.render(element, container);
*/
//-> Lección 3
/*
import React from 'react';
import ReactDOM from 'react-dom';

const name = 'luiscordero29';
const element = React.createElement(
    'h1',
    {},
    `Hola soy, ${name}`
)

const container = document.getElementById('app');
ReactDOM.render(element, container);
*/
//-> Lección 4
/*
import React from 'react';
import ReactDOM from 'react-dom';

const name = 'luiscordero29';
const element = <h1>Soy, {name}</h1>

const container = document.getElementById('app');
ReactDOM.render(element, container);
*/
//-> Lección 5
/*
import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>La suma de 2 + 9 = {2 + 9}</h1>

const container = document.getElementById('app');
ReactDOM.render(element, container);
*/
//-> Lección 6
/*
import React from 'react';
import ReactDOM from 'react-dom';

const sumar = () => 2 + 9;
const element = <h1>La suma de 2 + 9 = {sumar()}</h1>

const container = document.getElementById('app');
ReactDOM.render(element, container);
*/
//-> Lección 7
/*
import React from 'react';
import ReactDOM from 'react-dom';

const jsx = (
    <div>
      <h1>Hola, soy Luis Cordero</h1>
      <p>Soy ingeniero en informática.</p>
    </div>
  );

const container = document.getElementById('app');
ReactDOM.render(jsx, container);
*/
//-> Lección 8
/*
import React from 'react';
import ReactDOM from 'react-dom';

const element = React.createElement(
    'div',
    {},
    React.createElement('h1', {}, 'Hola, soy Luis Cordero'),
    React.createElement('p', {}, 'Soy ingeniero en informática.')
);
const container = document.getElementById('app');
ReactDOM.render(element, container);
*/

Miguel Angel Escurra

student•

Great Job!

Josué Carvajal

student•

He probado muchas plataformas de aprendizaje online, pero este nivel de detalle con el que se dan las clases acá es lo que me encanta, muchas gracias profe!

María José Ledesma

student•

¡Nunca pares de aprender!

Pedro Moreno

student•

Si, así es!

Diego Fernando Rojas Quintero

student•

👋Hola chicos. Este es el resumen de la clase React nos permite tener dos sintaxis para poder maqueta nuestro HTML (por así decirlo)

import React from'react';
import ReactDom from'react-dom';

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

const expresión = 'soy una expresion, lo que quiere decir que soy una algo que se va a evaluar por parte de JavaScript como una operacion (suma, resta, etc) o una funcion, etc.';

/*---------------------React.createElement---------------------*/

// Esta sintaxis no es la mas popular de para escribir nuestro codigo pero hace lo mismo que JSX //

// const elemento = React.createElement(
//   'div',                 // Etiqueta
//   {},                    // priopiedad de la Etiqueta
//   'Soy su contenido'     // Contenido de la etiqueta
// )

const createElement = React.createElement(
  'div',
  {},
  React.createElement(
    'h1',
    {},
    'Hola! soy Diego'
  ),
  React.createElement(
    'a',
    { href:'https://Platzi.com' },
    'Hola soy un link'
  ),
  React.createElement(
    'P',
    {},
    `Hola!, ${expresión}`
  )
)

ReactDom.render(createElement, container);

/*-----------------------------JSX------------------------------*/

// Esta es la sintaxis que vamos a utilizar y la que propone React para la creacion de nuestro codigo //

const jsx =(
  <div>
    <h1>Hola Soy Diego</h1>
    <ahref='https://Platzi.com'>Hola soy un link</a>
    <p>Hola!, {expresión}</p>
  </div>
)
ReactDom.render(jsx, container)

++Dale un like en ❤ si te ayudo esta recomendación++

Jorge Ossa

student•

Te recomiendo primero hacer el curso de fundamentos de Javascript realmente es un requisito porque React es Javascript.

José Manuel Casani Guerra

student•

Y de Webpack tambien , sino te limitas bastante ..

Wilson Alejandro Gonzalez Gaitan

student•

Tambien es necesario aprender html, css para poder realizar componentes robustos

Jose L. Figueroa

student•

React.createElement() contiene 3 parámetros :

Tipo de elemento .
Los Props o Propiedades .
Los Children o contenido del Elemento . Similar a innerHTML o innerText.

Carlos Enrique Gonzalez Peña

student•

Syntactic Sugar! es como el Async Await de las promesas de JS

Pedro Alejandro Silva Perez

student•

Muchachos, hice un resumen de todo el primer módulo. Lo dejaré por aquí por si alguien quiere echarle un ojo. React: Fundamentos y conceptos básicos

Xamir E Rojas

student•

Wow está genial!

Alex Abel Lerman

student•

No hace falta definir el container por fuera del metodo ReactDOM.render

ReactDOM.render(jsx, document.getElementById('app'));

Se puede ubicarlo por ID dentro del mismo para tener una linea menos de codigo

Facundo Nicolás García Martoni

teacher•

Es mejor crear a la constante por fuera, para poder reutilzar el código, en lugar de "hardcodear" al container.

Luis Paredes

student•

lo maximo este profesor.

Cristian Córdova

student•

:D tengo mas puntos que el profre. Pero infinito conocimiento menos que el profe :(

RODRIGO ALEJANDRO CASTILLO MONTERROSA

student•

JSX != HTML

Jimmy Buriticá Londoño

student•

👍

Nicolas Miranda

student•

Es mil veces mejor el JSX

Jhon Carlos Colorado Angulo

student•

Gran diferencia entre JSX y React.createElement(). JSX es mucho más facil de leer y codear.

John Cardenas

student•

Al guardar los cambios en mi archivo (index.js) no se actualiza y tampoco se le aplican automáticamente los cambios al proyecto, a mi localhost. Para que se le apliquen los cambios, debo darle de baja al servidor local y volver a correr npm run start. . ✔ Tengo React y ReactDOM importados correctamente. ✔ Clone el repositorio en el mismo estado que el del profesor (mismo commit). ✔ He realizado varias consultas en Google, en los aportes de los comentarios y no encuentro respuesta. . ¿Alguna idea sobre que pueda ser? Es algo tedioso bajar el server y volver a correr el comando :D

Kevin Fiorentino

student•

Hola compañero, lo importante aquí primero es conocer lo que está haciendo "npm run start" ya que es un script de NPM, no de React o de algún servidor local. Fijate en el package.json para encontrar el comando que lanza exactamente. Obvio que es molesto tener que hacer eso pero hay muchas soluciones para implementar como Nodemon o Lite-server. Es importante elegir uno e investigarlo un poquito hasta lograr hacer que funcione y sacarte esa molestia de encima.

Platzi Team

student•

Acabo de tener el mismo problema, alguna nueva solución compañeros?

Félix Alejandro Zelaya Orellana

student•

Digo no a React.createElement! jajaj

jimy joaquin huacho dolores

student•

Hola profesor, en su apartado de JSX menciona lo siguiente: En JSX se utilizan las llaves para introducir variables o expresiones de Javascript. Lo que sea que esté adentro se va a evaluar y su resultado se mostrará en pantalla.

Sin embargo al intentar replicar su ejemplo (como en el video) el editor de VisualStudioCode lo toma como una cadena por ende no puedo usar esa variable.

Para poder usar la variable tuve que concatenarla y de esa manera muestra el contenido de la variable.

Eduardo Vicente Marroquin

student•

hola no utilizas las comillas simples son estas comillas si se les puede llamar de esa manerda `` no estas ''

Efrain Pineda Jaimes

student•

Debes usar las comillas invertidas, en mi laptop est'an encima del cero.

Hernando Rincón

student•

Los datos que al evaluarse vienen en false, no van a ser visibles dentro del documento.

JSX

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