└── README.md /README.md: -------------------------------------------------------------------------------- 1 | ## Referências React 2 | 3 | ### Estrutura de pastas, arquitetura 4 | > [The 100% correct way to structure a React app (or why there’s no such thing)](https://hackernoon.com/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed) - Não existem maneiras 100% corretas de estruturar uma aplicação mas ele comenta dos prós e contras de algumas estruturas utilizadas 5 | 6 | > [Github - React Boilerplate](https://github.com/react-boilerplate/react-boilerplate) - Boilerplate pensado em escalabilidade com foco na performance e boas práticas (usa Redux) 7 | 8 | > [React + Redux codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API](https://github.com/gothinkster/react-redux-realworld-example-app) - Um bom exemplo de uma aplicação grande em React estruturada 9 | 10 | > [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) - Documentação sobre o conceito de atomic design 11 | 12 | > [Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles](https://patternlab.io/) - Facilita a implementação de Atomic Design 13 | 14 | > [Design Systems, wtf?](https://medium.com/buildit/design-systems-wtf-42956f673250) - Pensamentos sobre onde entra o profissional designer e como caminhar com um Design Pattern 15 | 16 | > [Atomic Design with React](https://cheesecakelabs.com/blog/atomic-design-react/) - Um case interessante de como implementar, muito focado na escalabilidade e estrutura do CSS 17 | 18 | > [Using React within a Design System](https://medium.com/buildit/using-react-within-a-design-system-73d4bb0cc822) - Como implementar Atomic Design na estrutura do React e ótimas dicas e ferramentas para ajudar no desenvolvimento 19 | 20 | > [ERP Solution with ReactJS](https://www.theseus.fi/bitstream/handle/10024/142559/Master_Thesis_Koppala_Jarno.pdf) - Uma tese de mestrado sobre a implementação de React em ERP's 21 | 22 | 23 | 24 | ### Dicas, boas práticas e tutoriais 25 | 26 | > [A collection of awesome things regarding React ecosystem](https://github.com/enaqx/awesome-react) - Milhares de links úteis 27 | 28 | > [Dez obstáculos frequentes encontrados pelos novos usuários do React](https://medium.com/nstech/dez-obst%C3%A1culos-frequentes-encontrados-pelos-novos-usu%C3%A1rios-do-react-d08c8de18e2e) - Boas dicas para sempre ter em mente mas bem focado no uso do Redux 29 | 30 | > [Ecossistema React e as etapas iniciais no setup de um projeto](https://medium.com/nstech/ecossistema-react-as-etapas-iniciais-no-setup-de-um-projeto-bbb27f98b6c4) - Boas práticas e comenta sobre dois catálogos de componentes prontos: http://www.material-ui.com/ / https://ant.design/ 31 | 32 | > [Build a CRUD App in React with Hooks](https://www.taniarascia.com/crud-app-in-react-with-hooks/) - Ótimo para ver como funcionam os Hooks em um CRUD 33 | 34 | > [The SoundCloud Client in React + Redux](https://www.robinwieruch.de/the-soundcloud-client-in-react-redux/) - Apesar de não seguir um padrão na estrutura de pastas/arquitetura é um ótimo exemplo de uma aplicação com vários componentes e páginas 35 | 36 | > [5 Ways to Style React Components in 2019](https://blog.bitsrc.io/5-ways-to-style-react-components-in-2019-30f1ccc2b5b) 37 | 38 | > [How to Build a Todo List with React Hooks](https://medium.freecodecamp.org/how-to-build-a-todo-list-with-react-hooks-ebaa4e3db3b) - Ótimo tutorial para entender o relacionamento entre os componentes e os hooks. 39 | 40 | > [Convertendo um Class Based Component para React Hooks](https://willianjusten.com.br/convertendo-um-class-based-component-para-react-hooks/) - Bom exemplo para ver as mudanças que os hooks trazem no código 41 | 42 | 43 | 44 | ### Repositórios 45 | > [Form with Hooks, codesandbox](https://codesandbox.io/s/ywo8rmk7zz?from-embed) - Código no codesandbox utilizando form com hooks 46 | 47 | > [Dynamically add name using formik and react hooks - Formulário com hooks](https://codesandbox.io/s/oqv93roj66) - Código no codesandbox utilizando form com hooks 48 | 49 | > [A Soundcloud client built with React / Redux](https://github.com/andrewngu/sound-redux) - Interface consumindo API do SoundCloud 50 | 51 | > [Learn React + Redux by building a SoundCloud Client](https://github.com/rwieruch/react-redux-soundcloud) - Interface consumindo API do SoundCloud 52 | 53 | > [Autenticação utilizando react-router e hooks](https://github.com/lwazevedo/authappexample) - Ótimo exemplo para ver os hooks com rotas privadas 54 | 55 | 56 | ### Vídeos tutoriais 57 | > [Youtube - Trying out React Hooks](https://www.youtube.com/playlist?list=PLN3n1USn4xllL1OrVr-A4oq7SG-cS9MOQ) - Uma lista de vídeos testando os Hooks assim que foram comentados ainda na versão alpha 58 | 59 | 60 | > [React Hooks na prática | Diego Fernandes](https://www.youtube.com/watch?v=6WB16wZS61c&t=37s) - Exemplo prático e fácil de entender sobre os Hooks 61 | 62 | 63 | ### Tools, frameworks 64 | > [Storybook](https://github.com/storybooks/storybook) - Ótima ferramenta para visualizar todos os componentes, fazer testes e como funcionam. 65 | 66 | > [Formik](https://github.com/jaredpalmer/formik) - Biblioteca para formulários no React 67 | 68 | > [Gatsby Framework](https://www.gatsbyjs.org/) - Framework em React 69 | 70 | > [Next Framework](https://nextjs.org/) - Framework em React 71 | --------------------------------------------------------------------------------