Los props se envían a los componentes al momento de crearlos, y es tan fácil como mandar las propiedades como un atributo del <tag>  del componente, por ejemplo, supongamos que tenemos un componente <ItemList> , el cual necesita recibir los datos de un producto, dicho producto debe contener el nombre y un precio:

<ItemList product={item}/>

Mandar objetos es una forma simple y limpia de mandar propiedades, pero también lo podríamos hacer en varias propiedades, por ejemplo:

<ItemList productName={product.name} productPrice={product.price}/>

La única diferencia entre estos dos métodos será la forma de recuperar las propiedades. Para recuperar una propiedad es necesario usar el prefijo, this.props , por lo que en el primer ejemplo, el ítem se recupera como this.props.product , y en el segundo ejemplo, sería this.props.productName  para el nombre y this.props.productPrice  para el precio.

Una limitación que tenemos para mandar props, es la de no utilizar un nombre de propiedad que coincida con los atributo de React, por ejemplo: onClick , onChange , className , etc.

Las propiedades son inmutables
La propiedad tiene la característica de ser inmutables, es decir, no debemos de modificarlas o actualizarlas, pues es considerada una mala práctica, solo las debemos utilizar de modo lectura.

Regresemos al ejemplo del formulario que vimos en la sección de componentes con estado y sin estado del que hablamos en un artículo pasado. En este ejemplo, creamos el componente App  y sobre este montamos un formulario de registro de empleados. Ahora bien, ¿qué pasaría si quisiéramos que la acción de guardar la controlara el componente padre? La solución es simple, el componente padre tendría que enviar como props la función de guardar, para que el hijo la ejecute.

Lo primero será pasar el formulario a un componente externo, por lo cual, crearemos un componente llamado EmployeeForm , el cual se verá como a continuación:

import React from 'react'

class EmployeeForm extends React.Component{

  constructor(){
    super(...arguments)
    this.state = {
      firstName: '',
      lastName: '',
      age: ''
    }
  }

  componentDidMount(){
    this.refs.firstName.focus();
  }

  handleChanges(e){
    let newState = Object.assign(
      this.state, {[e.target.id]: e.target.value})
    this.setState(newState)
  }

  saveEmployee(e){
    this.props.save(this.state)
  }

  render(){
    return (
      <form>
        <label htmlFor='firstName'>Nombre</label>
        <input ref='firstName' id='firstName'
          type='text' value={this.state.firstName}
          onChange={this.handleChanges.bind(this)}/>
        <br/>
        <label htmlFor='lastName'>Apellido</label>
        <input id='lastName' type='text' value={this.state.lastName}
          onChange={this.handleChanges.bind(this)}/>
        <br/>
        <label htmlFor='age'>Edad</label>
        <input id='age' type='number' value={this.state.age}
          onChange={this.handleChanges.bind(this)}/>
        <br/>
        <button onClick={this.saveEmployee.bind(this)}>Guardar</button>
      </form>
    )
  }
}
export default EmployeeForm

Este componente tiene dos cosas a resaltar, lo primero es que agregamos un botón (línea 44), el cual, al ser presionado, ejecutar la función saveEmployee  declarada en este mismo componente, lo segundo es la función saveEmployee  que declaramos en la línea 24, la cual ejecuta la función save  enviada por el parent como prop.

Por otra parte, tenemos al componente App  que será el padre del componente anterior:

import React from 'react'
import { render } from 'react-dom'
import EmployeeForm from './EmployeeForm'

class App extends React.Component{
  
  save(employee){ 
    alert(JSON.stringify(employee))
  } 
		
  render(){
    return (
	  <EmployeeForm save={ this.save.bind(this) }/> 
	) 
  } 
} 
render(<App/>, document.getElementById('root'));

Podemos ver que al momento de crear el componente EmployeeForm , este le envía como una prop la función save . De esta forma, cuando el componente EmployeeForm , ejecute la propiedad, se lanzará una alerta con los datos capturados (línea 8).

Cuando es necesario “bindear” una función con una prop o queremos utilizar una función en un evento como onClick , onChange , etc. es necesario siempre empezar con this , y finalizar con binding(this)  como se ve a continuación this.<function>.bind(this) .

Debido a que un componente padre puede enviar cualquier propiedad a sus componentes hijos, React proporciona un mecanismo para validar las propiedades que espera un determinado componente, validar su estructura, tipo de dato y definir un valor por default, para eso existen dos términos llamados PropTypes y DefaultProps, de los cuales estaremos hablando en otra ocasión.

Conclusiones

