{"id":48692617,"url":"https://github.com/webtech-network/lab-react","last_synced_at":"2026-04-11T05:42:41.835Z","repository":{"id":254894269,"uuid":"767658641","full_name":"webtech-network/lab-react","owner":"webtech-network","description":"Lab de introdução ao React. Ele visa ajudar desenvolvedores iniciantes a entender os conceitos básicos do React criando uma aplicação básica.","archived":false,"fork":false,"pushed_at":"2025-10-08T03:04:57.000Z","size":689,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-19T20:41:59.845Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://webtech-network.github.io/lab-react/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webtech-network.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-05T17:19:15.000Z","updated_at":"2025-10-08T03:05:01.000Z","dependencies_parsed_at":"2024-08-26T21:24:20.844Z","dependency_job_id":"d7600fb8-20bd-4412-92bd-1a7c35f4c699","html_url":"https://github.com/webtech-network/lab-react","commit_stats":null,"previous_names":["webtech-puc-minas/lab-react","webtech-network/lab-react"],"tags_count":0,"template":false,"template_full_name":"webtech-network/template-webtech","purl":"pkg:github/webtech-network/lab-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webtech-network%2Flab-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webtech-network%2Flab-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webtech-network%2Flab-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webtech-network%2Flab-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webtech-network","download_url":"https://codeload.github.com/webtech-network/lab-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webtech-network%2Flab-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31670383,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-11T05:42:41.251Z","updated_at":"2026-04-11T05:42:41.826Z","avatar_url":"https://github.com/webtech-network.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Exemplo de uso do template: https://github.com/kspencerl/lab-springboot-basic-api --\u003e\n\n# React.js\n\nConstrução de uma página com a biblioteca React.js.\n\n## Tecnologias utilizadas\nLinguagens, Frameworks e Bibliotecas utilizadas na construção do projeto.\n\n\u003c!-- Link com os badges para inserir abaixo https://devicon.dev/ --\u003e\n\u003cdiv style=\"display: flex; gap: 10px;\"\u003e\n  \u003cimg width=\"50px\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg\"\u003e\n  \u003cimg width=\"50px\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg\"\u003e\n  \u003cimg width=\"50px\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/npm/npm-original-wordmark.svg\"\u003e\n\u003c/div\u003e\n\n## Onde Aplicar\nEste projeto pode ser aplicado em diversas situações:\n- Desenvolvimento de **sites** e aplicações **web**.\n- Desenvolvimento de **componentes** reutilizáveis.\n- **Integrações** com back-end.\n- Construções de **dashboards**.\n\n# Sumário\n\n* [História do Desenvolvimento Front-End](#história-do-desenvolvimento-front-end)\n* [O que é o React?](#o-que-é-o-react)\n* [Introdução ao Lab](#introdução-ao-lab)\n* [Step 1 - SetUp](#step-1---setup)\n* [Step 2 - Entendendo o JSX](#step-2---entendendo-o-jsx)\n* [Step 3 - Componentes e Props](#step-3---componentes-e-props)\n  * [Hora de Praticar 01](#-hora-de-praticar-01)\n* [Step 4 - Rotas](#step-5---rotas)\n  * [Hora de Praticar 02](#-hora-de-praticar-02)\n* [Step 5 - Estados](#step-4---estados)\n  * [Hora de Praticar 03](#-hora-de-praticar-03)\n* [Boas práticas](#boas-práticas)\n* [Novas tendências em React e Front-End](#novas-tendências-em-react-e-front-end)\n\n\n## História do Desenvolvimento Front-End\n\nO desenvolvimento front-end passou por várias fases, marcadas pelo uso de diferentes ferramentas. Três tecnologias se destacaram ao longo dessa jornada:\n\n- HTML\n- CSS\n- JavaScript\n\n### 🌐 O início:\nNo início, cada nova página de um site precisava de um código específico para cada funcionalidade. Isso significava:\n- **Trabalho excessivo:** Repetição de tarefas já feitas.\n- **Códigos mais pesados:** Muitos dados duplicados.\n\n\n### 🚀 A Solução: Bibliotecas e Frameworks\nPara resolver esses problemas, surgiram bibliotecas e frameworks que facilitaram a vida dos desenvolvedores. Um destaque é o React.js:\n- Uma biblioteca JavaScript para criar aplicações front-end **dinâmicas e eficientes**.\n\n### ✅ Benefícios do React.js\n1. **Reutilização de Componentes:** Crie componentes reutilizáveis, economizando tempo e esforço.\n2. **Virtual DOM:** Melhora a performance ao atualizar apenas os componentes necessários.\n3. **Comunidade Ativa:** Suporte constante e muitas bibliotecas adicionais.\n\n\n## O que é o React?\n\nReact é uma biblioteca em JavaScript desenvolvida pelo Facebook, projetada para otimizar tarefas simultâneas, como chats, status e conversas online. Essas operações são comuns em aplicações do Facebook.\n\n### 🎯 Objetivo do React\n\nO React visa criar **pequenas partes** individuais de uma tela, como:\n- Botões\n- Cards\n- Rodapés\n- Imagens\n\nIsso resulta em uma aplicação que funciona de maneira independente, permitindo que cada \"pequena parte\" ou ``componente`` possa realizar suas próprias ações sem depender do resto da página. Seus benefícios são: \n\n1. **Reutilização:** Crie uma vez, use em qualquer lugar.\n2. **Manutenção Facilitada:** Atualize componentes sem afetar o restante da aplicação.\n3. **Desempenho Aprimorado:** Atualize apenas os componentes necessários.\n\n### 🔍 Exemplo Prático: Web-Tech\n\nPara entender melhor, observe a página do site Web-Tech abaixo:\nNa página, você pode ver como os ``componentes`` individuais (botões, cards) são utilizados para criar uma interface dinâmica e eficiente.\n\n![Página de Membros](/assets/member_page.png)\n\nObserva-se que em cada retângulo vermelho temos uma parte, ou seção do site. Nessas regiões, notamos pequenas partes que realizam funções semelhantes, chamadas componentes.\n\n### 🧩 O Poder dos Componentes\nOs componentes são semelhantes na construção e design, diferenciando-se principalmente pelas informações que contêm.\n\n### 🚫 Método Tradicional: HTML e CSS\nSe quiséssemos construir essa página apenas com HTML e CSS, precisaríamos duplicar o mesmo código HTML várias vezes para obter o resultado desejado. Isso resultaria em:\n\n- **Redundância:** Código duplicado\n- **Manutenção difícil:** Alterações em várias partes\n\n### ✅ Método Moderno: React\nCom ferramentas como o **React**, não precisamos duplicar código e as alterações ficam centralizadas em um único componente. Vejamos um exemplo prático:\n**Exemplo: Navbar**\n\n**Sem** o uso de bibliotecas:\n- Teríamos que inserir um código de navbar em cada nova página criada.\n\n**Com** o uso do React:\n- Podemos chamar a navbar uma única vez e aplicá-la em todas as páginas.\n\n![Página de Mebros - Navbar](/assets/member_page_navbar.png)\n\n![Página de Eventos](/assets/event_page.png)\n\nNos retângulos azuis, podemos ver a mesma **navbar** em duas páginas diferentes. Em uma aplicação simples com HTML e CSS, precisaríamos duplicar esse código, mas com a biblioteca React poderíamos ter somente um ``componente``. Isso é um pouco da grandeza do React.js, e é isso que iremos explorar no nosso lab.\n\n\n## Introdução ao Lab\n\nNesse lab você irá aprender os principais conceitos para a criação de uma aplicação completa com a biblioteca React.js. Vamos abordar a construção do site da Web-Tech, disponível no **[link](https://webtech.network/)**, utilizando também conceitos como requisições em API!\n\n### 🔍 Comparando React com códigos em HTML/JS:\n\n#### HTML/JS\n\n```html\n\u003cnav class=\"navbar\"\u003e\n    \u003ca href=\"#\" class=\"logo\"\u003eLogo\u003c/a\u003e\n    \u003cul class=\"nav-links\"\u003e\n        \u003cli\u003e\u003ca href=\"#\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#\"\u003eServices\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cbutton class=\"nav-toggle\" id=\"navToggle\"\u003eMenu\u003c/button\u003e\n\u003c/nav\u003e\n```\n#### React/JSX\n\n```jsx\nimport React, { useState } from 'react';\nimport './Navbar.css';\n\nconst Navbar = () =\u003e {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const toggleNav = () =\u003e {\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    \u003cnav className=\"navbar\"\u003e\n      \u003ca href=\"#\" className=\"logo\"\u003eLogo\u003c/a\u003e\n      \u003cul className={`nav-links ${isOpen ? 'active' : ''}`}\u003e\n        \u003cli\u003e\u003ca href=\"#\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#\"\u003eServices\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cbutton className=\"nav-toggle\" onClick={toggleNav}\u003eMenu\u003c/button\u003e\n    \u003c/nav\u003e\n  );\n};\n\nexport default Navbar;\n```\n\n### ⭕ Similaridades:\n\n- **Estrutura e Estilização:** Ambos usam HTML (ou JSX) para estrutura e CSS para estilização.\n\n### ❌ Diferenças:\n\n- Integração do JavaScript:\n  - **HTML:** O JavaScript é separado do HTML e funciona de forma independente.\n  - **React:** O JavaScript funciona integrado ao HTML por meio do JSX, uma extensão da sintaxe HTML dentro do JavaScript.\n\n- Modularidade:\n  - **HTML/CSS/JavaScript:** Não é modular. O código precisa ser duplicado sempre que usado em diferentes páginas.\n  - **React:** Altamente modular. A navbar é um componente reutilizável que pode ser importado em qualquer parte da aplicação.\n\n### 🚀 Conclusão da Comparação:\nIniciar com React é fácil, já que  é uma evolução natural para quem já conhece JavaScript e HTML. Ele combina ambas tecnologias para criar componentes reutilizáveis, dando facilidade na construção e manutenção de interfaces complexas. Assim, vamos iniciar nosso projeto dando um setup na aplicação!\n\n\n\n## Step 1 - SetUp\n \n### 1️. Instalando o Node.js e npm:\n\nPrimeiro, você precisa instalar o Node.js, que inclui o npm (Node Package Manager), essencial para gerenciar pacotes de software para Node.js. Baixe o instalador do Node.js no site oficial **[nodejs.org](nodejs.org)** e siga as instruções de instalação.\n\n### 2️. Verificando instalação\nVerifique se o Node.js e o npm foram instalados corretamente executando os seguintes comandos no terminal:\n\n```sh\nnode -v\nnpm -v\n```\n\n### 3️. Instalando ‘create-react-app’\n\n``create-react-app`` é uma ferramenta oficial para criar rapidamente aplicações React com uma configuração inicial padrão. No terminal rode o seguinte comando:\n\n```sh\nnpm install -g create-react-app\n```\n\n### 4️. Criando seu primeiro projeto em React:\nPara iniciar um novo projeto React, vamos usar a ferramenta Create React App, que configura automaticamente a estrutura inicial do projeto, incluindo todas as dependências necessárias.\n\n```sh\nnpx create-react-app web_tech_page\n```\n\n### 5️. Estrutura do Projeto:\n\nDepois de criar o projeto, a estrutura de diretórios será a seguinte:\n\n```\nweb_tech_page/\n├── public/\n├── src/\n│   ├── App.js\n│   ├── index.js\n├── package.json\n├── README.md\n└── .gitignore\n```\n\n- ``public/``: Contém arquivos estáticos públicos.\n- ``src/``: Contém os arquivos de código-fonte.\n- ``App.js``: Componente principal da aplicação.\n- ``index.js``: Ponto de entrada da aplicação.\n\n\n### 6. Executando o projeto:\nNavegue até a pasta do projeto e execute o seguinte comando para seu projeto ser iniciado. \n\n```sh\nnpm start\n```\nSe tudo estiver certo, será iniciado na sua máquina um novo endereço http://localhost:3000/, dando acesso a sua mais nova aplicação. Pronto! Com isso podemos dar início a criação do nosso primeiro projeto em React. \n\n\n\n\n## Step 2 - Entendendo o JSX\n\nJSX é uma extensão de sintaxe para JavaScript que permite escrever HTML dentro de arquivos JavaScript. É utilizado para descrever como a interface de usuário deve ser renderizada.\n\n### 🧩 Exemplo simples de um código JSX:\n\n```jsx\n// src/components/HelloWorld.js\nimport React from 'react';\n\nconst HelloWorld = () =\u003e {\n    return (\n        \u003cdiv\u003e\n            \u003ch1\u003eHello, World!\u003c/h1\u003e\n        \u003c/div\u003e\n    );\n};\n\nexport default HelloWorld;\n```\n\n### 🌐 Como o navegador interpreta um código JSX?\nUm navegador interpreta a princípio três linguagens principais:\n\n- **HTML (HyperText Markup Language)**: linguagem padrão para estruturar e apresentar informações na web.\n- **CSS (Cascading Style Sheets)**: responsável por estilizar o conteúdo HTML, inserindo cores, formatos e animações nas aplicações.\n- **Javascript**: linguagem de programação responsável por adicionar \n\nÉ fato que posteriormente surgiram diversas outras ferramentas e tecnologias as quais transformaram o uso dessas linguagens, necessitando de maneiras para serem utilizadas pelos navegadores. Com o JSX o código é transpilado/ compilado para JavaScript por meio de ferramentas como Babel e WebPack. \n\n\n### ▶ Retorno de funções React.js\n\nPor padrão, o código JSX é retornado como uma função, chamada createElement que possibilita a interpretação para códigos JavaScript. Ela possui três parâmetros principais, sendo eles:\n- **type**: tipo da função podendo ser uma tag HTML ou outro componente React.\n- **props**: atributos desejáveis no componente\n- **children**: parte que contém conteúdo HTML ou outros componentes\n\n\n\n\n## Step 3 - Componentes e Props\n\n### 📦 Componentes:\n- Componentes são blocos reutilizáveis de código que permitem criar interfaces de usuário complexas a partir de pequenas partes isoladas.\n\n```jsx\n// src/components/Header.js\nimport React from 'react';\n\nconst Header = () =\u003e (\n    \u003cheader\u003e\n        \u003ch1\u003eWebTech PUC Minas\u003c/h1\u003e\n        \u003cnav\u003e\n            \u003cul\u003e\n                \u003cli\u003eSobre\u003c/li\u003e\n                \u003cli\u003eLabs\u003c/li\u003e\n                \u003cli\u003eEventos\u003c/li\u003e\n                \u003cli\u003eEquipe\u003c/li\u003e\n                \u003cli\u003eContato\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/nav\u003e\n    \u003c/header\u003e\n);\n\nexport default Header;\n```\n\n### 🔧 Props:\nProps são argumentos passados para componentes React que permitem personalizar e reutilizar componentes.\n\n```jsx\nimport React from 'react';\n\nconst Saudacao = (props) =\u003e {\n  return \u003ch1\u003eOlá, {props.nome}!\u003c/h1\u003e;\n};\n\nexport default Saudacao;\n```\nVocê pode usar este componente passando diferentes valores para a prop ``nome``:\n\n```jsx\n\u003cSaudacao nome=\"Maria\" /\u003e\n\u003cSaudacao nome=\"João\" /\u003e\n```\n\n### 👨‍🏫 Hora de Praticar 01\n\nVamos iniciar a criação dos nossos primeiros componentes em React.js, o Navbar e Footer. Nessa seção você irá aprender sobre os Links, que são muito similares com as tags \u003ca\u003e usadas em HTML. Eles se diferem dessas tags por não necessitarem recarregar a página quando acontece o clique sobre eles. Siga as instruções abaixo para a realização: \n\n- Vá para a pasta ``src`` e crie uma nova pasta chamada ``components``\n\n- Dentro de components crie uma nova pasta chamada ``layout``\n\n- Em ``layout``crie um arquivo nomeado de ``Navbar.js``\n\n- No arquivo digite o código abaixo:\n\n```jsx\n// src/components/layout/Navbar.js\nimport React from 'react';\nimport { Link } from 'react-router-dom'\nimport styles from './Navbar.module.css'\n\nconst Navbar = () =\u003e (\n    \u003cheader className={styles.navbar}\u003e\n        \u003ch1\u003e\u003cLink to=\"/\"\u003eWebTech PUC Minas\u003c/Link\u003e\u003c/h1\u003e\n        \u003cnav\u003e\n            \u003cul\u003e\n                \u003cli\u003e\u003cLink to=\"/\"\u003eHome\u003c/Link\u003e\u003c/li\u003e\n                \u003cli\u003e\u003cLink to=\"/labs\"\u003eLabs\u003c/Link\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/nav\u003e\n    \u003c/header\u003e\n);\n\nexport default Navbar;\n```\n\n##### Utilize o CSS: ``Navbar.module.css``\n\n## Step 4 - Rotas \n\n### 🛣️ Rotas:\nNo React, usamos bibliotecas como ``react-router-dom`` para gerenciar a navegação entre diferentes páginas ou componentes. ``react-router-dom`` fornece componentes como ``Router``, ``Route``, ``Switch`` e ``Link`` para configurar as rotas da aplicação.\n\n\n### 📝 Exemplo de configuração de rotas:\n\n```jsx\nimport React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport Home from './Home';\nimport About from './About';\n\nconst App = () =\u003e {\n  return (\n    \u003cRouter\u003e\n      \u003cSwitch\u003e\n        \u003cRoute exact path=\"/\" component={Home} /\u003e\n        \u003cRoute path=\"/about\" component={About} /\u003e\n      \u003c/Switch\u003e\n    \u003c/Router\u003e\n  );\n};\n\nexport default App;\n```\n\n### Detalhes sobre ``react-router-dom``:\n\n- BrowserRouter:\n  - ``BrowserRouter`` é o componente principal que envolve toda a aplicação.\n  - Controla a sincronização do URL com a interface do usuário.\n- Route:\n  - Define uma rota e o componente que será renderizado quando o URL corresponder ao caminho especificado.\n  - O atributo `path` define o caminho da URL, enquanto element recebe o componente a ser renderizado.\n  - Diferente da versão anterior, não é mais necessário o `prop exact` porque a correspondência é exata por padrão.\n- Switch:\n  - Renderiza exclusivamente a primeira rota filha que corresponde ao caminho atual.\n  - Evita que múltiplas rotas sejam renderizadas ao mesmo tempo.\n- Link:\n  - Usado para criar links de navegação que modificam o URL sem recarregar a página.\n  - Substitui o uso de ``\u003ca\u003e`` para navegação interna.\n\n### 👨‍🏫 Hora de Praticar 02\n\nAgora iremos dar inicio ao nosso projeto criando o arquivo que será responsável por chamar todos os outros, o ``App.js``. Nele iremos chamar nosso componente ``Navbar`` e utilizar o nosso conhecimento sobre rotas. Siga as instruções abaixo para a realização: \n\n- Vá para a pasta ``src``\n\n- Encontre um arquivo chamado ``App.js``\n\n- Reescreva sobre o antigo código o código abaixo:\n\n\n```jsx\n// src/App.js\nimport { BrowserRouter as Router, Route, Routes } from 'react-router-dom';\n\nimport Home from \"./components/pages/Home\"\nimport Navbar from './components/layout/Navbar';\nimport Footer from './components/layout/Footer';\nimport Labs from './components/pages/Labs';\n\n\nfunction App() {\n  return (\n    \u003cRouter\u003e\n      \u003cNavbar /\u003e\n      \u003cdiv\u003e\n        \u003cRoutes\u003e\n          \u003cRoute exact path=\"/\" Component={Home} /\u003e\n          \u003cRoute exact path=\"/labs\" Component={Labs} /\u003e\n        \u003c/Routes\u003e\n      \u003c/div\u003e\n      \u003cFooter/\u003e\n    \u003c/Router\u003e\n  );\n}\n\nexport default App;\n```\n\n- Posteriormente, vá para ``src/components``\n\n- Crie uma pasta chamada ``pages``\n\n- Dentro de ``pages`` crie um arquivo chamado ``Home.js``\n\n- Insira o código abaixo:\n\n\n```jsx\n// src/components/pages/Home.js\nimport styles from './Home.module.css'\n\nfunction Home() {\n  return (\n    \u003cdiv className={styles.home_page}\u003e\n      \u003ch1\u003eBem vindo, a \u003cspan\u003eWebTech!\u003c/span\u003e\u003c/h1\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default Home;\n```\n\n##### Utilize o CSS: ``Home.module.css``\n\n## Step 5 - Estados \n\n### 📊 Estados:\nEstados são objetos que armazenam dados dinâmicos e podem mudar ao longo do tempo, permitindo que os componentes React sejam interativos e **reativos** a mudanças.\n\n### 📝 Exemplo de componente com estado (usando hooks):\n\n```jsx\nimport React, { useState } from 'react';\n\nconst Contador = () =\u003e {\n  const [contador, setContador] = useState(0);\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eContagem: {contador}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setContador(contador + 1)}\u003eIncrementar\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Contador;\n```\n\n### Como os estados funcionam:\n- Definição do Estado Inicial:\n  - Usamos ``useState`` para definir o estado inicial.\n  - ``useState`` retorna um array com dois elementos: o valor atual do estado e uma função para atualizar o estado.\n\n```jsx\nconst [contador, setContador] = useState(0);\n```\n\n- Atualização do Estado:\n  - Usamos a função ``setContador`` para atualizar o estado.\n  - Quando o estado é atualizado, o componente é re-renderizado para refletir as mudanças.\n\n```jsx\n\u003cbutton onClick={() =\u003e setContador(contador + 1)}\u003eIncrementar\u003c/button\u003e\n```\n\n### 👨‍🏫 Hora de Praticar 03\n\nNesta tarefa, vamos integrar uma API externa do GitHub para obter dados sobre os Labs da organização WebTech. Utilizaremos uma variedade de componentes e técnicas de controle de estado que aprendemos neste laboratório. Siga os passos abaixo para concluir a tarefa com sucesso:\n\n- Vá em ``src/components/pages``\n\n- Crie um arquivo ``Labs.js``\n\n- Dentro de ``Labs.js``insira o código abaixo:\n\n```jsx\n// src/components/pages/Labs.js\nimport React, { useEffect, useState } from 'react';\nimport LabCard from '../layout/LabCard';\nimport styles from './Lab.module.css'\n\n\nfunction Labs() {\n    const [repos, setRepos] = useState([]);\n    const githubUsername = 'WebTech-PUC-Minas';\n\n    useEffect(() =\u003e {\n        async function fetchData() {\n            try {\n                // Consultar os repositórios do usuário\n                const reposResponse = await fetch(`https://api.github.com/users/WebTech-PUC-Minas/repos`);\n                const reposData = await reposResponse.json();\n\n\n                // Informações de cada contribuidor\n                const reposWithContributors = await Promise.all(\n                    reposData.map(async (repo) =\u003e {\n                        const contributorsResponse = await fetch(repo.contributors_url);\n                        const contributorsData = await contributorsResponse.json();\n                        return { ...repo, contributors: contributorsData };\n                    })\n                );\n\n\n                // Filtra somente os labs\n                const filteredRepos = reposWithContributors\n                    .filter((repo) =\u003e repo.name.startsWith('lab-'))\n                    .sort((a, b) =\u003e new Date(b.updated_at) - new Date(a.updated_at));\n\n                setRepos(filteredRepos);\n            } catch (error) {\n                console.error('Erro ao buscar dados do GitHub:', error);\n            }\n        }\n\n        fetchData();\n    }, [githubUsername]);\n\n    return (\n        \u003cdiv className={styles.lab_page}\u003e\n            \u003csection\u003e\n                \u003ch1\u003eLabs\u003c/h1\u003e\n                \u003cp className={styles.description}\u003eTodo projeto desenvolvido pelos membros da WebTech gera um ou mais labs, que são repositórios no GitHub que contam com todo o detalhamento técnico das tecnologias utilizadas e dos conhecimentos desenvolvidos.\u003c/p\u003e\n                \u003cdiv className={styles.grid}\u003e\n                    {repos.map((repo) =\u003e (\n                        \u003cLabCard key={repo.id} repo={repo} /\u003e\n                    ))}\n                \u003c/div\u003e\n                \u003cdiv className={styles.grid}\u003e\n                \u003c/div\u003e\n            \u003c/section\u003e\n        \u003c/div\u003e\n    );\n}\n\nexport default Labs;\n```\n##### Utilize o CSS: ``Labs.module.css``\n\nNesta página, buscamos informações do perfil GitHub da WebTech, filtrando especificamente os repositórios que são identificados como \"labs\". Além disso, coletamos dados sobre os contribuidores de cada projeto, destacando quem contribuiu para cada lab.\n\nNote que estamos utilizando um componente que ainda não foi criado no projeto, o ``LabCard``. Esse componente será responsável por exibir as informações de cada repositório em um formato de card. A seguir, vamos criar o LabCard:\n\n- Vá em ``src/components/layout``\n\n- Crie um arquivo chamado ``LabCard.js``\n\n- Nesse arquivo insira o código abaixo:\n\n```jsx\n// src/components/layout/LabCard.js\nimport LabLabel from './LabLabel';\nimport LabContributor from './LabContributor';\nimport styles from './LabCard.module.css';\n\nfunction LabCard({ repo }) {\n    return (\n        \u003cdiv className={styles.lab_card}\u003e\n            \u003cdiv\u003e\n                \u003cdiv className={styles.card_top}\u003e\n                    \u003ch5\u003e{repo.name}\u003c/h5\u003e\n                    \u003cdiv className={styles.contributors}\u003e\n                        {repo.contributors.slice(0, 3).map((contributor) =\u003e (\n                            \u003cLabContributor key={contributor.id} contributor={contributor} /\u003e\n                        ))}\n                    \u003c/div\u003e\n                \u003c/div\u003e\n                \u003cp\u003e{repo.description}\u003c/p\u003e\n            \u003c/div\u003e\n            \u003cdiv className={styles.card_footer}\u003e\n                \u003cdiv className={styles.labels}\u003e\n                    {repo.language \u0026\u0026 \u003cLabLabel\u003e{repo.language}\u003c/LabLabel\u003e}\n                    {repo.stargazers_count \u003e 0 \u0026\u0026 \u003cLabLabel\u003e {repo.stargazers_count}\u003c/LabLabel\u003e}\n                \u003c/div\u003e\n                {/* \u003cButtonLink text=\"Saiba mais\" link={repo.html_url} /\u003e*/}\n                \u003cdiv\u003e\n                    \u003ca href={repo.html_url}\u003eSaiba mais\u003c/a\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \n    );\n}\n\nexport default LabCard;\n```\n\n##### Utilize o CSS: ``LabCard.module.css``\n\n\nEsse código exibe as informações de cada repositório, recebendo o próprio repositório como parâmetro. Ele organiza os dados nos locais apropriados e faz uso de dois componentes adicionais: ``LabContributor`` e ``LabLabel``.\n\nA seguir, vamos criar o primeiro componente, o ``LabContributor``:\n\n- Navegue até ``src/components/layout``.\n\n- Crie um arquivo chamado ``LabContributor.js``.\n\n- Insira o seguinte código:\n\n```jsx\n// src/components/layout/LabContributor.js\nimport styles from './LabContributor.module.css'\n\nfunction LabContributor({ contributor }) {\n  return (\n    \u003cdiv className={styles.lab_contributor}\u003e\n      \u003ca href={contributor.html_url} target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n        \u003cimg\n          src={contributor.avatar_url}\n          alt={contributor.login}\n        /\u003e\n      \u003c/a\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default LabContributor;\n```\n\n##### Utilize o CSS: ``LabContributor.module.css``\n\n\nO código recebe o contribuidor associado e exibe suas informações básicas. Em seguida, vamos criar o componente ``LabLabel``:\n\n- Vá para ``src/components/layout``\n\n- Crie um arquivo chamado ``LabLabel.js``\n\n- Insira o código abaixo:\n\n```jsx\n// src/components/layout/LabLabel.js\nimport styles from './LabLabel.module.css'\n\nfunction LabLabel({ children }) {\n    return (\n        \u003cdiv className={styles.lab_label}\u003e{children}\u003c/div\u003e\n    );\n}\n\nexport default LabLabel;\n```\n\n##### Utilize o CSS: ``LabLabel.module.css``\n\nCom isso, concluímos a criação da nossa primeira página em React, aplicando conceitos fundamentais como rotas, JSX, componentes, props e estados. \n\nExplore mais desta tecnologia incrível, experimentando com novos conceitos e criando páginas adicionais semelhantes às da WebTech. Ao concluir o projeto, sua página deve se assemelhar ao exemplo mostrado abaixo. Acesse o site da **[WebTech](https://webtech.network/)** e tente replicar mais páginas para aprimorar ainda mais suas habilidades!\n\n![Página Final](assets/final_page.png)\n\n##### Explore os arquivos desse repositório e insira componentes como ``Footer.js``\n\n\n## Boas práticas\n\n- Organização de Componentes\n  - **Componentes Pequenos e Reutilizáveis:** Divida sua aplicação em componentes pequenos, independentes e reutilizáveis.\n  - **Pastas por Funcionalidade:** Organize os arquivos do projeto por funcionalidade em vez de tipo de arquivo (ex: ``components/Button.js`` em vez de ``components/Buttons/Button.js``).\n\n- Estado e Props\n  - **Gerenciamento de Estado:** Use hooks como ``useState`` e ``useReducer`` para gerenciar o estado local dos componentes.\n  - **Lift State Up:** Eleve o estado para o componente mais próximo comum quando necessário compartilhar dados entre componentes.\n  - **Prop-Types:** Utilize ``PropTypes`` para documentar e validar os tipos de props que um componente deve receber.\n\n```jsx\nimport PropTypes from 'prop-types';\n\nconst Saudacao = ({ nome }) =\u003e {\n  return \u003ch1\u003eOlá, {nome}!\u003c/h1\u003e;\n};\n\nSaudacao.propTypes = {\n  nome: PropTypes.string.isRequired,\n};\n```\n\n- Hooks\n  - **useEffect**: Utilize useEffect para efeitos colaterais, mas certifique-se de limpar os efeitos, se necessário, para evitar vazamentos de memória.\n  - **Custom Hooks**: Crie hooks personalizados para encapsular a lógica reutilizável.\n\n#### Use Effect\n```jsx\nimport React, { useEffect } from 'react';\n\nconst ComponenteFuncional = () =\u003e {\nuseEffect(() =\u003e {\n  // Código para buscar dados ou configurar assinaturas\n\n  return () =\u003e {\n    // Código para limpar assinaturas\n  };\n}, []);\n\nreturn \u003cdiv\u003eOlá, eu sou um componente funcional!\u003c/div\u003e;\n};\n\nexport default ComponenteFuncional;\n```\n\n#### Custom Hooks\n```jsx\nimport { useState, useEffect } from 'react';\n\nconst useFetch = (url) =\u003e {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() =\u003e {\n    fetch(url)\n      .then((response) =\u003e response.json())\n      .then((data) =\u003e {\n        setData(data);\n        setLoading(false);\n      });\n  }, [url]);\n\n  return { data, loading };\n};\n\nexport default useFetch;\n```\n\n- Estilização\n  - **CSS Modules:** Use CSS Modules para escopo local de estilos e evitar conflitos de nomes.\n\n```jsx\n/* Button.module.css */\n.button {\n   background-color: blue;\n   color: white;\n }\n\nimport styles from './Button.module.css';\n```\n\n## Novas tendências em React e Front-End\n\nReact, a popular biblioteca para construção de interfaces de usuário, está sempre evoluindo para atender às necessidades crescentes dos desenvolvedores e das aplicações modernas. Aqui estão algumas das principais tendências e inovações em React que estão moldando o futuro do desenvolvimento web:\n\n### 1. Suspense e Concurrent Mode\n\nO React Suspense e o Concurrent Mode são duas das principais inovações para melhorar a performance e a experiência do usuário. O Suspense permite que você defina quais partes da interface podem ser renderizadas de forma assíncrona, enquanto o Concurrent Mode permite que o React interaja com a UI de forma mais fluida e responsiva, evitando bloqueios e melhorando a experiência geral.\n\n### 2. React Server Components\n\nOs React Server Components são uma nova forma de renderizar componentes no servidor, que permite construir aplicações mais rápidas e eficientes. Eles ajudam a otimizar o carregamento inicial da página, reduzindo a quantidade de JavaScript enviado ao cliente e melhorando o desempenho geral.\n\n### 3. Hooks Avançados\n\nOs Hooks continuam a ser uma tendência significativa, com novos hooks sendo adicionados e mais práticas recomendadas surgindo. Hooks como useMemo, useCallback, e useReducer têm se mostrado essenciais para gerenciar estados e efeitos em componentes funcionais, enquanto novos hooks personalizados oferecem soluções específicas para problemas comuns.\n\n### 4. Web Vitals e Performance\nA medição e otimização dos Web Vitals, como tempo de carregamento, interatividade e estabilidade visual, estão se tornando essenciais. O React está se ajustando para oferecer melhores práticas e ferramentas para monitorar e melhorar esses aspectos críticos da performance.\n\n### 5. TypeScript e Tipagem Estática\n\nA integração com TypeScript está se tornando cada vez mais comum, proporcionando uma tipagem estática robusta para aplicações React. Isso ajuda a reduzir erros e melhora a manutenção do código, especialmente em projetos grandes e complexos.\n\n### 6. Design Systems e Component Libraries\nO uso de sistemas de design e bibliotecas de componentes (como Material-UI, Ant Design e Chakra UI) está crescendo, permitindo a criação de interfaces consistentes e reutilizáveis com maior eficiência.\n\n### 7. Automação e Ferramentas de Desenvolvimento\nA automação de tarefas e a integração contínua (CI) estão se tornando padrão em projetos React. Ferramentas como Jest para testes, ESLint para linting, e Prettier para formatação de código são cada vez mais integradas para garantir a qualidade e a consistência do código.\n\n### 8. Otimização com React Query e SWR\nFerramentas como React Query e SWR estão ganhando popularidade para gerenciamento e cache de dados. Elas facilitam a busca, o cache e a sincronização de dados com o servidor, melhorando a eficiência das aplicações e simplificando o gerenciamento de estado.\n\n### 9. Next.js e Frameworks de Renderização\nFrameworks como Next.js continuam a ser amplamente utilizados em conjunto com React para fornecer renderização no servidor (SSR), geração de sites estáticos (SSG) e outras funcionalidades avançadas. Esses frameworks ajudam a melhorar o desempenho, SEO e a experiência do desenvolvedor.\n\nPara isso, produzimos outro lab essencial para quem deseja explorar sobre front-end, explicando um pouco mais de Next.js. Entre no **[link](https://github.com/WebTech-PUC-Minas/lab-next-js)** e aprenda sobre Next.js!!\n\n\u003cbr/\u003e\n\nEssas tendências estão moldando o futuro do desenvolvimento com React, ajudando os desenvolvedores a criar aplicações mais rápidas, escaláveis e eficientes. Ficar atualizado com essas tendências pode oferecer uma vantagem significativa na construção de aplicações modernas e de alta qualidade.\n\n## Contato\n\nMariana Almeida - [marianaalmeidafga@gmail.com](mailto:marianaalmeidafga@gmail.com).\nGitHub: [github.com/marialmeida1](https://github.com/marialmeida1)\n\nNilson Deon Cordeiro Filho - [nilsondeon01@gmail.com](mailto:nilsondeon01@gmail.com@gmail.com).\nGitHub: [github.com/NilsonDeon](https://github.com/NilsonDeon)\n\n## License\n\nEste projeto é licenciado sob a [Nome da Licença](URL da Licença) - veja o arquivo [LICENSE.md](LICENSE.md) para mais detalhes.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebtech-network%2Flab-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebtech-network%2Flab-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebtech-network%2Flab-react/lists"}