Este tutorial le brindará una comprensión básica de React.js mediante la creación de  una aplicación muy  simple.

Instalación

Dado que recién está comenzando con React, le aconsejaría que use la configuración más simple posible. Un archivo HTML que importa  React y  ReactDOMbibliotecas que usan las etiquetas de este script.

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    
    /* 
    ADD REACT CODE HERE 
    */
    
    </script>
</body>
</html>

También importamos Babel ya que React usa algo llamado JSX para el marcado. Tendremos que convertir este JSX a JavaScript simple para que el navegador pueda entenderlo.

También tenga en cuenta los dos puntos siguientes:

  1. Etiqueta  <div> con parámetro  id=root. Este es el punto de partida de nuestra aplicación. Aquí es donde comienza a funcionar.
  2. La etiqueta en  <script type="text/babel"> el cuerpo. Aquí es donde escribiremos nuestro código React.js.

Si desea experimentar con el código, utilice  el área de juegos de Scrimba.

Componentes

Todo en React es un componente. Y por lo general toman la forma de clases de JavaScript. Un componente se crea extendiendo el  React-Component. Vamos a crear un componente  Hello.

class Hello extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

Luego definimos métodos para el componente. En nuestro ejemplo, solo tenemos un método  render().

Dentro  render() , pondremos una descripción de lo que queremos que React muestre en la página. En nuestro ejemplo anterior, solo queremos mostrar una etiqueta  h1 con el texto "¡Hola, mundo!" dentro.

Para mostrar nuestra pequeña aplicación en la pantalla, necesitamos usar  ReactDOM.render():

ReactDOM.render(
    <Hello />, 
    document.getElementById("root")
);

Aquí es donde vinculamos nuestro  Hellocomponente al punto de inicio ( <div id="root"></div>) de nuestra aplicación. El resultado será el siguiente:

La sintaxis similar a HTML que vimos arriba ( <h1> y  <Hello/>) es el mismo código JSX que mencioné anteriormente. No es exactamente HTML, aunque lo que escribe allí se representa como etiquetas HTML en el DOM.

El siguiente paso es nuestra aplicación para aprender a trabajar con datos.

Trabajar con datos

Hay dos tipos de datos en React: accesorios y estado. Es un poco difícil notar la diferencia entre los dos al principio, así que no te preocupes si no entiendes de inmediato de lo que estoy hablando. Todo será más fácil una vez que empieces a trabajar con ellos.

La característica clave es que el estado es un tipo de datos privado y se puede cambiar desde dentro del componente. Los accesorios, por otro lado, son externos y no pueden ser controlados por el propio componente. Los pasan los componentes que están más arriba en la jerarquía, que también administran los datos.

Los componentes pueden cambiar directamente su estado interno (estado), pero no pueden cambiar directamente los accesorios.

Echemos un vistazo más de cerca a los accesorios primero.

Accesorios

Nuestro componente  Hello es muy estático y muestra el mismo mensaje de todos modos. Una gran parte de React es la reutilización, lo que significa que puede escribir un componente una vez y luego usarlo varias veces para diferentes propósitos. Por ejemplo, para mostrar diferentes mensajes.

Para lograr este nivel de reutilización, agregaremos accesorios. En el siguiente ejemplo, verá cómo pasamos accesorios al componente:

ReactDOM.render(
    <Hello message="my friend" />, 
    document.getElementById("root")
);

El accesorio se llama  message y pasa el valor "mi amigo". Podemos acceder a esta propiedad dentro del componente Hello escribiendo  this.props.message Ejemplo:

class Hello extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}

Como resultado, lo siguiente se muestra en la pantalla:

La razón por la que escribimos  {this.props.message} entre llaves es porque queremos decirle a JSX que queremos agregar una expresión de JavaScript. Esto se llama  escape.

Ahora tenemos un componente que podemos reutilizar para mostrar cualquier mensaje en la página. ¡Guau!

Sin embargo, ¿qué pasa si queremos que el componente pueda cambiar sus propios datos? ¡Entonces, en lugar de accesorios, usaremos el estado!.

Expresar

Otra forma de almacenar datos en React es dentro del estado de un componente. Y a diferencia de los accesorios, el estado se puede cambiar desde el interior del componente.

Por lo tanto, si desea que los datos de su aplicación cambien, por ejemplo, según las acciones del usuario, deben almacenarse en el estado del componente.

Inicialización de estado

Para inicializar el estado, simplemente configúrelo  this.state en un método de clase  constructor(). En nuestro caso, el estado es un objeto que tiene una sola clave  message.

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
    }
    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

Antes de establecer el estado, debemos llamarlo  super() en el constructor, ya que  super() this no está inicializado antes de la llamada.

Cambio de estado

Para modificar el estado, simplemente llame a this.setState() pasando el nuevo estado del objeto como argumento. Haremos esto dentro de un método, al que llamaremos  updateMessage.

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
   }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

Nota: para que esto funcione, también debemos vincular la palabra clave  this al archivo updateMessage. De lo contrario, no podríamos acceder al archivo  this.

El siguiente paso es crear un botón que, al hacer clic, llamará al  updateMessage().

Así que agreguemos un botón al método  render():

render() {
  return (
     <div>
       <h1>Hello {this.state.message}!</h1>
       <button onClick={this.updateMessage}>Click me!</button>
     </div>   
  )
}

Vinculamos un detector de eventos al botón, es decir, el evento onClick . Cuando se llama, llamamos al método updateMessage.

Descripción completa del componente:

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
    }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }
    render() {
         return (
           <div>
             <h1>Hello {this.state.message}!</h1>
             <button onClick={this.updateMessage}>Click me!</button>
           </div>   
        )
    }
}

El método updateMessage, que llama a  this.setState() , que cambia el valor de  this.state.message. Y cuando pulsemos el botón, veremos lo siguiente:

¡Felicidades! Ahora tiene una comprensión muy básica de los conceptos más importantes de React.

Por Harald Borgen : Aprenda React.js  en 5 minutos

Compartir:
Categorías: Programación

0 comentarios

Deja una respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.