Empiezo nueva sección en el blog (tenía muchísimas ganas de empezar con React).

Os cuento un poco que es esto:

  • Esta desarrollado por Facebook que aunque no lo parezca nos da algo de confianza en cuanto a su durabilidad a la larga y su estabilidad.
  • Se centra mucho en la parte de UI, es decir seria la V del MVC.
  • Es muy útil para construir grandes aplicaciones que cambian con el tiempo.
  • Gracias a su Virtual DOM el rendimiento no se ve severamente afectado cuando la información necesita actualizarse.
  • Se basa en componentes, haciéndolos reutilizables fácilmente.
  • Lo podemos integrar a cualquier API.
  • Y es JavaScript :)
  • Se puede integrar con Node, Ruby o cualquier otro lenguaje de backend.
  • Tiene framework para mobile (React Native, que lo venden como 'nativo'), que será lo siguiente que veremos cuando terminemos con el básico ;)
  • Usa JSX que es una especie de lenguaje tipo XML para crear nuestros componentes. Básicamente nos permite usar código HTML en variables de JS. Tenéis mas información sobre esto en la pagina oficial de React.

Suena bien no?? A mi me encanta:
Captian Atom

Para trabajar con React necesitamos agregar mínimo 3 librerías a nuestro proyecto, es decir a nuestro index.html

<!-- Libreria para trabajar con React -->
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<!-- Libreria de react para trabajar con el Dom-->
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<!--Preprocesador para traducir lo que escribimos a todos los navegadores ya que react funciona con ECS6 y puede que no funcione en todos -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Bien con esto ya tenemos lo básico para trabajar con React. Como extra yo me descargado un plugin para Visual Studio Code para que reconozca el trabajo con babel en su momento. No es en absoluto necesario.

Pues bien antes de continuar hagamos una prueba para comprobar que todo funciona bien, si alguno ha trabajado o conoce un poco Angular vera como ciertos conceptos con parecidos.

Vamos a añadir una cabecera a nuestro fichero HTML usando React, para ello incluimos lo siguiente:

<script type="text/babel">
        ReactDOM.render(
          <h2>Hello with React</h2>,
          document.getElementById('root');
        );
</script>

Como vemos usamos en lugar de nuestro text/javascript típico, hemos puesto babel para que reconozca que tiene que usar babel. Y a continuación le indicamos que renderice en nuestro DOM el HTML que le pasamos, pero......¿donde? bien aquí es donde viene un concepto similar a angular. En Angular 1.5 por ejemplo teníamos nuestro ng-app:

<body ng-app="appName">

Donde le indicabamos donde empezaba a funcionar nuestra WebAPP, pues con React el concepto es parecido, si veis en el código superior hemos puesto que busque un elemento con el ID root(que podria ser cualquier otro nombre), que sera donde renderice el código, por lo que en algún sitio de nuestro código html tenemos que añadirlo jejejejje

<div id="root"></div>

Bien y si todo ha ido bien tendríamos que tener algo similar a esto:
React Hello
Perfecto, como prueba de concepto esta bien, pero realmente así no se trabaja con React, es un lenguaje basado en componentes por lo que vamos a empezar por crear nuestro primer componente.

Primer Componente

Nuestro primer componente solo para ver de una forma rápida y facil como se harían, lo crearemos en el mismo index.html, dentro de nuestra etiqueta script

<script type="text/babel">
class Supercomponente extends React.Component{
      render(){
          return <h2>Hello with React</h2>;
      }
}

Como veis hemos creado una clase Principal (Ojo el nombre tiene que empezar en mayúsculas mas abajo veremos porque, y normalmente usamos inglés para los nombres, solo he puesto ese superNombre para que quede claro), la cual extiende de React.Component. Luego simplemente creamos un método render que devuelve el mismo código que teníamos antes, pero... y como lo llamamos, bien aqui viene el porque de las mayúsculas al crear el componente.
Los componentes pasan a ser etiquetas al estilo HTML y las ponemos en mayúsculas para diferenciarlas de las etiquetas normales, quedando la llamada al componente de esta manera:

ReactDOM.render(
   <SuperComponente/>,
   document.getElementById('root')
);

Ponemos la etiqueta (importante cerrándola al final), y con esto debería funcionarnos igual que antes, y ya habríamos creado y usado nuestro primer componente.

Fácil verdad? Bien como importante recordar que un componente siempre tiene que tener un método render y que en las llamadas del ReactDOM, solo repito solo podemos pasarle un componente. Y ahora viene cuando nos deberíamos preguntar, ¿Y como hago para usar varios componentes unos con otros?¿No me digas que tenemos que hacer para todos un ReactDOM.render?......Pues no, no es necesario, realmente podemos integrar unos componentes con otros, pero a nivel de componentes, es decir, un componente puede tener y devolver otros componentes, vamos a crear otro componente y hagamos la prueba

class MiSegundoComponente extends React.Component{
       render(){
            return <h2>REACT is in the HOUSE...YEAH!!!!</h2>
       }
}

Ya tenemos otro componente y para llamarlo, lo hacemos desde el primero como si de otra etiqueta HTML normal se tratara, algo así no?:

class SuperComponente extends React.Component{
render(){
     return (
            <h2>Hello with React</h2>
            <MiSegundoComponente/>
        );
     }
}

Fijaros que en el return he metido el contenido entre (), pero hagamos la prueba.....upssss no carga nada y si abrimos la consola del navegador vemos lo siguiente:
Error component
Bien he puesto este error a propósito para que lo tengamos en cuenta como importante, TODOS LOS COMPONENTES ES NECESARIO QUE ESTEN DENTRO DE UNA ETIQUETA PADRE, es decir tienen que ser elementos HTML por si solos. En este caso seria simplemente meterlo todo dentro de un div:

class SuperComponente extends React.Component{
  render(){
         return (
           <div>
             <h2>Hello with React</h2>
             <MiSegundoComponente/>
           </div>
        );
   }
 }

Y ahora ya si nos funcionaria:
Two Components

Como véis el uso de React es bastante fácil solo tenemos que tener unas pequeñas cosas en cuenta, como por ejemplo que los componentes tengan que estar encapsulados dentro de una etiqueta principal para que funcionen.

Y hasta aquí este post introductorio de React, os animo a seguir los siguientes si queréis aprender al mismo tiempo que yo a usar React, nos vemos en el siguiente.