curso [CLASE 1] React Js - Paneo General & Componentes

[Nicolas.Tizeira]

Bueno como les prometí hoy comenzamos con las clases de esta hermosa y espectacular librería conocida como React Js, y sin mas vueltas vamos a ello....

Seguramente lo primero que todos se preguntan es...

¿Que es React?

Bueno como lo vine repitiendo ya un millón de veces jaja, React.js es una librería, efectivamente como su nombre lo dice... de Javascript y open source desarrollada por Facebook, y focalizada en el desarrollo de interfaces de usuario. En resumidas palabras es la V del MVC.

Server side rendering

Client side rendering

 

Ecosistema de React

Al ser solo una librería deja de lado muchas otras soluciones que nos aportan los tan queridos frameworks, pero no se asusten zoneros, por que sin embargo existe todo un ecosistema de herramientas, aplicaciones y librerías que al final equiparan React a lo que seria un framework. 

 

NPM

NPM (Node Package Manager) es un gestor de paquetes de Javascript de Node.js. Por medio de esta herramienta podemos crear, compartir y reutilizar módulos en nuestras aplicaciones de forma sencilla. Acá es cuando ya empezamos a hablar de otras cosas que no son React  como dije en la introducción, voy a ir explicando todo lo mejor posible para poder usar React y equiparlo como dios manda.

Si nunca usaste NPM, te explico.... dependiendo de tu entorno de desarrollo (windows o linux) tenes varias formas de instalarlo.

Para windows basta con entrar al sitio oficial de node (

Debes iniciar sesión para ver el contenido del enlace en esta publicación.

) descargar la versión estable y instalar.

Y para linux (ubuntu) es ingresando las siguiente lineas de comando en orden:

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Bueno continuando con React, facebook nos ofrece un paquete para crear una aplicación rápida en React sin tener que preocuparnos de las configuraciones de Webpack y todas las que involucran para hacerlo funcionar, eu no me ataquen, si, también explicare Webpack y sus derivantes pero mas adelante, vamos por partes como dijo jack.

Para esto deben tirar en consola las siguientes lineas de comando:
 

npm install -g create-react-app
create-react-app mi-proyecto-zone
cd mi-proyecto-zone
npm start

Bueno ahora les explicare que realiza cada linea aunque es fácil de deducir, pero no quiero dejar ningún tipo de dudas para los que son aficionados en desarrollo o nunca usaron line of code. En la primer linea estaremos instalando atraves de Node el paquete de facebook para crear aplicaciones rápidas de React, en la linea que le sigue utilizamos dicho paquete para crear un proyecto React con el nombre "mi-proyecto-zone", en la tercer linea ingresamos a la carpeta que nos genero el paquete de facebook y por ultimo iniciamos el proyecto.

Importante: Debemos estar parados sobre nuestro proyecto ya que la ejecución de npm start busca el archivo package.json, un script con la clave start y ejecuta el comando especificado como su valor que nos permite correr nuestra aplicación.

Hora de la practica

Les voy a pedir como primer punto de practica de hoy que realicen lo siguiente:

a) Instalar npm en su entorno de desarrollo
b) Instalar el starter kit de faacebook para proyectos rapidos de React
c) Crear un proyecto utilizando el starter kit
d) Levantar el proyecto

¿Y que nos acabamos de descargar?

create-react-app nos descarga un conjunto de paquetes para comenzar rapidamente con una aplicacion basada en React, y esta incluye:
* Librerias de React

* Ecosistema Babel + Webpack configurado

* HMR

* Y muchos módulos mas

 

En node_modules están todos los paquetes de node.js instalados para el proyecto en React.

En la carpeta public se  encuentra el archivo index.html que es el archivo html principal que se va cargar cuando el usuario ingresa a la url de nuestra aplicación.

En src están todos los archivos donde vamos a trabajar en nuestro proyecto en React.

En package.json se especifican las dependencias y las versiones de los paquetes que depende el proyecto.

 

Y muchos se estarán preguntando que es esto!! Pero si es un .js! Que clase de Javascript es esto?

Señoras y señores, les presento lo nuevo de Javascript o conocido como ECMAScript 6.

 

ES6

ECMAScript 6 es la nueva versión de Javascript lanzada en el 2015.

¿Que tiene de nueva ES6?
* Arrow functions

* Clases

* let & const

* import & export

* Template String

* Entre otras novedades mas.....

 

Clases

ES5
class Notebook {
  constructor(brand){
  	this.brand = brand;
  }
  getBrand(){
   	return this.brand;
  }
  setBrand(brand){
   	this.brand = brand;
  }
}

Se pasa a variable:
var notebook = new Notebook("Dell", "Alienware");
notebook.getBrand();
notebook.setBrand("Apple");

