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:40] – 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 desde de escribir las etiquetas **