Como hemos visto, las propiedades son el único método que ofrece React para transmitir información de forma descendente, desde un componente padre hacia sus hijos, sin embargo, existe otras alternativas como Redux, una librería que permite gestionar la información de la aplicación totalmente desacoplada de los componentes.

The post React Props (Propiedades) appeared first on Oscar Blancarte - Software Architecture.

Una característica de los componentes, es su estado, el cual determina tanto la información que se muestras en pantalla, hasta como se representa la información, de esta forma, el estado puede cambiar la apariencia gráfica de un componente y la forma en que se muestra la información. Un ejemplo básico de un estado, es, por ejemplo, un formulario que puede pasar de modo lectura a escritura.

Como vemos en la imagen, una componente puede pasar de un formulario que no permite la edición, a otro donde los valores se muestran en <input>  para que el usuario pueda cambiar sus valores. Al guardar los cambios, el componente puede regresar a su estado principal. No vamos a entrar en los detalles de lo que es un estado, ni cómo es posible modificarlo, pues eso lo podremos para más adelante, por ahora, solo quiero que tengas una idea de lo que es el estado y cómo puede afectar la forma en que se muestra un componente.

Componentes sin estado

Este tipo de componentes son los más simples, pues solo se utilizan para representar la información que les llega como parámetros. En algunas ocasiones, estos componentes pueden transformar la información con el único objetivo de mostrarla en un formato más amigable, sin embargo, estos compontes no consumen datos de fuentes externas ni modifican la información que se les envía.

Los componentes sin estado también son llamados componentes de presentación, pero son mejor conocidos como Stateless Component por su nombre en inglés.

Para ejemplificar mejor este tipo de componentes vamos a analizar el siguiente archivo llamado ItemList.js , el cual representará un ítem de una lista de productos:

import React from 'react' 
class ItemList extends React.Component{ 
  constructor(props){ 
	super(props) 
  } 
  
  render(){ 
    return( 
	  <li>{this.props.product.name} - {this.props.product.price}</li> 
	) 
  }
 } 
 export default ItemList

Este componte utiliza algo que hasta ahora no habíamos utilizado, las Props, las cuales son parámetros que son enviados durante la creación del componente. En este caso, se le envía una propiedad llamada product, la cual debe de tener un nombre (name ) y un precio (price ).

Las propiedades o simplemente props, son parámetros que se le envían a un componente durante su creación. Los props pueden ser datos para mostrar o información para inicializar el estado. Como regla general, las props son inmutables, lo que quieres decir, que son de solo lectura. Para obtener las propiedades de un componente es necesario obtenerlas mediante el prefijo this.props , seguido del nombre de la propiedad.

Observemos que el componente ItemList  solo muestra las propiedades que recibe como parámetro, sin realizar ninguna actualización sobre ella.
Para completar este ejemplo, crearemos el componente App  que quedará de la siguiente manera:

import React from 'react' 
import { render } from 'react-dom' 
import ItemList from './ItemList' 

class App extends React.Component{ 
  render(){
    let items = [{ 9. name: 'Item 1', 10. price: 100 11. }, { 12. name: 'Item 2', 13. price: 200 14. }] 
	
	return ( 
	  <ul> 
	    <For each="item" index='index' of={ items }> 
		  <ItemList product={item}/>
		</For> 
	  </ul> 
	)
  } 
}

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

Veamos que hemos creado un array de ítems (línea 8), los cuales cuentan con un nombre y un precio. Seguido, iteramos los ítems para crear un componente <ItemList>  por cada ítem de la lista, también le mandamos los datos del producto mediante la propiedad product , la cual podrá ser accedida por el componente <ItemList>  utilizando la instrucción this.props.product .

Otra cosa importante a notar, es la línea 3, pues en ella se realiza la importación del nuevo componente para poder ser utilizando.

Componentes con estado

Los componentes con estado se distinguen de los anteriores, debido a que estos tienen un estado asociado al componente, el cual se manipula a mediad que el usuario interactúa con la aplicación. Este tipo de componentes en ocasiones consumen servicios externos para recuperar o modificar la información.

Un ejemplo típico de componentes con estados, son los formularios, pues es necesario ligar cada campo a una propiedad del estado, el cual, al modificar los campos afecta directamente al estado. Veamos cómo quedaría un componente de este tipo. Regresaremos al componente App  y lo dejaremos de la siguiente manera:

import React from 'react' 
import { render } from 'react-dom' 
import ItemItem from './ItemList' 

class App extends React.Component{ 
  constructor(){ 
    super(...arguments) 
       this.state = { 
       firstName: '', 
       lastName: '', 
       age: '' 
      }  
  } 
  
