Summary  
This chapter explains different methods for organizing and applying CSS styles to React components—inline style objects, external CSS files with class names, and an overview of common styling libraries.  

General domain of usage  
User interface styling in front-end web applications

O React não impõe uma única maneira de estilizar componentes. Em vez disso, oferece flexibilidade para escolher como os estilos serão aplicados conforme as necessidades do projeto.

A estilização no React ainda é baseada em **CSS**. A diferença está em **como os estilos são organizados e aplicados** aos componentes.

Neste curso, o foco será em duas abordagens principais de estilização:
- Estilos inline: estilos aplicados diretamente aos elementos usando o atributo `style` e objetos JavaScript;
- Arquivos CSS externos: estilos escritos em arquivos CSS tradicionais e aplicados por meio de nomes de classes.

### Estilização com bibliotecas e frameworks
Em projetos reais, aplicações React frequentemente utilizam **bibliotecas de terceiros** e frameworks para estilização. Algumas opções populares incluem:
- CSS Modules;
- Styled Components;
- Emotion;
- Tailwind CSS;
- Material UI (MUI);
- Chakra UI.

Essas ferramentas oferecem recursos avançados, como estilos com escopo, sistemas de design e estilização baseada em utilidades.

### Por Que Não As Abordamos Aqui
Embora sejam poderosas, bibliotecas de estilização adicionam **complexidade adicional** e introduzem novos conceitos além do React básico.
Neste curso, o objetivo é construir uma base sólida, compreender como os componentes React funcionam e evitar distrações desnecessárias neste início.



Quando você já estiver confortável com os conceitos básicos de React, aprender qualquer biblioteca de estilização se torna muito mais fácil.

Nota

Explore os fundamentos da construção de interfaces de usuário com React. Foco em componentes, JSX, fluxo de dados, estado e efeitos colaterais utilizados em aplicações React do dia a dia.

Explore o que é o React e como ele renderiza interfaces de usuário. Foco em componentes, sintaxe JSX e exibição de elementos na tela.

Aprofundamento na passagem de dados entre componentes e controle da saída da interface do usuário. Ênfase em props, renderização condicional e renderização de listas de dados.

Aprenda como as interações do usuário e dados externos alteram a interface ao longo do tempo. Foco no gerenciamento de estado e no tratamento de efeitos colaterais com hooks do React.

Explore maneiras comuns de estilizar componentes React. Foco na aplicação de estilos utilizando estilos inline e CSS externo.

Aprenda como executar um projeto React e compreender sua estrutura. Foco em iniciar um projeto com Vite e navegar pelos arquivos do projeto.

Opções de Estilização no React

Estilização com bibliotecas e frameworks

Por Que Não As Abordamos Aqui