En cambio con ES6:
 

class Notebook {
  constructor(brand){
  	this._brand = brand;
  }
  get brand(){
   	return this._brand;
  }
  set brand(brand){
   	this._brand = brand;
  }
}

Se pasa a variable:

var notebook = new Notebook("Dell");
notebook.brand;
Notebook.brand = "Apple";

Es un poco mas simple, pero seguro dirán "ni que esto me salvara la vida de tanto codigo", tranquilos es solo el principio.... lo interesante se viene cuando nos metamos de lleno en los componentes de React.

Import & Export

import Componentes from './componente'

Se utiliza para importar funciones u objetos que han sido exportadas desde un modulo externo.

 

export componente;

Es usada para exportar funciones, objetos o tipos de dato primitivos a partir de un archivo (o modulo).

 

¡También podemos exportar e importar clases!

 

Arrow Functions

Como su nombre lo indica, los arrow functions son funciones definidas usando una flecha =>

En ES5
 

var duplica = function(num) {
	return num * 2;
}

Y con nuestro tan querido ES6
 

var duplica = (num) => num * 2;

Como se ve, es mucho mas fácil de codear con las arrow functions incluso mas rápido.

 

Hora de la practica

Les voy a pedir como segundo punto de practica de hoy que realicen lo siguiente:

a) Copiate el siguiente objeto en un nuevo archivo "alumno.js" dentro de src:
 

var alumno = {
  nombre:"Pepe",
  apellido:"Perez",
  curso:"React",
  aprobado:true
}

b) Importar el objeto del punto "a" en App.js. Modificar/Agregar el codigo para poder exportarlo y luego importarlo.

c) Modificar en App.js para que imprima el nombre y apellido del alumno en lugar de "Welcome to React" e imprima que curso esta realizando en lugar de "To get started, edit and save to reload".

d) Modificar el código en alumno.js para convertirlo en clase. Definir sus getters y setters.

e) Crear una instancia de Alumno. Modificar el código en App.js para mostrar los datos del mismo. Utilizar los getters definidos en el punto anterior.

f) Definir una función dentro de App.js para que imprima el estado de aprobacion del alumno.. Debe imprimir "Aprobado" si lo esta, caso contrario "No Aprobado".

g) Modificar la función anterior para expresarlo como arrow function.

 

Y ahora si llego lo esperado, por lo que vinieron a mi aporte, REACT jaja, tuve que explicarles todo lo anterior por que React Js trabaja mucho con todo esto y mi idea es orientar las clases desde gente sin conocimientos de nada hasta gente con conocimientos de desarrollo.

Bueno sin mas vueltas... ahí vamos....

 

Componente

Nos permiten desglosar el desarrollo de aplicaciones web en pequeños contenedores reusables, espera, dijiste ¿Reusables? SI! Esta es la primer novedad de React Js, que podemos desarrollar componentes a lo loco, y estos reutilizarlos en cualquier parte de nuestra aplicación sin tener que codear prácticamente nada!

Hasta ahora, la única forma que conocíamos de crear elementos html desde la programación era mediante Js de la siguiente forma:

 

var saludo = document.createElement('h1');
saludo.innerText = 'Hello world!';
saludo.className = 'text-primary';
document.body.append(saludo);

 

Pero en React es de la siguiente forma:

 

React.createElement(type, [props], [...children]);

 

Un ejemplito:

 

HTML Deseado:

<div class="text-primary">
	Hello World!
</div>

Creado en React:

React.createElement(
  "div",
  {className: "text-primary"},
  "Hello World!"
);

 

Espera, entonces si quiero realizar lo de a continuación como seria?
 

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

Si efectivamente, sera de la siguiente forma:
 

var nav = React.createElement(
 "ul",
 { id: "nav" },
 React.createElement(
 "li",
 null,
 React.createElement(
 "a",
 { href: "#" },
 "Home"
 )
 ),
 React.createElement(
 "li",
 null,
 React.createElement(
 "a",
 { href: "#" },
 "About"
 )
 ),
 React.createElement(
 "li",
 null,
 React.createElement(
 "a",
 { href: "#" },
 "Contact Us"
 )
 )
);

 

Euuu, nos engañaste... donde esta lo fácil y reutilizable, tardo una eternidad en hacer un navegador!!!

 

No mis buenos amigos, no los engañe lo que acabamos de ver era React en su estado netamente PURO, nadie lo codea de esa forma, solo era para ver su hermosa sintaxis y asustarlos jaja, la forma de programar en React es por medio del JSX.

 

JSX

JSX es una extensión de ECMAScript. Es un pseudolengauje que facilita el desarrollo de aplicaciones para crear elementos en el DOM gracias a su sintaxis muy parecida al XML.

