Visão Geral

Este curso ensina como usar o Material UI (MUI) para criar interfaces modernas, profissionais e altamente consistentes dentro do React. Você aprenderá desde a instalação, estilização e componentes básicos até temas avançados, customização profunda e criação de um design system completo usando MUI.

Objetivo

Após realizar este curso, você será capaz de:

• Instalar e configurar o Material UI em projetos React.
• Utilizar componentes prontos de alto nível.
• Personalizar temas, cores, tipografia e espaçamento.
• Criar interfaces consistentes com design profissional.
• Criar seu próprio design system usando MUI.
• Aplicar boas práticas de arquitetura visual e organização de componentes.

Publico Alvo

• Estudantes iniciantes e intermediários em React.
• Devs front-end que querem criar interfaces com visual profissional rapidamente.
• Pessoas que desejam trabalhar com bibliotecas de componentes modernas.
• Quem quer aprender UI/UX aplicada ao React com MUI.

Pre-Requisitos

• React básico (componentes, estado, props, hooks).
• Noções de HTML e CSS.

Conteúdo Programatico

Module 1 – Introduction to Material UI (MUI)

1. What is Material UI
2. Why use MUI in React
3. Component-driven UI
4. Overview of Material Design principles

Module 2 – Setting Up React with MUI

1. Installing MUI packages
2. Adding ThemeProvider
3. Using CSS baseline
4. Structure of an MUI project

Module 3 – Using Core Components

1. Buttons, Icons and IconButton
2. Typography system
3. Grid and Box components
4. Cards, Modal and Dialog
5. AppBar, Toolbar and Drawer

Module 4 – Forms and Inputs

1. TextField variations
2. Select, Checkbox and Radio
3. Validation patterns
4. Using FormControl and InputAdornment

Module 5 – Layout and Navigation

1. Responsive layouts with Grid
2. Container and spacing utilities
3. Navigation components (Tabs, Breadcrumbs, Drawer)
4. Handling responsive menus

Module 6 – Theming and Customization

1. Creating custom themes
2. Palette and color management
3. Typography customization
4. Global style overrides
5. Customizing individual component styles

Module 7 – Advanced MUI Techniques

1. Styled components with MUI
2. SX prop advanced usage
3. Creating reusable component variants
4. Working with dark mode
5. Integrating MUI with component libraries

Module 8 – Final Project

• Building a full professional UI using:

1. Custom theme
2. Core components
3. Layout structure
4. Responsive design

• Pages:

1. Login
2. Dashboard
3. Tables and forms
4. Side navigation