Anteriormente, en nuestra primera parte del tutorial de React JS para principiantes, habíamos comenzado a ver los puntos básicos de esta librería. Tanto su funcionalidad como su forma de trabajo, e incluso logramos realizar algunos ejemplos sencillos para ir de poco acostumbrándonos a su sintaxis.
En el tutorial de hoy aprenderemos a realizar un correcto setup, ya que anteriormente habíamos realizado nuestras primeras pruebas con JSXTransformer, algo que no es recomendable debido a que es un componente que se encuentra obsoleto.
Y también veremos aún más a fondo como podemos crear componentes y renderizarlos en nuestra aplicación.
Configurando nuestro ambiente de trabajo
El primer paso para poder comenzar a trabajar, será contar con la última versión de Node JS. Si aún no la tienes instalada, puedes hecharle un vistazo a nuestra Intoducción a NodeJS, en donde podrás ver exactamente como se instala y utiliza éste intérprete de Javascript.
Una vez que contamos con Node.js, ya podemos comenzar con el setup de nuestro proyecto. Para ello, corremos los siguientes comandos en nuestra terminal. Recuerda cambiar [AppDirectorio] por el nombre de tu aplicación.
npm install -g create-react-app create-react-app [AppDirectorio] cd [AppDirectorio] npm start
Con esto ya tendríamos nuestra aplicación base corriendo en nuestra PC, a la cual podemos acceder desde el navegador a través de la dirección «http://localhost:3000/».
Allí veremos algo como lo siguiente:
Y tal como está escrito, podremos ir modificando src/App.js e ir viendo los cambios que hacemos apenas guardemos los archivos. Ya que React JS irá mostrándonos los cambios en el instante.
Modificando los Archivos
En este caso, para las pruebas, nos estaremos centrando en tres de los archivos que han sido creados por la aplicación. App.js, que será quien contiene nuestro componente, Index.js, que será quien lo mostrará e Index.html, la vista que nos será mostrada en el navegador.
Sobre App.js
Como primera instancia, si revisamos nuestro App.js, veremos que contamos con un componente allí creado, además de los Imports claro está, sumamente necesarios para que nuestra aplicación funcione.
Componente en App
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
Éstos famosos componentes son quienes les dicen a React, qué es lo que tiene que renderizar. Como vemos además, el HTML allí indicado, es bastante similar al que escribimos en nuestro día a día cuando creamos aplicaciones, por lo que no nos debería de resultar muy difícil comprender como funciona dicho componente.
Algo que sí puede diferir, dependiendo del lenguaje con el que usualmente trabajes, es el mostrado de variables. Que en este caso por ejemplo, el PATH de nuestra imagen, la estamos mostrando a través de una, y la sintaxis es siempre {nombreVariable}
Nuestro Index.js
Por otro lado, si le echamos un vistazo a nuestro index.js
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Veremos que éste, no hace más que renderizar aquello que nuestro componente App crea.
Algo bastante interesante que podemos ver ya aquí, es el hecho de la gran portabilidad que hay, debido a que podemos utilizar estos componentes básicamente donde deseemos con no más de una línea de código. Y además de ello, React JS, nos permite obtener un código Javscript realmente limpio, algo que es bastante difícil en este lenguaje.
Recuerda igualmente, que para poder utilizar el componente, es también necesario importarlo. Si te fijas en los import de nuestro archivo Index.js por ejemplo, verás la línea de importación.
import App from './App';
«Hello World» en ReactJS.
Lo único que básicamente debemos cambiar, para crear nuestro ejemplo de «Hello World» es lo que retorna App, que al fin y al cabo, será lo que Index.js mostrará en nuestra vista.
De modo que nuestro App.js nos quedaría de la siguiente forma:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">Hello World</div>
);
}
}
export default App; Como vemos, simplemente hemos cambiado el HTML dentro del componente para mostrar algo diferente.
En nuestro navegador, habremos eliminado todo lo que teníamos y dejado solamente un mensaje con un «Hola Mundo«. Por lo que nos debería de quedar de la siguiente forma:
Ahora veamos como podemos pasarle una variable a una lista por ejemplo
Creemos un componente lista de la siguiente forma en nuestro App.js
class App extends Component {
render() {
return (
<div className="todo-list">
<h1>Listado de tareas para {this.props.name}</h1>
<ul>
<li>Hacer las Compras</li>
<li>Ir a trabajar</li>
<li>Pasear el perro</li>
</ul>
</div>
);
}
}
Como vemos, le estaríamos pasando de alguna forma, el nombre de la persona que deberá realizar las tareas. Para ello, debemos de llamar a nuestro componente de la siguiente forma:
ReactDOM.render(<App name="José"/>, document.getElementById('root'));
Ya en este punto, nos podemos dirigir a nuestro navegador en donde deberíamos ver lo siguiente:
Realmente cabe destacar que React JS es bastante increíble en este sentido, ya que al crear componentes, no solamente podemos incluirlos en donde queramos en nuestra aplicación, sino que nos deja el código mucho más limpio y nos evita tener que estar copiando y pegando en diferentes lados el mismo código, algo que sin dudas mejora a futuro el mantenimiento de la aplicación.
Además, nos permite solamente recargar ciertos componentes en nuestra vista, y evitar tener que recargarle al usuario partes de nuestra web que ni siquiera han cambiado!
Conclusion
Como vemos, crear componentes en React JS es algo sumamente sencillo. No solamente la sintaxis es muy fácil de entender y utilizar, sino que además, dentro de nuestro componente podemos sin problemas utilizar HTML tal y como estamos acostumbrados a hacerlo en Javascript. Cabe destacar igualmente, que en este caso, queda mucho más prolijo ya que no tenemos que estar escapando espacios, ni colocando comillas innecesarias.
¿Te interesa seguir aprendiendo más ReactJS? Sigue la parte 3 del tutorial: Ejemplos de la librería ReactJS