Diferencias

Muestra las diferencias entre dos versiones de la página.

--- personas:johnny:proyectos:anotaciones-react [2017/01/10 01:05] – creado kz
+++ personas:johnny:proyectos:anotaciones-react [2017/01/10 20:59] – kz
@@ Línea 16: / Línea 16: @@
   * Esta libreria hace el proceso de transpilación. o Tomá la sintaxís de React y la convierté a un js que se pueda leer en todos los navegadores dísponibles.[[http://browserify.org/|browserify]]
   * y por último [[https://cdnjs.com/libraries/babel-core/5.8.23|Babel]]
+** Sobre la sintaxis de JSX y los modulos**
+Esta es la manera de conectar el modulo cuando exista una etiqueta en el index,
+esta debe de tener un Id para ser referenciada en el modulo de React.
+Ejemplo:
+en un .index se tiene esta etiqueta.
+<code html>
+<div id="mensaje"></div>
+</code>
+Ahora para conectar esta etiqueta con el modulo se hace así:
+<code javascript>
+ReactDOM.render(
+    <h1> hola React </h1>
+    , document.getElementById('mensaje')
+);
+</code>
+ReactDOM.render es una función que recibe dos parametros, la primera es que vamos a pintar (la etiqueta h1) y el segundo es en donde lo vamos a mostrar( esto se hace referenciando una etiqueta html en el index con un id o clase, en este caso en "mensaje")
+Támbien es muy importante recalcar, que si se quieren enviar varias etiquetas, estan deben de estar contenidas en una etiqueta padre, osea asi:
+<code javascript>
+ReactDOM.render(
+<div>
+    <h1> hola React </h1>
+    <h2> hola de nuevo </h2>
+<div>
+    , document.getElementById('mensaje')
+);
+</code>
+** No olvidar la coma después de escribir lo que se quiere mostrar(después de las etiquetas html) **
+** Utilizando JSX **
+La sintaxis propia de react crear los modulos que luego se referenciaran al html.
+** Asi creamos un modulo, la variable es importante empezar con mayuscula porque es un objeto de javascript**
+<code javascript>
+// crearemos un objeto de JSX
+var Saludo = React.createClass({
+    render: function(){
+        return(
+                <h1> ¡Utilizando JSX! </h1>
+              )
+    }
+})
+// ahora este objeto de JSX es llamado en la función de React render
+ReactDOM.render(
+<div>
+    <Saludo />
+    <Saludo />
+    <Saludo />
+</div>, document.getElementById('mensaje')
+);
+</code>