ReactJS y el uso de los componentes en la web (Parte 2: Hola mundo en ReactJS)

react

Parte 1

!Hola de nuevo!

Me encanta estar de regreso con ustedes tratando de entender un poco más de lo que es ReactJS y cómo lo podemos utilizar para hacer componentes en web para reutilizarlos.

Hasta el momento no hemos visto nada de código, pero vamos rápido porque hay mucho que hacer:

Primero y antes que nada tenemos que importar la librería de ReactJS, así como la librería JSX Transformer que básicamente es una librería que nos permitirá utilizar código en HTML y lo convertirá en Javascript. Yo sé que suena extraños pero verán que es mucho muy sencillo implementarlo.

En nuestro archivo HTML importamos las librerías de la siguiente manera:

<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="utf-8">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	</head>
	<body>
		<div id="container">
			
		</div>
		<script type="text/jsx" src="/static/app.js.jsx"></script>
	</body>
</html>

Después de importar nuestras librerías, tenemos que crear un div cualquiera, que nos servirá de contenedor de nuestro componente. Es importante que al div le pongas una ID, pues será más sencillo hacerle referencia al momento de definir el componente.

Al final definimos nuestro script pero será un poco diferente al script al que estás acostumbrado, pues tiene que ser de tipo text/jsx, además de ahí definimos nuestro archivo pero con extensión .js.jsx.

Al escribir nuestro archivo de esta manera, no es más agregar la terminación necesaria para que nuestro script corra con sintaxis de JSX.

Pero bueno, pasemo a nuestro script:


/** @jsx React.DOM */

$(document).ready(function(){
  DivComponent = React.createClass({
    render: function() {
      return (
      &amp;amp;lt;div&amp;amp;gt;
        &amp;amp;lt;h1&amp;amp;gt;Hola mundo&amp;amp;lt;/h1&amp;amp;gt;
      &amp;amp;lt;/div&amp;amp;gt;
    );
  }
});

React.render(
  &amp;amp;lt;DivComponent /&amp;amp;gt;,
    document.getElementById('container')
  );
});

Ahora que nos aseguramos que nuestro documento está listo, vamos a definir nuestro componente con el nombre DivComponent (Importantisimo que nuestro componente empiece con mayúsculas), y lo igualamos a nuestra objeto que resulta de llamar a la función React.createClass.

Dentro del objeto escribimos los métodos correspondientes para nuestro objeto:

-render -> Método que se ejecuta para definir el contenido de nuestro componente. (NOTA QUE EL OBJETO QUE REGRESA ES UNA ETIQUETA HTML, por eso es importante el JSX).

Luego explicaremos el ciclo de vida de los componentes. Por el momento conformemonos con enteder que la función render es la más importante pues define el contenido de nuestor componente.

 

Al final solo tenemos que mandar a llamar a la función React.render, definimos como primer parámetro el componente que tenemos creado (Otra vez en formato JSX) y como segundo parámetro el div que va a contener nuestro componente.

Al final solo tenemos que entrar a nuestro archhiv HTML y podemos ver lo sigueinte:

holareact

 

Yo estoy corriendo esta aplicación desde un servidor en node.js, pero no es necesario tenerlo con un localhost. Aunque pueden descargar el ejemplo desde mi GitHub.

GG.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s