15 Minutos de React JS

Nota: al final, el archivo completo con todos los componentes

Un componente basico

	import React, { Component } from 'react';
	import ReactDOM from 'react-dom';

	// La definicion del componente
	class Root extends Component {
	  render() {
		return (
		  <div>
			<h1>Hola mundo desde React</h1>
			<h2>Lalala nana ?</h2>
			<em><strong>Lalala SASASA ?</strong></em>
		  </div>
		)
	  }
	}

	// donde se insertara en DOM
	let container = document.getElementById('app');

	// el componente 
	let component = <Root />;

	// y finalmente hacemos que lo renderice
	ReactDOM.render(component, container);

Podemos por ej, crear otra class/componente:

	class Etiqueta extends Component {
	  render() {
		return (
		  <span>
			<em>Etiqueta here</em>
		  </span>
		)
	  }
	}

que después podemos utilizar dentro del primer componente, en el return del render()
y eso nos renderizará Etiqueta here

Dentro de JSX podemos evaluar expresiones, llamar a funciones, ej:
modificamos Etiqueta para que muestre la hora:

	return (
      <span>
        <em>{ Date() }</em>
      </span>
    )

podemos retornar JSX

	function saludo(name) {
		if(name) {
			return <h1>Hola {name}</h1>
		} else {
			return <h3>y vos quien sos?</h3>
		}
	}

y lo llamamos dentro de nuestro Root:
{ saludo(“Mauro”) }
{ saludo() }

Agregar propiedades a componentes

Vamos a crear un componente que de la bienvenida

	class Bienvenido extends Component {
		render() {
			return (
				<div>
					<h1>Bienvenido {this.props.name}</h1>
				</div>
			)
		}
	}

/*
	y lo agregaremos en Root
	<Bienvenido name="Mauro" />
	Podemos agregar varios (mirar al final)
*/

Un ejemplo de un Relojito con estados, mount y unmount

	// Un relojito comentado
	class Reloj extends Component {
		constructor(props) {
			super(props);
			// como props no podemos alterarlo
			// definimos estados, que estos pueden modificarse
			this.state = { date : new Date() };
		}
		
		// esto se ejecuta cuando el componente se renderiza
		// aqui inicializamos un timer
		componentDidMount() {
			// puedo setear una property aca
			// que utilizare despues
			// para hacer el clearInterval
			this.timerID = setInterval(() => this.tick(), 1000);
		}
		
		// esto se ejecutara cuando desmonte el objeto
		// eso: cuando??
		// en algun momento supongo que cuando no se 
		// necesite invoca este method para que no este 
		// el interval para siempre
		componentWillUnmount() {
			clearInterval(this.timerID);
		}
		
		
		// el method que se llamara desde el setInterval
		// y cada vez que se llame, React re-renderizara 
		// para actualizar la vista
		tick() {
			// con setState cambiamos el estado de nuestro componente
			this.setState({
				date: new Date()
			});
		}

		
		render() {
			return(
				<p>
				{ this.state.date.toLocaleTimeString() }
				</p>
			)
		}
	}
  

Hay un millon de cosas mas con los states, para eso recomiendo leer:
https://es.reactjs.org/docs/state-and-lifecycle.html

Y por hoy tenemos los 15 minutos de React, puedes descargar el archivo desde aquí
Bye!