React JS en Español Primeros Pasos
React JS en Español Primeros Pasos
Primeros pasos
Ahora nos toca preparar nuestro terreno para poder desarrollar con React js, tal cual se
recomienda en su guía oficial, el uso de estándar CommonJS, para ello puedes usar
Browserify o Webpack.
En primer lugar vamos a definir nuestro árbol de carpetas necesarias para empezar.
|-- 1-hello-world
|-- app
|-- components
|-- main.jsx
|-- public
|-- index.html
|-- package.json
|-- webpack.config.js
REACT JS
Es el paquete que nos trae toda la API de React js.
REACT-DOM
BABEL-CORE
BABEL-LOADER
BABEL-PRESET-ES2015
BABEL-PRESET-REACT
WEBPACK
Los conceptos de estos paquetes se quedan muy cortos, es por eso que se explicarán a
detalle sobre estos paquetes en nuestros próximos posts.
Un html simple
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="build.js"></script>
</body>
</html>
"scripts": {
"build": "webpack -w",
},
module.exports = {
entry: './app/components/main.jsx',
output: {
path: './public/',
filename: "build.js",
},
module: {
loaders: [
{
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
Con esto tenemos todo listo para nuestros siguientes ejemplos, sólo deben ejecutar npm run
build para transpilarlo.
COMPONENTES EN REACT JS
Un componente viene a ser cada uno de los elementos de nuestra aplicación, como por
ejemplo: el header, footer, botones, entre otros elementos de nuestra UI.
ReactDOM.render(
<HelloWorld />,
document.getElementById('container')
);
ES6 CLASSES
ReactDOM.render(
<HelloWorld />,
document.getElementById('container')
);
SINTAXIS JSX
Es una extensión de la sintaxis XML, claro está que no es la intención de ser implementado
por motores o navegadores.
Está destinado a ser utilizado por varios preprocesadores(transpiler) para transformarlo en
un estándar ECMAScript.
No necesariamente tiene que usar JSX con React js,si usted desea puede usar solo
javascript, claro está que se recomienda utilizar JSX por que es más legible a la hora de
desarrollar.
Sin JSX
Con JSX
VIRTUAL DOM
A veces modificar el DOM termina siendo un proceso muy costoso, por suerte React js
hace todo este trabajo por nosotros, pero ¿Comó lo hace?, Acá es donde entra el Virtual
DOM, pero ¿Qué es?, en React js los componentes no generan HTML directamente, lo que
generan es código Javascript, una descripción virtual del DOM, al realizar el renderizado,
React js utiliza un algoritmo de diff para comparar la salida de los componentes con el
virtual DOM actual para ver qué debe cambiar en el DOM real, esto lo hace muy
eficientemente, ya que sólo se realizarán las operaciones que sean estrictamente necesarias.
PROPS
Al igual que hemos visto en los elementos html, donde podías agregarle atributos en su
etiqueta de entrada, también hay formas para personalizar los componentes de react js,
digamos que las propiedades son para los componentes de React js como los atributos son a
los elementos html.
(ES5)
ReactDOM.render(
<MyComponent name="Jupiter" />,
document.getElementById('container')
);
(ES6)
ReactDOM.render(
<MyComponent name="Jupiter" />,
document.getElementById('container')
);
ReactDOM.render(
<MyComponent />,
document.getElementById('container')
);
(ES6)
MyComponent.defaultProps = {
name:'Saturno'
};
ReactDOM.render(
<MyComponent />,
document.getElementById('container')
);
(ES5)
render: function() {
return (<div>My Component {this.state.name}</div>);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('container')
);
(ES6)
ReactDOM.render(
<MyComponent />,
document.getElementById('container')
);
Que pasa si queremos setear nuestro state en un futuro con alguna acción, es donde el
método this.setState entra en escena, este es el método principal que se utiliza para hacer
cambios en la interfaz de usuario.
(ES5)
})
ReactDOM.render(
<MyComponent />,
document.getElementById('container')
);
(ES6)
update(){
this.setState({message:'Saturno'})
}
render(){
return <div>
<span>My Component
{this.state.message}<br></br></span>
<button onClick={this.update}>click me</button>
</div>
}
}
MyComponent.defaultProps = {
val:0
};
ReactDOM.render(
<MyComponent />,
document.getElementById('container')
);
MOUNTING
UPDATING
UNMOUNTING
MOUNTING: COMPONENTWILLMOUNT
(ES5)
ReactDOM.render(
<MyComponent />,
document.getElementById('container')
);
(ES6)
MOUNTING: COMPONENTDIDMOUNT
(ES5)
render:function(){
return (<div>MyComponent</div>)
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('container')
);
(ES6)
render(){
return <div>MyComponent</div>
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('container')
);
UPDATING: COMPONENTWILLRECEIVEPROPS
Este método es invocado cuando un componente está recibiendo nuevas props. Este método
no es invocado en el primer render.
(ES5)
(ES6)
import React from 'react';
import ReactDOM from 'react-dom';
UPDATING: SHOULDCOMPONENTUPDATE
Se invoca antes del render, cuando se estén recibiendo nuevos props o states.
Siempre devolverá true, si hacemos que retorne false evitaremos el render hasta un nuevo
cambio en las props o state.
(ES5)
shouldComponentUpdate:function(nextProps,nextState){
console.log(nextProps);
return nextProps.val % 2 == 0;
},
componentWillUpdate:function(){
console.log('Update MyComponent...');
},
update:function(){
ReactDOM.render(
<MyComponent val={this.props.val + 1}/>,
document.getElementById('container')
);
},
render:function(){
return (<div>
<span>My Component contador:</span>
<button onClick={this.update}>{this.props.val}</button>
</div>)
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('container')
);
(ES6)
shouldComponentUpdate(nextProps,nextState){
console.log(nextProps);
return nextProps.val % 2 == 0;
}
componentWillUpdate(){
console.log('Update MyComponent...');
}
update(){
ReactDOM.render(
<MyComponent val={this.props.val + 1}/>,
document.getElementById('container')
);
}
render(){
return <div>
<span>My Component contador:</span>
<button onClick={this.update}>{this.props.val}</button>
</div>
}
}
MyComponent.defaultProps = {
val:0
};
ReactDOM.render(
<MyComponent />,
document.getElementById('container')
);
En este ejemplo solo nos renderiza el componente cuando this.props.val dividido entre
dos, el cociente sea 0, para este ejemplo hacemos uso del evento onClick de React js.
UPDATING: COMPONENTWILLUPDATE
Se invocará antes del render, justo antes que tu componente se haya actualizado (recibiendo
nuevas props o state).
Excelente para procesos que necesiten hacer antes de hacer la actualización.
(ES5)
(ES6)
ReactDOM.render(<MyComponent
name="jupiter"/>,document.getElementById('container'));
ReactDOM.render(<MyComponent
name="neptuno"/>,document.getElementById('container'));
UPDATING: COMPONENTDIDUPDATE
(ES5)
(ES6)
ReactDOM.render(<MyComponent
name="jupiter"/>,document.getElementById('container'));
ReactDOM.render(<MyComponent
name="neptuno"/>,document.getElementById('container'));
UNMOUNTING: COMPONENTWILLUNMOUNT
(ES5)
});
ReactDOM.unmountComponentAtNode(document.getElementById('comp
onent'));
}
render:function(){
return(
<div>
<button onClick={this.mount.bind(this)}>Mount
component</button>
<button onClick={this.unmount.bind(this)}>Unmount
component</button>
<div id="component"></div>
</div>
)
}
});
ReactDOM.render(<MyApp />,
document.getElementById('container'));
(ES6)
componentWillMount(){
console.log('Mount');
}
componentWillUnmount(){
console.log('Unmount');
}
render(){
console.log('Rendering');
return <div>I am component</div>
}
}
mount(){
ReactDOM.render(<MyComponent
/>,document.getElementById('component'));
}
unmount(){
ReactDOM.unmountComponentAtNode(document.getElementById('comp
onent'));
}
render(){
return(
<div>
<button onClick={this.mount.bind(this)}>Mount
component</button>
<button onClick={this.unmount.bind(this)}>Unmount
component</button>
<div id="component"></div>
</div>
)
}
}
ReactDOM.render(<MyApp />,
document.getElementById('container'));
En este post se ha tratado de hablar de todo un poco para que puedas empezar con React js,
los ejemplos y el árbol de directorio empleado para el desarrollo de los ejemplos, sólo
fueron empleados para ello, usted puede emplear el que sea de su agrado.
Como ven aparte de los puntos expuestos se ha hablado de otros temas de React js, como
eventos y un método de desmontaje de componentes, como también sobre la sintaxis ES6
para algunos ejemplos, diferencias que no an sido expuestas con respecto a ES5, temas que
abarcaremos en otros posts, sin más muchas gracias por haber leído este post.
Si alguno de los ejemplos no les funcionó pueden revisar el repositorio del post donde
podrás encontrar todos los ejemplos mostrados.
Repositorio en github.