✅ Relógio que captura horário atual e vai atualizando na tela a cada segundo
✅ Contador, a cada clique no + soma1, a cada clique no - diminui1
✅ Site de apresentação pessoal com múltiplas páginas
✅ TODO list com testes unitários
✅ Consumir API, mostrar dados na tela e permitir filtro
Já imaginou se você pudesse aprender a programar com a tecnologia que o Facebook, Instagram, WhatsApp, Twitter, Netflix, Airbnb, Notion, Trello, Tiktok e muitas outras gigantes usam? O que mudaria de possibilidades e oportunidades para sua carreira? Já parou pra refletir sobre isso?
Pois bem, react é uma biblioteca JavaScript usada para criar interfaces para pessoas usuárias.
Já quero abrir um parenteses aqui pra explicar que bibliotecas são conjuntos de funcionalidades criadas por outras pessoas desenvolvedoras que passaram por grandes problemas pra resolver e decidiram deixar a solução disponível em pacotes para que outras pessoas possam usar. Boazinhas, né? Eu amooo!rs
E que interfaces de usuários são aquelas telas lindas e cheias de funções que as pessoas usuárias podem interagir. No Instagram por exemplo: a tela de login, o feed onde os posts aparecem, o explorar, os stories, cada pequeno botão de curtir, compartilhar, comentar enfim.
Sim, react e á uma das tecnologias que essas empresas que eu falei e muitas outras do Brasil e do mundo usam. Eu mesma trabalho com essa tecnologia na Thoughtworks. :)
A grande vantagem é que trabalhar com React torna a vida da pessoa desenvolvedora mais fácil, pois a gente consegue criar soluções complexas de uma maneira mais simples e em menos tempo.
Além disso tudo, é importante saber também que com React é possível criar SPA. Um acrônimo para Single Page Application que é uma única página web com super poderes para lidar com diferentes dados a partir das interações das pessoas usuárias.
Na prática, quando alguém clica num botão para abrir uma página nova, o que acontece por debaixo dos panos é a atualização de uma pequena parte de nossa única tela, em vez de atualizar a página inteira para mostrar o esperado.
Eu sei que ainda tá muito abstrato pra visualizar, mas daqui a pouquinho vai fazer mais sentido. Confia em mim e vamos que vamos!
Com esses projetos você será capaz de treinar fundamentos da ferramenta e sair do zero. Confere aqui embaixo todo o conteúdo que dá pra treinar:
- Olá, Mundo! Criando e entendendo meu primeiro projeto react (create react app, react.render, estrutura de pastas)
- Componentes em react e jsx
- Props
- Listas e Keys (criando e mapeando dados no React)
- Introdução aos Hooks e eventos (onChange e onClick)
- State - useState
- UseEffect - Consumindo API em react
- Criando Rotas (react router dom)
- Como usar imagens em react
- Como usar CSS em react
- Introdução aos testes no React (React Testing Library)
Aqui estão alguns 5 recadinhos importantes para que você possa aproveitar ao máximo esses repositórios.
1- Preste bastante atenção em cada linha! Leia a documentação oficial e pesquise bastante pra entender como cada arquivo funciona dentro do React.
2- Faça anotações quando necessário! Quando a gente está estudando comentar código é uma excelente ferramenta pra gente entender cada linha.
3- Pause, respire e repita o código quantas vezes forem necessárias. A gente só aprende com a mão na massa.
4- Não se assute! É um conteúdo novo e a gente tá aqui pra aprender juntas. Nesse meio tempo, vamos errar, rir e nos divertir muito. Então quando o erro aparecer, leve na boa e corrija tudinho. Se você encontrar erros por aqui, me manda mensagem pra eu corrigir. Sugestões de melhorias são sempre bem vindas. <3 haha
5- Coloque todos os exemplos em prática! Repita, absolutamente, todo o código! Vai fazer total diferença no final! E quem sabeee, crio esses tutoriais e coloco no meu canal do youtube?
Siga os passos e inclua as informações abaixo:
| Passo | Comando/informação |
|---|---|
| Faça o fork | botão de forkar |
| Faça o clone | git clone |
| Instale as dependências | yarn |
| Rode os testes | yarn test |
| Rode o projeto no localhost | yarn start |
- Hooks customizados
- Context API
- Libs diversas disponíveis para React (formulário, estilo, tradução etc.)
- Melhores práticas e pensamento crítico para criação dos seus componentes
Foi incrível compartilhar essa jornada com você! Qualquer dúvida ou sugestão, chama no contatinho!
Instrutora de programação para iniciantes, desenvolvedora na ThoughtWorks e criadora do Canal e Podcast Quero Ser Dev.
Vamos nos conectar!
Feito com 💜 por Simara Conceição