Saltar al contenido

Usar Reaccionar sin JSX o ES6

La mayoría de la gente usa JSX con React, pero eso requiere Babel, lo que a su vez significa que necesitamos algo como Webpack. Si no usamos JSX, entonces no tenemos que preocuparnos por nada de eso. Aquí hay un ejemplo sin JSX para empezar.

12345678910111213141516171819<!DOCTYPE html;<html;<head;<metacharset="UTF-8"/https://unpkg.com/[email protected]/umd/react.development.js"</script;www.ucs. org/espanol.com com/[email protected]/umd/react-dom.development.js"></script;www.uds. com/[email protected]/umd/react-dom.development.js">/script;www.uds. com/[email protected]/umd/react-dom.development.js;www.uds. com/[email protected]/umd/react-dom.development.js;www.uds. com/[email protected]/umd/react-dom.development.js;www.uds. com/[email protected]/umd/react-dom.growth.js;wwww. createElement;ReactDOM.render(e($0027h1$0027,null,$0027Hello, world!$0027),document.getElementById($0027root$0027));

html

Usar Reaccionar sin JSX o ES6
Usar Reaccionar sin JSX o ES6

El primer argumento de React.createElement es el tipo de elemento (o su componente personalizado, que veremos más adelante). El segundo son las propiedades que puedes pasar a ese elemento (normalmente denominadas props). El tercero son los elementos hijos. En este caso, sólo mostraremos «¡Hola, mundo!» aquí, pero podríamos poner otro elemento o componente aquí o incluso una lista de ellos.

Pegue esto en un archivo html y ábralo en su navegador.

En caso de que tengas curiosidad, el JSX es azúcar de sintaxis para que puedas escribir

¡Hola, mundo!

en lugar de React.createElement($0027h1$0027, nulo, $0027¡Hola, mundo!$0027). Ver Reaccionar sin JSX para más información.