  handleChanges(e){ 
    let newState = Object.assign(this.state, {[e.target.id]: e.target.value}) 
    this.setState(newState) 
  } 

  render(){ 
    return ( 
      <form> 
        <label htmlFor='firstName'>Nombre</label> 
        <input id='firstName' type='text' value={this.state.firstName}  onChange={this.handleChanges.bind(this)}/>
        <br/> 
        <label htmlFor='lastName'>Apellido</label> 
        <input id='lastName' type='text' value={this.state.lastName}  onChange={this.handleChanges.bind(this)}/> 
        <br/> 
        <label htmlFor='age'>Edad</label> 
        <input id='age' type='number' value={this.state.age}  onChange={this.handleChanges.bind(this)}/> 
      </form> 
    ) 
  } 
} 
render(<App/>, document.getElementById('root'));

No vamos a entrar en detalle acerca de los estados, ni cómo se actualizan, más adelante lo veremos, por lo que solo te cuento rápido que está pasando.
Primero que nada, vemos que en el constructor se establece el estado inicial del componente, el cual tiene un firstName  (nombre), lastName  (apellido) y ege  (edad). Los cuales están inicialmente en blanco.
Seguido tenemos la función genérica handleChanges  que modifica el estado a medida que vamos capturando valores en los campos de texto. Y finalmente en el método render , retornamos 3 campos, correspondientes a las 3 propiedades del estado, adicional, cada campo está ligado a una propiedad del estado mediante la propiedad value . Cuando el usuario captura valores en los campos, se dispara la función handleHanges  para actualizar el estado.

Seguramente al ver esta imagen, no quede muy claro que está pasando con el estado, es por eso que utilizaremos el plugin React Developer Tools que puedes descargar desde chrome para analizar mejor como es que el estado se actualiza. Para esto, nos iremos al inspector, luego seleccionaremos el Tab React:

Una vez en el tab React, seleccionamos el tag <App>  y del lado izquierdo veremos las propiedades y el estado. Con el inspector abierto, actualiza los campos de texto y verás cómo el estado también cambia.

Se le conoce como componente con estado, a aquellos componentes que tiene estado y que adicional, manipulan el estado a medida que el usuario interactúa con ellos. Estos componentes también son conocidos como Componentes Contenedores, pero es más común llamarlos Stateful Components, por su nombre en inglés.

Conclusiones

Como hemos podido analizar en este artículo, existen dos tipos de componentes, con estado y sin estado, los cuales podrán ser utilizados según las necesidades que tengamos. Recordemos que los componentes sin estado solo se utilizan para representar las propiedades enviadas como parámetros o mostrar una estructura estática, mientras que los componentes con estados permiten interacturar con un estado que representa la información interna del componente, lo que les permite afectar la forma en que se ven y la como muestran los datos antes el usuario.

The post Componentes con estado y sin estado appeared first on Oscar Blancarte - Software Architecture.

Es impresionante pensar como JavaScript, un lenguaje desarrollados en los 80’s con el único objetivo proporcionar validaciones de formularios y alertas a los usuarios, se ha convertido en el lenguaje de programación más utilizado en el mundo, sobre pasando a lenguajes tan populares como Java o Python y ejecutándose prácticamente en todos lados, desde FrontEnd, BackEnd y Dispositivos Móviles.

The post Javascript se está comiendo el mundo [VIDEO] appeared first on Oscar Blancarte - Software Architecture.

Si todavía no sabes que es React o la forma en que este trabaja, te invito a que veas una Introducción a React JS que escribí hace unos días, en donde hablo de las ventajas y desventajas, así de porqué es tan exitoso este framework.

Tenemos básicamente 3 formas de implementar React en nuestro proyecto, la las cuales son mediante CDN, utilerías (boilerplate) o una configuración manual, aunque en la práctica y para desarrollos profesionales, solo se utilizan las dos últimas opciones, sin embargo, aquí vamos a explicar las 3 formas para que las conozcas y sea tu quien identifique qué forma se adapta mejor a tus necesidades.

Instalar React con CDN

Este es el método más simple, pues solo requiere importar React mediante el tag <script> directamente sobre el documento HTML en donde se requiere. Veamos un ejemplo:

<!DOCTYPE html>  
<html lang="es">  
  <head>  
    <title>Hello World React CDN</title>  
  </head>  
  <body>  
    <div id="root"></div>  
    <script src="https://fb.me/react-15.0.0.js"></script>  
    <script src="https://fb.me/react-dom-15.0.0.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>  
    <script cross src="App.js" type="text/babel"></script>  
  </body>  
</html>  

