Aprende React.js en 5 minutos

      No hay comentarios en Aprende React.js en 5 minutos

Una rápida introducción a la popular librería JavaScript


Este tutorial nos proporcionará un conocimiento básico de React.js mediante la construcción de una aplicación sencilla. Dejaremos de lado todo aquello que no se considere esencial.
Si te gusta nuestro estilo de enseñanza, y quieres que te notifiquemos cuando lancemos nuestro curso de React.js, puedes dejar aquí tu correo electrónico.

La configuración

Cuando comenzamos con React, debemos utilizar la configuración más sencilla posible: un fichero HTML que importa las librerías React y ReactDOM usando las etiquetas script, tal que así:

También hemos importado Babel, ya que React usa JSX para escribir el marcado. Necesitamos transformar ese JSX en JavaScript plano, de forma que el navegador pueda entenderlo.
Hay dos cosas más que debemos observar:

  1. El <div> con el id #root. Este es el punto de entrada de nuestra aplicación. Es donde se aloja la aplicación entera.
  2. La etiqueta <script type="text/babel"> en el cuerpo. Aquí es donde escribiremos nuestro código React.

Si quieres experimentar con el código, echa un vistazo a este playground de Scrimba.

Componentes

Todo en React es un componente, y estos normalmente toman la forma de una clase JavaScript. Creamos un componente extendiendo de la clase React-component. Vamos a crear un componente llamado Hello.

Después definimos los métodos del componente. En nuestro ejemplo, sólo tenemos un método, llamado render().
Dentro de render() devolveremos una descripción de lo que queremos que React dibuje en la pantalla. En el caso anterior, sólo queremos que muestre una etiqueta <h1> con el texto Hello world! dentro.
Para hacer que nuestra pequeña aplicación dibuje en la pantalla también tenemos que usar ReactDOM.render().

Así pues, aquí es donde conectamos nuestro componente Hello con el punto de entrada para la aplicación (<div id="root"></div>). Esto da el siguiente resultado:

La sintaxis tipo HTML que hemos observado (<h1> y <Hello/>) es el código JSX que hemos mencionado antes. Realmente no es HTML, aunque lo que escribimos acaban siendo etiquetas HTML en el DOM.
El próximo paso es que nuestra aplicación sea capaz de manejar datos.

Manejo de datos

Hay dos tipos de datos en React: propiedades (props) y estado (state). La diferencia entre ellos es algo complicada de entender al principio, así que no te preocupes si te parece algo confusa. Los props son externos y no están controlados por el propio componente. Se pasan desde los componentes subiendo la jerarquía, que también controla los datos.
Un componente puede cambiar su estado interno directamente. No puede cambiar sus props directamente.
Primero, echemos un vistazo en detalle a los props.

Props

Nuestro componente Hello es muy estático y siempre dibuja el mismo mensaje. Una gran ventaja de React es su reusabilidad, es decir, escribir un componente una vez y reutilizar en diferentes casos de uso, por ejemplo, para mostrar diferentes mensajes.
Para conseguir esta reusabilidad, añadimos props. Así es como pasamos props a un componente (destacado en negrita):

Este prop se llama message y tiene el valor «my friend». Podemos acceder a este prop en el componente Hello con this.props.message, tal que así:

Como resultado, se muestra en pantalla:

El motivo por el que escribimos {this.props.message} con llaves es porque necesitamos indicarle a JSX que queremos añadir una expresión JavaScript. A esto se le llama escapar (scaping).
Así que ahora tenemos un componente reusable que puede dibujar en pantalla el mensaje que queramos. Fantástico.

Estado

El otro modo de acceder a datos en React es en el estado del componente. Y a diferencia de props, que no pueden cambiarse directamente por el componente, el estado puede.
Así que si queremos que los datos en la aplicación cambien – por ejemplo, en base a las interacciones del usuario – debemos guardarlos en el estado del componente en algún lugar de la aplicación.

Inicializando el estado

Para inicializar el estado, tan sólo asignaló con this.state en el método constructor() de la clase. Nuestro estado es un objeto que, en nuestro caso, sólo tiene una clave llamada message.

Antes de dar valor al estado, simplemente llamamos a this.setState(), pasando el nuevo objeto estado como argumento. Haremos esto dentro de un método que llamaremos updateMessage.

Nota: para que funcione, también hemos tenido que vincular la palabra clave this al método updateMessage. De otro modo, no podríamos accede a this en el método.

El siguiente paso es crear un botón sobre el que poder hacer clic para llamar al método updateMessage()
Así que añadimos un botón al método render():

Aquí ‘enganchamos’ un escuchador de eventos al botón, para el evento onClick. Cuando se lanza, llamamos al método updateMessage.
Así queda el componente completo:

El método updateMessage llama entonces a this.setState() el cual cambia el valor de this.state.message. Y cuando pulsamos el botón, esto es lo que obtenemos:

¡Felicidades! Ya hemos adquirido un conocimiento básico de los conceptos más importantes de React.
Si quieres seguir aprendiendo, puedes registrarte en nuestra lista de espera para el próximo curso de React gratuito.
¡Gracias por tu tiempo! Soy Per Borgen, cofundador de Scrimba. Puedes conectar conmigo vía Twitter.

Nota: puedes encontrar el artículo original en https://medium.freecodecamp.org/learn-react-js-in-5-minutes-526472d292f4

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *