https://facebook.github.io/react/docs/installation.html
crear una carpeta con el nombre del proyecto,
dentro crear el archivo index.html con el siguiente contenido
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title></title>
</head>
<body>
<div id="bloque">
</div>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
la idea ahora es crear con javascript dentro del div "bloque"
<h1 id="titulo">esta es una prueba</h1>
para esto creamos un archivo app.js
si lo queremos hacer usando javascript puro, el codigo dentro de app.js seria el sgt
const e = document.createElement("h1");
e.setAttribute("id","titulo");
e.textContent="esta es una prueba";
document.getElementById("bloque").appendChild(e);
si quisieramos generar la sgt linea
<h1 id="titulo">esta es una <span>prueba</span></h1>
el codigo se empieza a complejizar, seria algo asi:
const e = document.createElement("h1");
e.setAttribute("id","titulo");
e.textContent="esta es una ";
const h= document.createElement("span");
h.textContent="prueba";
e.appendChild(h);
document.getElementById("bloque").appendChild(e);
como lo resolveriamos con react......
const e = React.createElement(
"h1",
{id:"titulo"},
"Esta es una ",
React.createElement("span",null,"pruebaaaa")
);
ReactDOM.render(e,document.getElementById("bloque"));
como lo resolveriamos con jsx....
const e = <h1 id="titulo">Esta es una <span>prueba</span>,</h1>;
peeero hay que compilarlo, para que esa sintaxis se transforme en codigo react.
para esto vamos a usar la aplicacion prepros https://prepros.io
descargar, ejecutarla y arrastrar a la ventana el folder de nuestra aplicacion
seleccionar el archivo app.js, checkear la opcion Babel y hacer click en [Process File]
lo que creara un archivo app-dist.js
con la sintaxis compilada a una forma react.
(en prepros, dejar checkeada la opcion de "Auto compile" de este modo, la compilacion de app.js sera automatica cada vez que guardemos algun cambio)
para que se muestre por pantalla agregar la sgt linea (igual que en el codigo de react)
ReactDOM.render(e,document.getElementById("bloque"));
no olvidar de modificar index.html y apuntar a app-dist.js
jsx admite expresiones javascript siempre que las pongamos entre llaves.
const e = <h1 id="titulo">Esta es una <span>prueba de suma {3+6} </span>,</h1>;
para las propiedades jsx usa camelCase entonces
si queremos definir la propiedad tab-index debemos usar tabIndex
ademas class es una palabra reservada de javascript asi que para referirnos a la clase de css
debemos usar className que se renderizara como class.
para poder ordenar el codigo y no escribir en una sola linea, debemos rodear todo con parentesis
const e = (
<h1 id="titulo">Esta es una
<span>prueba de suma {3+6} </span>
</h1>);
ReactDOM.render(e,document.getElementById("bloque"));
advertencia no pueden haber varios elementos al mismo nivel <h1>blablaba</h1><h2>jeje</h2>
hagamos un ejemplo mas complejo, crearemos un reloj:
si lo escribieramos en javascript puro seria algo asi:
const e=document.getElementById("bloque");
function reloj(){
let now=new Date().toLocaleTimeString();
e.textContent=now;
}
setInterval(reloj,1000);
con jsx seria
const e=document.getElementById("bloque");
function reloj(){
let now=new Date().toLocaleTimeString();
const visor = <h1><strong>{now}</strong></h1>;
ReactDOM.render(visor,e);
}
setInterval(reloj,1000);
No hay comentarios:
Publicar un comentario