## Tarefa
Agora vamos criar o componente `Alert`, que irá renderizar todos os elementos passados como filhos e aplicar alguns estilos específicos. A tarefa é:
1. Criar o componente `Alert` que possui o elemento `div` internamente.
2. O elemento `div` deve ter o nome de classe `alert`.
3. O elemento `div` deve ter a propriedade `children` como conteúdo.
4. O elemento `div` deve ter o seguinte CSS.
```css
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
```

1. Para criar um elemento `div` no componente, utilize `<div>...</div>`.
2. Para passar `props.children` como conteúdo de texto, envolva-o em `{...}` e defina `props.children`. Resultado: `<div>{props.children}</div>`.
3. Para adicionar um nome de classe ao elemento `div`, utilize o atributo `className` e defina como `alert`. Resultado: `className="alert"`.
4. Para importar o arquivo com os estilos no arquivo `index.js`, utilize a declaração `import` e forneça o caminho correto para o arquivo. Resultado: `import './index.css'`.
5. Para aplicar estilos ao elemento `div`, utilize o seletor de classe `.alert` e insira os estilos da tarefa.

Aprenda a construir interfaces de usuário dinâmicas e interativas com React. Compreenda conceitos fundamentais como JSX, o DOM virtual e a arquitetura baseada em componentes reutilizáveis. Aplique técnicas de estilização utilizando estilos inline, CSS externo e módulos CSS para um design escalável. Gerencie estado e efeitos colaterais de forma eficiente com React Hooks e compartilhe dados entre componentes usando Context.

Compreenda os princípios fundamentais do React. Você aprenderá sobre JSX (JavaScript XML), construção de componentes de UI reutilizáveis e renderização de elementos. Além disso, explorará a importância da coleta de dados e da renderização condicional em aplicações React. Ao final desta seção, você terá uma base sólida dos conceitos essenciais do React, preparando-se para os tópicos mais avançados abordados nas próximas seções.

Explore os diversos métodos de adicionar estilos às aplicações React. Você aprenderá a aplicar estilos a componentes individuais, utilizar estilos dinâmicos e manter uma abordagem de estilização escalável e sustentável em seus projetos.

Recursos avançados no desenvolvimento moderno com React. Hooks revolucionam a escrita de componentes funcionais, oferecendo uma maneira concisa e intuitiva de gerenciar estado e executar efeitos colaterais. Por outro lado, Context permite compartilhar dados pela árvore de componentes sem a necessidade de prop drilling. A combinação de Hooks e Context possibilita um gerenciamento de estado eficiente e compartilhamento de dados simplificado em aplicações React.

Guia passo a passo sobre como iniciar um projeto React do mundo real. Desde a configuração do ambiente de desenvolvimento até a compreensão da organização do projeto e ferramentas essenciais, você adquirirá o conhecimento e a confiança necessários para iniciar sua jornada com React.

Desafio: Aplicar CSS Externo em um Aplicativo React

Tarefa

Desafio: Aplicar CSS Externo em um Aplicativo React

Tarefa