Guia do desenvolvedor React

README in Chinese

README in English

README in Japanese

README in Korean

README in Russian

README in Spanish

Guia para se tornar um desenvolvedor React em 2019: Abaixo, você pode encontrar um diagrama mostrando os caminhos que podem levar, bem como as bibliotecas que você precisa aprender para se tornar um desenvolvedor React. Eu fiz esse esquema como uma dica para qualquer um que me perguntasse: "O que eu deveria aprender mais como desenvolvedor React?"

Aviso

O objetivo deste guia é dar uma ideia geral de como se tornar um desenvolvedor React. Este guia irá ajudá-lo se você estiver confuso sobre o que estudar, em vez de encorajá-lo a escolher algo elegante e popular. Você deve entender gradualmente por que uma ferramenta é mais adequada para determinadas situações do que outra, e não se esqueça de que uma ferramenta moderna e popular nem sempre significa que ela é mais adequada para o trabalho.

Roadmap

Recursos

1. Basico
   1. HTML
      • Aprenda o básico do HTML
      • Desenvolva algumas paginas como exercícios
   2. CSS
      • Aprenda o básico de CSS
      • Aplique estilos nas páginas desenvolvidas anteriormente
      • Desenvolva uma página com CSS Grid e CSS Flexbox
   3. Javascript
      • Se familiarize com a sintaxe
      • Aprenda operações basicas com o DOM
      • Aprenda mecanismos típicos para JS (Hoisting, Event Bubbling, Prototyping)
      • Faça algumas requisições AJAX
      • Aprenda as novas features do javascript (ECMA Script 6+)
      • Opcional: Conheça a biblioteca JQuery
2. Conhecimentos de desenvolvimento em geral
   1. Aprenda GIT, crie repositórios no GitHub e compartilhe seu código com outras pessoas.
   2. Aprenda os protocolos HTTP(S) e metodos de request (GET, POST, PUT, PATCH, DELETE, OPTIONS)
   3. Não tenha medo de utilizar o google, veja o uso avançado do Google
   4. Familiarize-se com terminal e configure-o (bash, zsh, fish)
   5. Leia alguns livros sobre algoritmos e estrutura de dados
   6. Leia alguns livros sobre padrões de projeto (design patterns)
3. Aprenda React no site oficial ou realize alguns cursos
4. Conheça as ferramentas que voce usará
   1. Gerenciadores de pacote
      • npm
      • yarn
      • pnpm
   2. Executadores de tarefas
      • npm scripts
      • gulp
   • Webpack
   • Rollup
   • Parcel
5. Estilização
   1. Pré-processadores CSS
      • Sass/CSS
      • PostCSS
      • Less
      • Stylus
   2. Frameworks CSS
      • Bootstrap
      • Materialize, Material UI, Material Design Lite
      • Bulma
      • Semantic UI
   3. Arquitetura CSS
      • BEM
      • CSS Modules
      • Atomic
      • OOCSS
      • SMACSS
      • SUITCSS
   4. CSS in JS
      • Styled Components
      • Radium
      • Emotion
      • JSS
      • Aphrodite
6. Gerenciamento de estado
   1. Component State/Context API
   2. Redux
      1. Async actions (Side Effects)
         • Redux Thunk
         • Redux Better Promise
         • Redux Saga
         • Redux Observable
      2. Helpers
         • Rematch
         • Reselect
      3. Persistencia de dados
         • Redux Persist
         • Redux Phoenix
      4. Redux Form
   3. MobX
7. Tipagem
   • PropTypes
   • TypeScript
   • Flow
8. Form Helpers
   • Redux Form
   • Formik
   • Formsy
   • Final Form
9. Rotas
   • React-Router
   • Router5
   • Redux-First Router
   • Reach Router
10. Clientes API
    1. REST
       • Fetch
       • SuperAgent
       • axios
    2. GraphQL
       • Apollo
       • Relay
       • urql
11. Bibliotecas uteis
    • Lodash
    • Moment
    • classnames
    • Numeral
    • RxJS
    • ImmutableJS
    • Ramda
12. Testes
    1. Teste unitário
       • Jest
       • Enzyme
       • Sinon
       • Mocha
       • Chai
       • AVA
       • Tape
    2. Teste end-to-end
       • Selenium, Webdriver
       • Cypress
       • Puppeteer
       • Cucumber.js
       • Nightwatch.js
    3. Teste de integração
       • Karma
13. Internacionalização
    • React Intl
    • React i18next
14. Renderização no servidor
    • Next.js
    • After.js
    • Rogue
15. Gerador de site estático
    • Gatsby
16. Integração com estrturas de backend
    • React on Rails
17. Desenvolvimento de aplicativos móveis
    • React Native
    • Cordova/Phonegap
18. Desenvolvimento de aplicativos desktop
    • Proton Native
    • Electron
    • React Native Windows
19. Realidade virtual
    • React 360

Resumo

Se você acha que o guia pode ser melhorado, envie um PR com quaisquer atualizações e envie suas dúvidas. Além disso, continuarei a melhorar este repositório, então, favorite esse repositório para sempre revisitar.

Contribuição

O guia foi criado com a ferramenta online Draw.io. O arquivo do projeto pode ser encontrado no diretório /src. Para alterá-lo, abra o draw.io, clique em Open Existing Diagram e selecione o arquivo xml. Ele irá abrir o guia. Atualize o guia, faça update das imagens no readme (exporte como png) e crie um PR.

• Abra pull request com melhorias
• Discuta novas ideias nas issues
• Compartilhe esse repositorio

Licença