React.js, como ya vimos en la entrada anterior, es una librería para crear SPA (aplicaciones de una sola página) basadas en componentes. Los componentes nos permiten dividir nuestra app en elementos independientes más pequeños. Los cuales, podremos reutilizar en cualquier otra parte de la app.
Crear componentes
Antes de crear el primer componente, hay que decir que hay varias maneras de crearlos:
- Crear una función arrow de ES6 o una función normal. Estos componentes serían los llamados Stateless Components, porque simplemente aceptan como parámetro props y retorna un elemento de React.
- Crear una clase de ES6 que herede de React.Component. Estos componentes serían los llamados Class Components. Que tienen más características que los anteriores, se accede a través del this a las props y no por parámetro, tienen un state que también se accede por this, pueden tener métodos, entre otras.
Antes de continuar, decir que el tema de las propiedades (props) y estado (state) de un componente lo veremos en las siguientes entradas.
Una vez explicado esto, vamos a crear nuestro primer componente. Primero, crearemos un componente con una clase ES6 y después uno con una función. Los componentes que vamos a crear van a ser muy sencillos, simplemente van a mostrar texto. Serán un Header y un Footer.
Primero de todo, vamos a crear un directorio que se llame components en src y dentro creamos un fichero llamado Header.js con el siguiente código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React from "react"; // class component class Header extends React.Component { render() { return ( <header> <div>Logo</div> <nav> <a href="#/">Home</a> <a href="#/">Blog</a> <a href="#/">Photos</a> <a href="#/">Contact</a> </nav> </header> ); } } export default Header; |
Estamos creando una clase ES6 que hereda de React.Component y tiene un método render . En este método irá el contenido visual del componente, es decir, lo que queremos que se muestre cuando llamemos al componente. En este caso, es un header con un menú. Al final del archivo, exportamos la clase.
Si te fijas, estamos utilizando etiquetas HTML dentro del método render, pero no es HTML, es JSX. JSX es una sintaxis sugar para los componentes de React que nos permite escribir HTML dentro de JS. El compilador se encargará de transformar JSX a JS ( React.createElement() ) y así nuestro código será más legible y sencillo de escribir. Aunque, obviamente, su uso es opcional, se podría hacer perfectamente con JS, sin necesidad de usar JSX.
Lo que nos falta es mostrarlo, para ello vamos al fichero App.js que es otro class component que vamos a utilizar como componente principal digamos y tendrá que quedar así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React, { Component } from "react"; import Header from "./components/Header"; class App extends Component { render() { return ( <div> <Header /> </div> ); } } export default App; |
Si te fijas, hemos quitado todo que venía que no íbamos a utilizar, también he borrado el logo.svg y el App.css. Importamos el Header del archivo y lo añadimos dentro de un <div>.
El resultado será el siguiente:
Veremos el contenido que hemos puesto y todo lo demás en blanco, porque aún no hemos puesto ningún estilo, ni nada más.
Ahora vamos a crear el otro componente con una función arrow. Creamos otro fichero dentro del directorio creado anteriormente, llamado Footer.js y le añadimos el siguiente código:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React from "react"; // function component const Footer = props => { return ( <footer> <p>Copyright ©</p> </footer> ); }; export default Footer; |
Lo añadimos a App.js de igual manera que en el anterior:
|
1 2 3 4 5 6 7 8 9 10 |
import Footer from "./components/Footer"; ... <div> ... <Footer /> </div> |
Y el resultado sería el siguiente:
Si quieres ver el ejemplo de esta entrada en vivo, puedes verlo en este enlace: https://repl.it/@vreaxe/Reactjs-Primer-Componente
En la siguiente entrada, veremos qué son y cómo funcionan las propiedades de los componentes y le daremos un poco de estilo a los componentes creados en esta entrada.
-
- https://reactjs.org/docs/components-and-props.html
- https://reactjs.org/docs/introducing-jsx.html
- https://reactjs.org/docs/jsx-in-depth.html
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR
Lo primero gracias por el tutorial.
Y solo comentar que el enlace a la siguiente entrada está mal.
Saludos.
Hola Carlos,
Muchas gracias por tu comentario.
El enlace de «siguiente entrada» va a la entrada publicada después de la actual. En este caso, la siguiente entrada no es la #3 de React.js, por eso el enlace te lleva a otra entrada. Para ir a la siguiente entrada de una serie, puedes ir desde el bloque que hay en el principio (después del título), si haces click en él, te saldrán todas las entradas de la serie.
Un saludo!