## Tarea
Ahora procederemos a crear el componente `Alert`, que renderizará todos los elementos pasados como hijos y aplicará algunos estilos específicos. La tarea es:
1. Crear el componente `Alert` que contenga el elemento `div` en su interior.
2. El elemento `div` debe tener el nombre de clase `alert`.
3. El elemento `div` debe tener la prop `children` como contenido.
4. El elemento `div` debe tener el siguiente CSS.
```css
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
```

1. Para crear un elemento `div` en el componente, utilizar `<div>...</div>`.
2. Para pasar `props.children` como contenido de texto, encerrarlo entre `{...}` y establecer `props.children`. Resultado: `<div>{props.children}</div>`.
3. Para añadir un nombre de clase al elemento `div`, utilizar el atributo `className` y establecerlo en `alert`. Resultado: `className="alert"`.
4. Para importar el archivo con los estilos en el archivo `index.js`, utilizar la sentencia `import` y proporcionar la ruta correcta al archivo. Resultado: `import './index.css'`.
5. Para aplicar estilos al elemento `div`, utilizar el selector de nombre de clase `.alert` e insertar los estilos de la tarea.

Aprende a construir interfaces de usuario dinámicas e interactivas con React. Comprende conceptos fundamentales como JSX, el DOM virtual y la arquitectura reutilizable basada en componentes. Aplica técnicas de estilizado utilizando estilos en línea, CSS externo y módulos CSS para un diseño escalable. Gestiona el estado y los efectos secundarios de manera eficiente con React Hooks y comparte datos entre componentes usando Context.

Adquiera una comprensión de los principios fundamentales de React. Aprenderá sobre JSX (JavaScript XML), la construcción de componentes de UI reutilizables y el renderizado de elementos. Además, explorará la importancia de la recopilación de datos y el renderizado condicional en aplicaciones React. Al finalizar esta sección, contará con una base sólida de los conceptos esenciales de React, preparándolo para abordar con éxito los temas más avanzados de las siguientes secciones.

Explora los diversos métodos para agregar estilos a las aplicaciones React. Aprenderás a aplicar estilos a componentes individuales, utilizar estilos dinámicos y mantener un enfoque de estilizado escalable y mantenible en tus proyectos.

Funciones avanzadas en el desarrollo moderno con React. Los hooks revolucionan la forma en que escribimos componentes funcionales, proporcionando una manera concisa e intuitiva de gestionar el estado y manejar efectos secundarios. Por otro lado, el Contexto nos permite compartir datos a través del árbol de componentes sin necesidad de prop drilling. La combinación de hooks y Contexto posibilita una gestión eficiente del estado y una compartición de datos simplificada en aplicaciones React.


Guía paso a paso sobre cómo iniciar un proyecto React del mundo real. Desde la configuración del entorno de desarrollo hasta la comprensión de la organización del proyecto y las herramientas críticas, obtendrá el conocimiento y la confianza necesarios para comenzar su trayectoria en React.

Desafío: Aplicar CSS Externo a una Aplicación React

Tarea

Desafío: Aplicar CSS Externo a una Aplicación React

Tarea