JavaScript & React — Estudo
Fonte: project-based-learning
📚 Recursos Estudados
| Tutorial |
Stack |
Tópicos |
| JavaScript30 |
Vanilla JS |
30 projetos em 30 dias |
| Pure JS App |
Vanilla JS |
App do zero |
| React Trello Clone |
React |
Kanban, drag & drop |
| React + Node Voting App |
React, Node, MongoDB |
Full stack |
| React Yelp Clone |
React |
Maps, search, reviews |
| React Medium Clone |
React, Node |
CMS-like |
| React Chat App |
React, Redux, Saga, WS |
Tempo real |
| React Native Todo |
React Native, GraphQL |
Mobile |
| Angular Instagram Clone |
Angular 1.x, Node |
Full stack |
| Angular 8 Real World App |
Angular 8 |
App completo |
🎯 Aplicações para Mundo Telecom
- Dashboard de editais — React + API Flask
- Site institucional — Next.js (já temos omnicloud rodando!)
- Chat interno — WebSockets + React + Node
- App mobile — React Native para equipe de campo
📝 Conceitos Aprendidos
JavaScript Core (JavaScript30)
| Projeto |
Conceito |
| Drum Kit |
Event listeners, áudio |
| CSS Clock |
Transform, transition |
| Array Cardio |
map, filter, reduce, sort |
| Flex Gallery |
CSS Flexbox, transitions |
| Canvas |
HTML5 Canvas API |
| Dev Tools |
Console tricks, debug |
| Speech Detection |
Web Speech API |
| Geolocation |
Navigator API |
| Video Speed Controller |
HTML5 Video API |
| Whack-a-Mole |
Game loop, timer |
React Fundamentos
- Componentes: Function + Hooks (useState, useEffect, useContext)
- Estado: Local (useState) vs Global (Redux, Context API)
- Side Effects: useEffect, useCallback, useMemo
- Roteamento: React Router (SPA)
- Formulários: Controlled components, Formik, React Hook Form
React Ecosystem
| Ferramenta |
Função |
| Next.js |
SSR, SSG, ISR (já usamos!) |
| Redux/Zustand |
Estado global |
| React Query/TanStack |
Server state, cache |
| React Router |
Navegação SPA |
| Tailwind CSS |
Estilização utility-first |
Angular vs React
| Aspecto |
React |
Angular |
| Tipo |
Biblioteca |
Framework completo |
| Curva |
Baixa |
Alta |
| Typescript |
Opcional |
Obrigatório |
| Tamanho |
Leve |
Pesado |
| Ideal para |
SPAs, dashboards, apps dinâmicos |
Apps corporativos complexos |
✅ Progresso
OpenClaw Diego