personas:johnny:proyectos:anotaciones-react []

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
React es una libreria de facebook para trabajar el front end de la web.

ir a [[https://facebook.github.io/react/docs/installation.html|react]]

** SOBRE EL VIRTUAL DOOM **

Dadó que una pagina web está construida por etiquetas, estás etiquetas marcan la **estrucutra** de una pagina web. Es decír: el Doom es la estructura de la pagina web (document object model).

Tenemos entonces que hay un DOOM actúal de la página (aunque este vacía), React lo que hace es que a partír de este DOOM crea uno virtual y sobre este se empieza a trabajar. Cuando se terminan los cambios en ese DOOM virtual, React compará ese DOOM vírtual con el DOOM actúal de la pagína y realiza los cambios. 
Cabe resaltar que él tampoco toma los datos directamente del DOOM, aún nose porque.

** Sobre lo que se necesita para trabajar REACT **

  * Esté se necesita para instalar lo demás [[https://nodejs.org/en/|Node.js]]
  * Este para instalar los paquetes que necesitamos [[https://www.npmjs.com/|npm]]
  * 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>

** Propiedades de los componentes **

Miremos ahora esto:

<code javascript>


// crearemos un objeto de JSX
var Saludo = React.createClass({
    render: function(){
        return(
            <article>
                <h1> ¡el título del componente! </h1>
                <p>
                     Buen día {this.props.nombre} <br></br>
                     <i>{this.props.children}</i>
                </p> 
            </article>
              );
    }
});

// ahora este objeto de JSX es llamado en la función de React render
ReactDOM.render(  
    <section> 
        <Saludo nombre="alexander marín">
            mexicano
        </Saludo>
        <Saludo nombre="Juan camacho">
            koreano
        </Saludo>
        <Saludo nombre="Juan peréz">
            colombiano
        </Saludo>
    </section>
        ,document.getElementById('mensaje')
);

</code>

Cuando usamos la función de react para renderizar, los objetos que se usan pueden tener propiedades.

Por ejemplo vemos que al instanciar el objeto Saludo de JSX, agregamos un atributo *nombre* con un valor.
Para que este valor pueda ser mostrado en la pagina, en el objeto de JSX se tiene que llamar a ese parametro. Escribiendo this.props.nombre para llamar al atributo. Tambien notamos que dentro del objeto, se escribe la ciudadania de la persona (mexicano, colombiano, etc), para referenciar este otro atributo al JSX, se usa this.props.children, identificando el atributo hijo del objeto Saludo.