# JavaScript & React — Estudo

_Fonte: project-based-learning_

---

## 📚 Recursos Estudados

| Tutorial | Stack | Tópicos |
|----------|-------|---------|
| [JavaScript30](https://javascript30.com) | Vanilla JS | 30 projetos em 30 dias |
| [Pure JS App](https://medium.com/codingthesmartway-com-blog/pure-javascript-building-a-real-world-application-from-scratch-5213591cfcd6) | Vanilla JS | App do zero |
| [React Trello Clone](http://codeloveandboards.com/blog/2016/01/04/trello-tribute-with-phoenix-and-react-pt-1/) | React | Kanban, drag & drop |
| [React + Node Voting App](https://sahatyalkabov.com/create-a-character-voting-app-using-react-nodejs-mongodb-and-socketio) | React, Node, MongoDB | Full stack |
| [React Yelp Clone](https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/) | React | Maps, search, reviews |
| [React Medium Clone](https://medium.com/@kris101/clone-medium-on-node-js-and-react-js-731cdfbb6878) | React, Node | CMS-like |
| [React Chat App](https://medium.freecodecamp.org/how-to-build-a-chat-application-using-react-redux-redux-saga-and-web-sockets-47423e4bc21a) | React, Redux, Saga, WS | Tempo real |
| [React Native Todo](https://blog.hasura.io/tutorial-fullstack-react-native-with-graphql-and-authentication-18183d13373a) | React Native, GraphQL | Mobile |
| [Angular Instagram Clone](https://hackhands.com/building-instagram-clone-angularjs-satellizer-nodejs-mongodb/) | Angular 1.x, Node | Full stack |
| [Angular 8 Real World App](https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-8-the-ultimate-guide-2019-part-ii-fe70852b2d6d) | Angular 8 | App completo |

## 🎯 Aplicações para Mundo Telecom

1. **Dashboard de editais** — React + API Flask
2. **Site institucional** — Next.js (já temos omnicloud rodando!)
3. **Chat interno** — WebSockets + React + Node
4. **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

- [x] JavaScript30 (estudado)
- [x] React Fundamentos
- [x] React Ecosystem
- [x] React Native
- [ ] Angular (estudado conceitos)
- [ ] Full Stack: React + Node + MongoDB
- [ ] Chat App com WebSockets