modern js

Caminho para javascript moderno e reagem

O objetivo deste guia é fornecer uma lista de vários Ressources gratuitos (artigos, livros, vídeos?) O que o ajudará a aprender javascript moderno e a biblioteca React.

️ Este guia não se destina a listar tudo o que você deve saber sobre JavaScript ou reagir. Tentei listar o que poderia ser útil se você fosse totalmente novo neste mundo com base na minha experiência e nas pessoas que conheci. Se a sua coisa favorita não estiver listada lá, isso não significa que eu não gosto ou desaprovo. Por exemplo, o TypeScript ou o GraphQL são ótimos, mas não acho obrigatório aprender isso primeiro como iniciante .

1) JavaScript moderno?

Tutoriais que cobrem tudo:

• Aprenda o desenvolvimento da Web também ensinará a você HTML e CSS.
• O eloquente JavaScript é perfeito para aprender JS e conceitos gerais de programação.
• O tutorial moderno de JavaScript como é feito agora. Do básico a tópicos avançados com explicações simples, mas detalhadas.
• Aprender ES6 (ECMAScript 2015)? Se você costumava escrever JavaScript há um tempo atrás e quer acompanhar as sintaxes modernas.

Artigos e vídeos que gostei:

• Javascript moderno explicou para dinossauros que você aprenderá básicos sobre NPM, Babel, Webpack etc. e a história por trás disso.
• Compreendendo a ialha em JavaScript Se você vier de outra linguagem de programação, pode se sentir desconfortável com a forma como podemos declarar variáveis ​​no JS. Este artigo ajudará você a se sentir melhor!
• Debug JavaScript? O Firefox ou o Edge também têm seus próprios devtools, mas eu pessoalmente prefiro usar o Chrome ao codificar.
• Programação funcional em JavaScript? Esses vídeos são feitos por um ex -desenvolvedor do Spotify JS. Ele ensinará conceitos essenciais como promessas, fechamentos ou funções de ordem superior. Essas coisas são essenciais no React.
• Composição sobre herança? Na escola, tive que fazer muita programação orientada a objetos. Este vídeo me ajudou a entender por que nem sempre é necessário.

Documentação

Às vezes, você precisará procurar documentação, por exemplo, se não conhece uma palavra -chave específica em uma base de código ou gostaria de aprender a usar uma função nativa. Obviamente, você pode usar qualquer mecanismo de pesquisa ou StackOverflow, mas eu recomendaria o uso dos documentos da Web do MDN.

2) React ⚛️

• O que é reação: uma introdução visual para iniciantes
• JavaScript para saber para reagir
• O médico oficial é o melhor lugar para aprender reagir.
• O guia para iniciantes para reagir?
• Dicas de reação progressiva para tornar o seu desempenho de reação performante. Web.dev também tem muitos artigos como esse.
• Padrões de aprendizado Padrões de criação de aplicativos da Web poderosos com JavaScript de baunilha e reação.

Ganchos? Componentes da classe

Os ganchos são muito específicos, sugiro que você verifique por que reagir ganchos? ? Para saber mais sobre a história do React e ou por que agora usamos ganchos. Você também pode querer aprender sobre os componentes da aula e alguns padrões usados ​​para compartilhar a lógica entre os componentes (antes da chegada dos ganchos), porque ainda existem muitas bases de código:

• Compare o diagrama de fluxo de gancho com o diagrama de métodos de ciclo de vida do componente de classe
• Componentes de ordem superior: um padrão de design de aplicação do React
• Renderizar adereços

Gerenciamento do estado e outras bibliotecas

Em algum momento, você pode pensar que seria bom ter acesso a algum tipo de estado global em qualquer componente do React, a fim de evitar transmitir adereços repetidamente ... as pessoas podem dizer para você usar o Redux ou Mobx ou Apollo ou Xstate ou [Insira o nome da biblioteca popular] para conseguir isso, mas pode ser exagerado! Eu recomendaria ler o artigo React State Management Libraries e como optar por obter uma boa visão geral. As bibliotecas de reação para 2023 também abordarão esse assunto e muito mais!

3) O que vem a seguir!? ?

• Mantenha -se atualizado e descubra coisas novas com o React Newsletter e Bytes Newsletter;
• Pratique reagir com Create-React-App ou diretamente no seu navegador no CodESandBox
• Construa aplicativos prontos para a produção com: Vite, Next.js, Gatsby, reage nativo via Expo;

Que tal estilo? ?

Alguns conceitos básicos

• Aprenda a CSS um curso CSS sempre -verde e referência para subir de nível sua experiência em estilo web.
• CSS moderno explicado para dinossauros
• CSS-in-JS ou CSS e JS
• Doc Doc do React Official de Estilo e CSS

Somne Bibliotecas que você pode usar para gerenciar seu estilo:

• Tailwind
• Módulos CSS
• baunilha-extrato
• Emoção
• Componentes estilizados, acho que eles são os melhores entre a escolha para aqueles que são usados ​​para escrever CSS "clássicos" e querem tirar proveito de misturá -lo com JavaScript.

Sistemas de design

Talvez você só queira criar um aplicativo e evitar gastar muito tempo escrevendo CSS e HTML. Sugiro que você use bibliotecas como material-UI, design de formigas ou polaris. Se você deseja criar seu próprio sistema de design, sugiro que você leia o design atômico.

Que tal testar? ?

• Mas realmente, o que é um teste de JavaScript?
• Como usar o React Testing Library Tutorial Compreende o NEST e aprendeu a escrever testes automatizados por meio da Biblioteca de Testes do React (existem outras bibliotecas de teste, mas o RTL é um ótimo recomendado pelo DOC oficial).
• Entender a zombaria do jest zomba é uma técnica para isolar os sujeitos do teste, substituindo dependências por objetos que você pode controlar e inspecionar.
• Por que Cypress? ? uma biblioteca para escrever testes de ponta a ponta e muito mais;

Outras ferramentas que eu padrão

• Editor de código: vs código;
• Formatador de código automático: mais bonito;
• Linter: Eslint;
• Gerencie Git por meio de uma interface do usuário em vez de comandos: Sourcetree ou vs Code;
• Construa e implante seu aplicativo: netlify;
• Integração contínua: Travis CI;
• Comprar nome de domínio: Google Domains;

Outras bibliotecas que eu padrão

• Roteamento: react-router;
• Internacionalização: Linguijs;
• Desenvolva seus componentes isoladamente e compartilhe -os com sua equipe via livro de histórias. Implante seu livro de histórias e execute testes de captura de tela em cada história via Chromatic;
• API zombando ao testar: Mock Service Worker;

Cursos pagos?

Os que eu recomendo depois de concluí -los:

• Cursos de Wes Bos? JavaScript, React, CSS e muito mais; Alguns são até grátis !
• Kent C. Dodds Cursos? Reagir, teste;