En el documento anterior podemos apreciar un documento HTML simple, sin nada más que una división <div> y 4 scripts, de los cuales, los dos primeros son necesario para tener a React disponible en nuestra página. El tercero, importa Babel, el cual es un transpilador que nos permite utilizar JSX para desarrollar con React.

JSX o JavaScript XML, es un lenguaje que extiende a JavaScript para hacerlo más potente y es el estándar para el desarrollo web con React, un que también es posible utilizar JavaScript puro.

El cuarto script (App.js) es un archivo Javascript que hemos creado para agregar toda la lógica de React y separarla del documento HTML, un que es posible insertar directamente el código dentro de la etiqueta <script> ahorrándonos la creación de un archivo adicional.

El archivo App.js se ve de la siguiente forma:

var HelloWorld = React.createClass({    
  render: function() {    
    return (    
      <h1>Hello World CDN</h1>    
    )    
  }    
});    
    
ReactDOM.render(    
  <HelloWorld/>,    
  document.getElementById('root')    
);

En las líneas 1 a 7 creamos un Componente llamado HelloWorld el cual retornará una etiqueta <h1> con la frase, “Hello World CDN”.

Finalmente, en las líneas 9 a 12 hacemos que React muestre nuestro componente dentro del elemento con id = root, el cual lo tenemos definido en el documento index.html.

Clave aclarar que este método es ajeno a cualquier web, ya sea Apache, NodeJS, ISS, o cualquier otro, por lo que puede ser montado en el que sea, el cual dará como resultado lo siguiente:

Instalar React con utilerías

Este segundo método es recomendado únicamente cuando vamos a desarrollar el FrontEnd, y asumimos que todos los servicios o recursos WEB ya está disponibles para ser consumidos.

Para este método será necesario instalar NodeJS + NPM, para lo cual, tendremos que ir a la página oficial de NodeJS y descargarlo. https://nodejs.org.

Puedes ver una introducción a NodeJS en el siguiente artículo.

Una vez que tenemos NodeJS instalado, deberemos instalar la utilería create-react-app mediante la ejecución del siguiente comando en la terminal: npm install -g create-react-app. Una vez instalada la utilería, deberemos ubicarnos mediante la terminal en la carpeta en la queramos crear el proyecto y ejecutar el comando: create-react-app <app-name>, donde <app-name> deberá ser el nombre del proyecto. Este comando tardará un momento, principalmente si es la primera vez que lo ejecutamos, pues descargará algunas dependencias.

Una vez terminada la instalación veremos lo siguiente:

El siguiente paso será cambiar de directorio al creado por la nueva aplicación, en nuestro caso app-test, para lo cual ejecutamos el comando cd app-test, y finalmente ejecutamos el comando npm start.

Esta acción levantará un servidor NodeJS en el puerto 3000, por lo que podremos ir al navegador y entrar a http://localhost:3000.

Como resultado, veremos la pantalla anterior y solo nos restará editar el archivo App.js para personalizar nuestra aplicación.

Instalar React manualmente.

El tercer método es el más complicado, pues requiere que configuremos todo el proyecto paso a paso, pero también es el más recomendado, pues permite que configurar cada aspecto de React y nuestro servidor NodeJS.

Este método es recomendado cuando queremos desarrollar el FrontEnd, pero adicional, requerimos desarrollar funcionalidad del lado del servidor. Muy utilizado para crear el FrontEnd + BackEnd.

Para iniciar este método, es necesario ubicarnos mediante la terminal en la carpeta en donde queremos crear el proyecto. Una vez allí, ejecutaremos el comando npm init -y. Este comando creará solamente el archivo package.json, el cual es el inicio para cualquier proyecto con NodeJS.

Lo siguiente será instalar todas las dependencias necesarias mediante npm. Es posible instalar todas las dependencias de una por una o agregar todas las dependencias al archivo package.json e instalarlas todas de una. En nuestro caso, actualizaremos el archivo package.json para que se vea de la siguiente manera:

{  
  "name": "app-test",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1"  
  },  
  "keywords": [],  
  "author": "",  
  "license": "ISC",  
  "devDependencies": {  
    "babel-core": "^6.24.1",  
    "babel-loader": "^7.0.0",  
    "babel-preset-es2015": "^6.24.1",  
    "babel-preset-react": "^6.24.1",  
    "webpack-dev-middleware": "^1.12.1",  
    "webpack": "^3.8.1"  
  },  
  "dependencies": {  
    "express": "^4.16.2",  
    "react": "^16.1.1",  
    "react-dom": "^16.1.1"  
  }  
}

