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:
- Etiqueta
<div>con parámetroid=root. Este es el punto de partida de nuestra aplicación. Aquí es donde comienza a funcionar. - 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
thisal archivoupdateMessage. De lo contrario, no podríamos acceder al archivothis.
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
0 comentarios