Este é um material complementar ao workshop Construindo Aplicações Modernas com React.js, oferecido na 18ª Escola de Férias da PUC Minas.

Durante o workshop, desenvolvemos uma aplicação moderna utilizando os principais recursos do React, com foco em boas práticas, produtividade e compreensão dos fundamentos da biblioteca. O objetivo é que, ao final do curso, os participantes sejam capazes de construir interfaces completas e escaláveis com React.js.

O conteúdo deste material está estruturado para acompanhar o passo a passo do projeto, aprofundar conceitos teóricos e fornecer recursos adicionais para estudo posterior.

Código-fonte completo do projeto:

👉 https://github.com/arturbomtempo-dev/react-app-workshop

O que é React.js?

React (ou React.js) é uma biblioteca JavaScript de código aberto mantida pelo Facebook (Meta) e por uma grande comunidade de desenvolvedores. Seu foco principal é a construção de interfaces de usuário (UI) para aplicações web e mobile.

Objetivo principal

Permitir que desenvolvedores construam interfaces ricas, reativas e escaláveis de forma modular, eficiente e previsível.

Principais Características do React

• Baseado em Componentes: Toda a aplicação é dividida em pequenos blocos reutilizáveis chamados componentes. Cada componente encapsula sua própria lógica e estrutura de exibição.
• Unidirecionalidade de dados: O fluxo de dados ocorre em apenas uma direção, o que facilita o rastreamento de alterações de estado e torna o código mais previsível.
• Virtual DOM: O React utiliza uma representação virtual da interface (DOM Virtual), que melhora o desempenho ao minimizar o número de operações reais no DOM do navegador.
• JSX: Uma sintaxe que permite escrever HTML dentro do JavaScript de forma declarativa, facilitando a construção e leitura dos componentes.
• React Hooks: Permite gerenciar estados e efeitos colaterais dentro de componentes funcionais, simplificando a lógica de componentes mais complexos.
• Grande Ecossistema: React possui uma vasta gama de bibliotecas complementares, como React Router, Redux, Styled Components, entre outros, que ampliam seu potencial e adaptabilidade.