/react-links

React-Hooks / Links úteis para pensar sobre estrutura de pastas, arquitetura, boas práticas e tutoriais no React utilizando Hooks.

Referências React

Estrutura de pastas, arquitetura

The 100% correct way to structure a React app (or why there’s no such thing) - Não existem maneiras 100% corretas de estruturar uma aplicação mas ele comenta dos prós e contras de algumas estruturas utilizadas

Github - React Boilerplate - Boilerplate pensado em escalabilidade com foco na performance e boas práticas (usa Redux)

React + Redux codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API - Um bom exemplo de uma aplicação grande em React estruturada

Atomic Design - Documentação sobre o conceito de atomic design

Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles - Facilita a implementação de Atomic Design

Design Systems, wtf? - Pensamentos sobre onde entra o profissional designer e como caminhar com um Design Pattern

Atomic Design with React - Um case interessante de como implementar, muito focado na escalabilidade e estrutura do CSS

Using React within a Design System - Como implementar Atomic Design na estrutura do React e ótimas dicas e ferramentas para ajudar no desenvolvimento

ERP Solution with ReactJS - Uma tese de mestrado sobre a implementação de React em ERP's

Dicas, boas práticas e tutoriais

A collection of awesome things regarding React ecosystem - Milhares de links úteis

Dez obstáculos frequentes encontrados pelos novos usuários do React - Boas dicas para sempre ter em mente mas bem focado no uso do Redux

Ecossistema React e as etapas iniciais no setup de um projeto - Boas práticas e comenta sobre dois catálogos de componentes prontos: http://www.material-ui.com/ / https://ant.design/

Build a CRUD App in React with Hooks - Ótimo para ver como funcionam os Hooks em um CRUD

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

5 Ways to Style React Components in 2019

How to Build a Todo List with React Hooks - Ótimo tutorial para entender o relacionamento entre os componentes e os hooks.

Convertendo um Class Based Component para React Hooks - Bom exemplo para ver as mudanças que os hooks trazem no código

Repositórios

Form with Hooks, codesandbox - Código no codesandbox utilizando form com hooks

Dynamically add name using formik and react hooks - Formulário com hooks - Código no codesandbox utilizando form com hooks

A Soundcloud client built with React / Redux - Interface consumindo API do SoundCloud

Learn React + Redux by building a SoundCloud Client - Interface consumindo API do SoundCloud

Autenticação utilizando react-router e hooks - Ótimo exemplo para ver os hooks com rotas privadas

Vídeos tutoriais

Youtube - Trying out React Hooks - Uma lista de vídeos testando os Hooks assim que foram comentados ainda na versão alpha

React Hooks na prática | Diego Fernandes - Exemplo prático e fácil de entender sobre os Hooks

Tools, frameworks

Storybook - Ótima ferramenta para visualizar todos os componentes, fazer testes e como funcionam.

Formik - Biblioteca para formulários no React

Gatsby Framework - Framework em React

Next Framework - Framework em React