O empregador rejeita a maioria dos currículos simplesmente executando-os na diagonal. Isso é um pouco desanimador, certo? Portanto, é muito importante que ele veja imediatamente o conhecimento e as habilidades que precisa de você. Agora é um bom momento para atualizar, especialmente se você não tem nada do que se gabar em seu currículo. Você não precisa ir para a universidade para aprender novas habilidades: você só precisa ir na direção certa e não se desviar dela.
Se você, por exemplo, sabe como fazer no ReactJS, isso permitirá que se torne um especialista mais requisitado. Se você é um desenvolvedor web iniciante e já conhece JavaScript e HTML, ReactJS é o próximo passo.
Neste artigo, compartilharei minha lista de ferramentas e bibliotecas que vale a pena aprender para se tornar um bom desenvolvedor de JavaScript e usar o React.
O que é React e por que vale a pena aprender?
React é uma biblioteca js para desenvolvimento de interface de usuário que o Facebook lançou em maio de 2013 (e continua a oferecer suporte). Ele permite que você crie interfaces de usuário dinâmicas em JavaScript.
Como o React é uma das bibliotecas js mais poderosas que existe, você pode fazer muitas coisas boas aprendendo-o. React é usado por desenvolvedores Amazon, PayPal, BBC, CNN e muitos outros gigantes da tecnologia. Além disso, a biblioteca é flexível o suficiente para atender a qualquer necessidade. Pode ser usado em conjunto com sua pilha de tecnologia favorita. O React pode ser usado para criar painéis de dados, aplicativos de mensagens, aplicativos de redes sociais, aplicativos da web de página única e blogs pessoais.
Se você aprender a reagir enquanto trabalha em projetos reais, isso não apenas ajudará você a aprender rapidamente, mas também dará a oportunidade de se exibir para empregadores em potencial.
1.npm
É claro que esta ferramenta não será uma revelação para ninguém. Eu simplesmente não conseguia ignorá-lo.
Para trabalhar com JavaScript (incluindo a biblioteca React), você precisa instalar o gerenciador de pacotes Node ( npm ). Como o gerenciador de pacotes que vem com sua distribuição Linux (ou Chocolatey para Windows ou Homebrew para macOS), o npm fornece comandos para consultar o repositório de software e instalar os pacotes necessários, incluindo componentes ReactJS.
Você pode instalar o Node.js (e o npm junto com ele) do repositório de sua distribuição Linux.
No Fedora ou Red Hat Enterprise Linux, faça o seguinte:
$ sudo dnf install nodejsNo Ubuntu ou Debian, é um pouco diferente:
$ sudo apt install nodejs npmSe o npm não estiver incluído no repositório de sua distribuição, visite Nodejs.org para saber como instalar o Node.js e o npm neste caso.
2. Início rápido
Criar aplicativo React é um projeto modelo para criar aplicativos React rapidamente. Configurar um projeto funcional no React costumava ser uma tarefa tediosa. Mas com esta ferramenta, você pode configurar um pipeline de construção de front-end, estrutura de projeto, ambiente e otimização de aplicativo para configuração zero em segundos. Você pode fazer isso com um comando. Além disso, se você precisar de uma configuração mais complexa, pode "extrair" o aplicativo Create React e editar seus arquivos de configuração diretamente.
O aplicativo Create React é de código aberto licenciado sob a licença do MIT. Seu código-fonte está no repositório GitHub.
Instalação:
npm start
npm init react-app my-appSe você não quiser usar o aplicativo Create React, consulte React Boilerplate e React Slingshot . Ambos são de código aberto sob a licença do MIT.
3. Reagir à vista
React Sight é uma ferramenta de visualização popular que permite apresentar seu aplicativo como uma árvore hierárquica de componentes (como um fluxograma). Ele pode ser conectado como uma extensão do Chrome (você ainda precisa reagir devtools para exibir informações sobre seu aplicativo). Usando sua interface, você pode adicionar filtros para focar nos componentes com os quais você mais precisa interagir. Passar o mouse sobre os nós exibirá informações sobre o estado atual e as propriedades do componente. O React Sight é muito útil para depurar projetos grandes e complexos.
React Sight é lançado sob a licença do MIT, e você pode acessar seu código-fonte no repositório GitHub. Você pode usar a loja da web do Chrome para instalá-lo .
4. Reaja Belle
React Belle é uma biblioteca personalizada do React que contém componentes reutilizáveis: Alternar, Classificação, Selecionador de Data, Botão, Cartão, Selecionar e muito mais. Ele é projetado para fornecer uma experiência de usuário conveniente. Os componentes são otimizados para celular e desktop. Eles são altamente personalizáveis e oferecem suporte aos Padrões de Acessibilidade para Pessoas com Deficiências ( WAI-ARIA ). A biblioteca oferece suporte a vários temas, como Belle e Bootstrap.
O Belle foi lançado sob a licença do MIT e você pode acessar seu código-fonte no repositório GitHub.
Instalação:
npm install belle5. Evergreen
Construído em cima de uma primitiva React UI, Evergreen é uma estrutura de UI contendo componentes de alta qualidade que você pode usar para construir seu projeto. Os desenvolvedores adoram essa ferramenta por sua fácil importação de componentes.
Evergreen é lançado sob a licença do MIT, e você pode acessar seu código-fonte no repositório GitHub.
Instalação:
npm install --save evergreen-ui6. Bit
Bit é uma plataforma online e ferramenta de linha de comando para publicar e compartilhar aplicativos React. Esta é uma das melhores opções se você estiver construindo e compartilhando componentes. Seu mercado é um lugar onde as pessoas podem publicar seus aplicativos React e pesquisar os componentes de que precisam. Assim, você não precisa reinventar a roda toda vez que precisar de um novo aplicativo ou componente React.
Então Bit:
- fornece reutilização de código;
- aumenta a eficiência de design e desenvolvimento;
- mantém a consistência da IU e UX;
- aumenta a estabilidade do projeto.
O bit é lançado sob a licença Apache 2.0 e você pode acessar seu código-fonte no repositório GitHub.
Instalação:
$ npm install bit-bin --global7. Storybook
Storybook é uma ferramenta para desenvolver rapidamente componentes de IU. Ele permite que você visualize uma biblioteca de componentes e rastreie o status de cada um. Com o StoryBook, você pode desenvolver componentes separadamente de seu aplicativo, tornando mais fácil reutilizar e testar os componentes da IU.
Além disso, a Storybook API oferece muitos recursos e facilita a personalização. Empresas como Coursera, Squarespace e Lonely Planet usam essa ferramenta.
O Storybook é lançado sob a licença MIT, e você pode acessar seu código-fonte no repositório GitHub.
Primeiro instale o Storybook usando os seguintes comandos:
$ cd my-react-app
$ npx -p @storybook/cli sb initEm seguida, execute o comando run:
$ npm run storybook8. Formik
Formik ajuda a criar e validar formulários durante a depuração, teste e análise. Ele permite que você crie formulários dinâmicos, para que você não precise alterar ou atualizar manualmente o estado e as propriedades de seus componentes. Isso torna o desenvolvimento mais rápido e agradável.
Formik é lançado sob a licença MIT, e você pode acessar seu código-fonte no repositório GitHub.
Instalação:
$ npm install formik --save9. Immer
Immer é uma biblioteca js que permite manter a imutabilidade enquanto aumenta a complexidade da estrutura do projeto. Mais precisamente, a biblioteca torna mais fácil manter seu código imutável.
Alguns dos principais recursos do Immer são:
- Immer é fortemente tipado: isso é útil quando seu objeto de estado é de um tipo.
- O Immer reduz o padrão: a maioria das ferramentas de gerenciamento de estado exige que você escreva muito código padrão. O Immer permite que você escreva menos código.
- Immer permite que você use estruturas de dados JS: você pode criar estados imutáveis no Immer usando estruturas de dados JS básicas.
Immer é lançado sob a licença MIT, e você pode acessar seu código-fonte no repositório GitHub.
Instalação:
$ npm install immer10. React Proto
React Proto é uma ferramenta de prototipagem de aplicativos para desenvolvedores e designers. Ajuda a planejar a estrutura do projeto para que você possa tomar decisões com antecedência. Portanto, você não perde tempo fazendo alterações durante o desenvolvimento. Essa ferramenta é especialmente útil para pessoas que preferem design a codificação: por exemplo, você pode arrastar e soltar elementos em vez de escrever código para isso. A ferramenta o ajudará a marcar todos os componentes selecionados e dar-lhes nomes, propriedades e hierarquia.
React Proto é lançado sob a licença MIT, e você pode acessar seu código-fonte no repositório GitHub.
Para instalá-lo, primeiro bifurque o repositório . Em seguida, instale as dependências com:
$ npm installEntão corra:
$ npm start
$ npm run devUm novo passo em sua carreira
Basicamente, você mesmo pode encontrar muitas coisas de JavaScript e React. Mas, para saber mais sobre as ferramentas que mencionei neste artigo (e em muitos outros), verifique o repositório Awesome React GitHub.
Ao estudar e implementar essas ferramentas, você aumentará a produtividade e tornará seu currículo mais atraente para o empregador.
Publicidade
Precisa de um servidor para seu aplicativo ReactJS ou qualquer outra finalidade? Nossos servidores épicos com processadores AMD modernos e poderosos farão muito bem. Uma ampla gama de configurações com pagamento diário.