Y continuaremos con la ejecución del comando npm install, este simple paso instalará todas las dependencias listadas en el archivo de forma automática.

Podemos apreciar dos secciones en el archivo, devDependencies que es para librerías para desarrollo y dependencies, las cuales estarán disponibles en todo momento, ya sea desarrollo o producción.

Las librerías que inician con babel-* son para permitir la transpilación de JSX a JavaScript nativo, mientras que Webpack y Webpack-dev-middleware son para el empaquetamiento del proyecto y de la compilación de los archivos (respectivamente).

Las librerías react y react-dom son las indispensables para utilizar react, mientras que express es un framework para desarrollo web con NodeJS.

Para que Webpack funcione, será necesario crear el archivo webpack.config.js sobre la raíz del proyecto, el cual se verá de la siguiente manera:

module.exports = {    
  entry: [    
    __dirname + "/app/App.js",    
  ],    
  output: {    
    path: __dirname + "/public",    
    filename: "bundle.js",    
    publicPath: "/public"    
  },    
        
  module: {    
    loaders: [{    
      test: /\.jsx?$/,    
      exclude: /node_modules/,    
      loader: 'babel-loader',    
      query:{    
        presets: ['es2015','react']    
      }    
    }]    
  }    
};

En este archivo tenemos 3 secciones, entry, que permite definir el punto de inicio de la aplicación, en este caso el archivo App.js.

Output, donde configuramos donde quedará los archivos empaquetados por Webpack, en este caso, definimos que estará disponibles en el path /public y que el archivo empaquetado se llamará public.js.

La sección module nos ayuda a definir como se llevará a cabo la transpilación y los archivos a procesar, en este caso, definimos que tome todos los archivos *.js y que excluya los que estén en la carpeta node-module, también indicamos que utilizará el modulo babel-loader para transpilar los archivos.

El siguiente paso será crear nuestro archivo index.html, el cual se verá de la siguiente manera:

<!DOCTYPE html>    
<html lang="es">    
  <head>    
    <title>Hello World React CDN</title>    
  </head>    
  <body>    
    <div id="root"></div>    
    <script type="text/javascript" src="/public/bundle.js"></script>    
  </body>    
</html>

Podemos ver que este archivo se ve más simple que en el primer método que analizamos, pues solo requiere hacer referencia al archivo bundle.js, el cual tiene toda la aplicación transpilada y empaquetada. Adicional, es necesario tener un div con id=root, para que sirve como punto de montado para React.

Los últimos pasos será crear nuestros archivos de React, me refiero a App.js y a nuestro componente HelloWord.js dentro de la carpeta /app:

import React from 'react'    
import { render } from 'react-dom'    
import HelloWorld from './HelloWorld'    
    
render((    
  <HelloWorld/>    
), document.getElementById('root'))

La función render es la encargada de montar el componente HelloWord dentro del elemento con ID =root

import React from 'react'    
    
class HelloWorld extends React.Component{    
    
  render(){    
    return(    
      <h1>Hello World!</h1>    
    )    
  }    
}    
export default HelloWorld

En este punto ya tenemos creada la aplicación en React, sin embargo, es necesario crear un servidor con NodeJS para que responda a las peticiones del puerto 3000 , para ello, deberemos crear el archivo server.js  en la raíz del proyecto:

var express = require('express');
var app = express();
var path = require('path')
var webpack = require('webpack')
var config = require('./webpack.config')
var compiler = webpack(config)

app.use('/public', express.static(__dirname + '/public'))
app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
}))

app.get('/*', function (req, res) {
    res.sendFile(path.join(__dirname, 'index.html'))
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
});

A grandes rasgos, este archivo lo que hace es responder a todas la peticiones en la url /* , es decir, todo lo que venga después de la raíz del dominio y enviar el archivo index.html , adicional, utiliza el módulo webpack-dev-middleware  para “Transpilar” la aplicación en tiempo real y crear el archivo bundle.js . En este punto, solo restaría ejecutar la aplicación con el comando node ./server.js . El componente HelloWord solamente imprime Hello Word! En pantalla.

Finalmente, código completo de la aplicación lo puedes encontrar en el siguiente repositorio de GitHub: https://github.com/oscarjb1/blog-react-hello-world

Conclusiones:

Instalar React puede parecer un reto la primera vez que lo utilizamos, pues no existe un IDE especial para React que nos ayude en la creación y configuración del proyecto, como es el caso de Java con Eclipse y NetBeans o C# con Visual Estudio. Sin embargo, una vez que entendemos como instalarlo y configurarlo ya no representa más un problema.

The post Hello World con React appeared first on Oscar Blancarte - Software Architecture.