Add study notes: 22 areas documented by Diego IA

2026-05-30 23:59:33 +00:00
parent 243d33995f
commit a932d98cd6
17 changed files with 1591 additions and 0 deletions
@@ -0,0 +1,82 @@
+# 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