Por lo que el ejemplo anterior seria:
 

var nav = <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact Us</a></li>
           </ul>

Jeje, disculpen por los memes, es para darle un poco de dinámica a las clases.... bueno continuemos ahora vamos a meternos de lleno a analizar la estructura de un componente.... en React los componentes en el 98% de los casos por no decir 100% son terminados en extension .js vamos a analizar el componente App.js que es el componente principal (Maestro o Padre) de nuestra web application.

Bueno para comenzar a crear un componente vamos a analizar el que ya viene creado por defecto. Lo primero que se hace es importar React, Component desde react (Seria la primer linea), luego se creamos un componente React con las clases de ES6 que extienden de la clase Component anteriormente importada. Luego vemos que el componente tiene un método render que es el que se encarga de renderizar en el navegador el HTML correspondiente al componente. Y por ultimo dentro de nuestro método render retornamos en formado JSX lo que queremos dibujar, facilitando el desarrollo y creación de elementos HTML.

 

IMPORTANTE: El método render solo retorna UN elemento. Por lo tanto, si tenemos mas de un elemento debemos meterlos en un contenedor padre, por lo general "div".

Después tenemos detalles en la sintaxis, como class -> className o for -> htmlFor mas adelante les dare un listado completo de todas las propiedades que cambian de nombre o sintaxis.

¿Pero esto seria JavaScript valido?
SI, y la forma en que esto se compila de forma valida es gracias al señor BABEL

Webpack

Es un empaquetador de módulos, te permite generar un archivo único con todos aquellos módulos que se necesitan.

 

Bueno ahora vamos a suponer que creamos un segundo componente:

Y ahora si lo queremos incorporar en App.js?

Si, así de simple, con tan solo poner <Segundo/> ya nos dibujo el html que antes habíamos programado. Y para terminar por hoy vamos a los ultimas practicas.
 

Hora de la practica

Realizaremos dos puntos para completar la clase de hoy:

1) Componentes (sin JSX)

a) Crear un nuevo componente "componente.js" en src. Crear un elemento que contenga un titulo "Mi primer componente" utilizando React.createElement y renderizarlo en App.js. (NO SE ENGAÑEN Y HAGANLO EN REACT PURO, ES PARA PRACTICAR)

b) Modificar el componente anterior para que ademas de un titulo también contenga un párrafo de tecto "Practicando crear componentes sin JSX" y renderizarlo.

c) Crear otro nuevo componente "frutas.js" utilizando React.createElement que contenga el titulo "Lista de frutas" y una lista con los siguientnes items: "Manzana", "Pera", "Banana".

 

2) Componentes (JSX)

a) Modificar el componente "Frutas" creado en la practica anterior para que contenga el titulo y la lista del ejercicio anterior pero esta vez utilizando JSX. Renderizarlo.

b) Exportar el componente creado e importarlo en App.js y renderizarlo.

 

Y eso fue todo por hoy, por esta clase, espero que les haya gustado y que quieran seguir metiendole a esta linda libreria, esto es solo el principio React esconde muchas ventajas y muchas secretos, que juntos vamos a desenmascarar. En la clase siguiente veremos Handling Events, Virtual DOM (uno de los secretos de react), callback, promises todo de React.

 

Para los usuarios desarrolladores en windows les recomiendo las siguientes cosas:

- Atom o Visual Code (el de mis fotos, el que uso yo) (

Debes iniciar sesión para ver el contenido del enlace en esta publicación.

)

- Cmder (

Debes iniciar sesión para ver el contenido del enlace en esta publicación.

)

Para los que tienen linux solo descarguen el motor de texto (Los que no utilizan ninguno similar, usuarios nuevos en el tema):

- Atom

 

Cmder es un atractivo linea de comandos que remplaza el CMD clásico, este es mucho mejor y menos engorroso para desarrolladores de Node, webpack, etc que trabajan mucho por linea de comando, se los recomiendo con todo mi ser.

Saludos y muchas gracias por participar.

 

[Nicolas.Tizeira]

Les dejo el enlace de invitación a Slack, para que se unan los que quieran compartir las clases, despejar dudas, o compartir código. 

Debes iniciar sesión para ver el contenido del enlace en esta publicación.

Saludos!

[Agustin Lombardo]

Me encanto! Super útil y práctico! Gracias por tu gran aporte! Esperamos la segunda clase con ancias! Saludos!!

[Nicolas.Tizeira]

hace 4 horas, Agustin Lombardo dijo:

Me encanto! Super útil y práctico! Gracias por tu gran aporte! Esperamos la segunda clase con ancias! Saludos!!

Gracias @Agustin Lombardo en estos dias redacto la segunda clase, que tengas un buen desarrollo! Exitos.