Construir componentes interactivos de React

Introducción

En este proyecto, aprenderás a crear una funcionalidad simple de mostrar/ocultar utilizando React. Implementarás un botón que alterna la visibilidad de una imagen en la página.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar un proyecto de React con archivos HTML, CSS y JavaScript
• Cómo utilizar el hook useState para administrar el estado de la aplicación
• Cómo renderizar componentes condicionalmente según el estado
• Cómo dar estilo a los componentes utilizando CSS

🏆 Logros

Después de completar este proyecto, podrás:

• Crear una aplicación básica de React
• Implementar la gestión de estado para controlar la visibilidad de los elementos
• Integrar HTML, CSS y JavaScript en un proyecto de React
• Comprender los fundamentos de la construcción de interfaces de usuario interactivas con React

Configurar el proyecto

En este paso, configurarás el proyecto y te familiarizarás con los archivos proporcionados.

1. Abra el editor en la derecha. Puede ver los siguientes archivos en su directorio de proyecto:

├── style.css
├── index.html
├── script.js
└── dog.png

2. Haga clic en "Ir en vivo" en la esquina inferior derecha para abrir el proyecto en el puerto 8080.

Implementar la funcionalidad de mostrar/ocultar

En este paso, implementarás la funcionalidad para mostrar y ocultar la imagen utilizando un botón.

1. Abra el archivo script.js.
2. Cree el componente App:

function App() {
  const [show, setShow] = React.useState(true);

  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      "button",
      { onClick: () => setShow(!show) },
      show ? "Ocultar Elemento" : "Mostrar Elemento"
    ),

    show && React.createElement("img", { src: "dog.png" })
  );
}

En este componente:

• Utilizamos el hook useState para crear una variable de estado show y una función setShow para actualizarla.
• El valor inicial de show se establece en true.
• Renderizamos un botón que alterna el valor de show cuando se hace clic.
• El texto del botón cambia según el valor de show.
• Renderizamos la imagen condicionalmente utilizando la variable de estado show.

3. Guarde el archivo App.js.
4. Actualice la página en su navegador.
5. Haga clic en el botón "Ocultar Elemento" para ocultar la imagen.
6. Haga clic en el botón "Mostrar Elemento" para mostrar la imagen nuevamente.

¡Felicitaciones! Has completado el proyecto "Mostrar y Ocultar". Has aprendido cómo utilizar React para crear una funcionalidad simple de mostrar/ocultar con un botón.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.