React es una biblioteca de JavaScript desarrollada por Facebook que se utiliza para construir interfaces de usuario de aplicaciones web y móviles. En este tutorial, aprenderás los fundamentos de React desde cero. Aprenderás cómo funcionan los componentes en React, cómo se utiliza la sintaxis JSX para describir la estructura de los componentes, cómo manejar el estado y la comunicación entre componentes, y cómo utilizar conceptos como el estado compartido y props para manejar el estado global de la aplicación.
Además, aprenderás sobre el ciclo de vida de los componentes y cómo se utiliza para optimizar el rendimiento de las aplicaciones.
En resumen, este tutorial te brindará una comprensión sólida de los conceptos básicos de React y te preparará para construir aplicaciones eficientes y escalables.
Que son los componentes
Los componentes en React son bloques básicos de construcción de una aplicación React, y son utilizados para representar elementos de la interfaz de usuario, como botones, formularios, tablas, etc. Cada componente tiene su propio estado y su propia lógica de renderizado. Los componentes son la unidad básica de una aplicación React, y se utilizan para construir aplicaciones de manera modular y escalable. Puedes crear componentes reutilizables que se pueden utilizar en diferentes partes de tu aplicación, lo que te permite construir aplicaciones más fácilmente mantenibles y escalables.
En React, hay dos tipos de componentes: componentes de clase y componentes de función.
- Los componentes de clase son componentes que se crean utilizando una clase de JavaScript. Estos componentes tienen acceso a funciones especiales como
constructor,render, ycomponentDidMount, y también tienen acceso al estado interno del componente mediante el uso dethis.state. - Los componentes de función son componentes que se crean utilizando una función de JavaScript. Estos componentes no tienen acceso a funciones especiales como
constructor, pero tienen acceso al estado interno del componente mediante el uso deuseStatehook.
En resumen, ambos tipos de componentes son utilizados para construir componentes reutilizables en una aplicación React, pero los componentes de clase son un poco más complejos de utilizar, ya que tienen un ciclo de vida más completo y acceso a funciones
A continuación te doy un ejemplo de cómo se crea un componente de clase y un componente de función en React:
Componente de clase:
class MiComponente extends React.Component {
constructor(props) {
super(props);
this.state = {
message: "Hola mundo!"
};
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
</div>
);
}
}
Componente de función:
function MiComponente() {
const [message, setMessage] = useState("Hola mundo!");
return (
<div>
<h1>{message}</h1>
</div>
);
}
En ambos ejemplos, se crea un componente llamado “MiComponente” que renderiza una etiqueta h1 con el mensaje “Hola mundo!”. Sin embargo, el componente de clase utiliza el estado interno mediante el uso de this.state mientras que el componente de función utiliza el hook useState para manejar el estado interno. Es importante mencionar que si bien el componente de clase tiene un ciclo de vida más completo, en muchos casos los componentes de función son suficientes para manejar la lógica de la aplicación y suelen ser más fáciles de mantener.
Utilizando JSX: Sintaxis para describir la estructura de los componentes
JSX es una sintaxis de JavaScript que se utiliza para describir la estructura de los componentes en React. A continuación te doy un ejemplo de cómo se utiliza JSX para describir un componente en React:
const MiComponente = () => {
return (
<div>
<h1>Hola mundo!</h1>
<p>Este es un ejemplo de JSX</p>
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</div>
);
};
En este ejemplo, se utiliza JSX para describir un componente que renderiza una etiqueta div con una etiqueta h1, una etiqueta p y una lista ul con tres elementos. El JSX se ve y se escribe de manera similar al HTML, pero en realidad es código JavaScript que se transpila a JavaScript tradicional antes de ejecutarse en el navegador.
Es importante mencionar que para poder utilizar JSX en tu proyecto es necesario tener un transpilador como Babel configurado en tu proyecto para poder transpilar el JSX a javascript tradicional.
Manejando el estado de los componentes
El manejo del estado de un componente en React se realiza mediante el uso de setState y state. A continuación te doy un ejemplo de cómo se maneja el estado de un componente en React:
class MiComponente extends React.Component {
constructor(props) {
super(props);
this.state = {
message: "Hola mundo!"
};
}
handleClick = () => {
this.setState({ message: "Nuevo mensaje" });
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
<button onClick={this.handleClick}>Cambiar mensaje</button>
</div>
);
}
}
En este ejemplo, se crea un componente llamado “MiComponente” que tiene un estado inicial con un mensaje “Hola mundo!”. El componente también tiene una función handleClick que se ejecuta cuando se hace clic en el botón, y cambia el estado del mensaje a “Nuevo mensaje” mediante el uso de this.setState. El componente también tiene un renderizado que muestra el valor actual del estado del mensaje y un botón que al hacer clic, ejecuta la función handleClick y cambia el mensaje.
Es importante mencionar que setState es una función asíncrona, si necesitas obtener el estado actualizado deberías utilizar una función callback en el setState, para que puedas realizar alguna acción una vez que se actualice el estado.
Ejemplo completo
A continuación te doy un ejemplo de cómo se utilizan los componentes, JSX y el manejo del estado en React para construir una aplicación sencilla:
import React from 'react';
class MiApp extends React.Component {
constructor(props) {
super(props);
this.state = {
message: "Hola mundo!",
};
}
handleClick = () => {
this.setState({ message: "Nuevo mensaje" });
}
render() {
return (
<div>
<MiHeader message={this.state.message} />
<MiButton onClick={this.handleClick} />
</div>
);
}
}
class MiHeader extends React.Component {
render() {
return (
<h1>{this.props.message}</h1>
);
}
}
class MiButton extends React.Component {
render() {
return (
<button onClick={this.props.onClick}>Cambiar mensaje</button>
);
}
}
export default MiApp;
Este código es un ejemplo de una aplicación simple de React que utiliza componentes, JSX y el manejo del estado.
- En primer lugar, se importa React desde la librería ‘react’ con la línea
import React from 'react';. - Luego se define un componente llamado
MiAppque extiende deReact.Component. Dentro del constructor se inicializa el estado con un mensaje “Hola mundo!”. - Se define una función
handleClicken el componenteMiAppque se encarga de manejar el evento de clic en el botón. - En la función
render()se utiliza JSX para describir el componente y se retorna un elementodivcon dos componentes hijos,MiHeaderyMiButton. El componenteMiHeaderrecibe una propiedadmessageque contiene el estado actual del mensaje y el componenteMiButtonrecibe una propiedadonClickque se utiliza para manejar el evento de clic en el botón. - Luego se define un componente llamado
MiHeaderque extiende deReact.Component. En su funciónrender()se utiliza JSX para describir el componente y se retorna una etiquetah1con el mensaje que se recibe como propiedad. - Por último se define un componente llamado
MiButtonque extiende deReact.Component. En su funciónrender()se utiliza JSX para describir el componente y se retorna un botón que tiene un evento onClick y con el mensaje “Cambiar mensaje” que se activa cuando se hace clic en el botón. Este evento onClick es una propiedad que se recibe desde el componente padre,MiApp, y se utiliza para ejecutar la funciónhandleClickque cambia el estado del mensaje.
