Um tutorial de Boilerplate de Reação Completa – De Zero a Herói

Leonardo Maldonado Blocked Unblock Seguir Seguindo 4 de janeiro

Quando estamos começando a aprender React, para fazer nossos projetos, precisamos fazer um clichê do zero ou usar alguns fornecidos pela comunidade. Quase todas as vezes é o aplicativo de criação de reação que usamos para criar um aplicativo sem configuração de construção. Ou nós apenas fazemos nosso próprio clichê simples do zero.

A partir disso, vem à mente: por que não criar um clichê com todas as dependências que eu sempre uso e deixá-lo pronto? A comunidade também pensou assim, então agora temos vários boilerplates criados pela comunidade. Alguns são mais complexos do que outros, mas eles sempre têm o mesmo objetivo de economizar o máximo de tempo possível.

Este artigo ensinará como você pode criar seu próprio clichê desde o início, com as principais dependências usadas na comunidade React hoje. Nós vamos usar alguns dos recursos modernos mais comuns nos dias de hoje e de lá você pode personalizá-lo da maneira que quiser.

O clichê criado por este artigo estará disponível aqui!

Começando

Primeiro de tudo, vamos criar uma pasta para iniciar nosso clichê. Você pode dar o nome que quiser, eu vou nomear o meu reagir .

Abra seu terminal e crie-o assim:

 mkdir react-bolt 

Agora, vá para sua pasta criada e digite o seguinte comando:

 npm init -y 

O NPM criará um arquivo package.json para você e todas as dependências que você instalou e seus comandos estarão lá.

Agora, vamos criar a estrutura básica de pastas para nosso clichê. Vai ser assim por agora:

 react-bolt 
|--config
|--src
|--tests

Webpack

O Webpack é o pacote de módulos mais famoso para aplicativos JavaScript atualmente. Basicamente, ele empacota todo o seu código e gera um ou mais pacotes. Você pode aprender mais sobre isso aqui .

Neste clichê vamos usá-lo, então instale todas essas dependências:

 npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin img-loader url-loader file-loader 

Agora em nossa config pasta, vamos criar uma outra pasta chamada webpack , em seguida, dentro de que webpack pasta criar 5 arquivos.

Crie um arquivo chamado paths.js . Dentro desse arquivo vai ser o diretório de destino para todos os seus arquivos de saída.

Dentro dele, coloque todo esse código:

Agora, crie outro arquivo chamado rules.js e coloque o seguinte código lá:

Depois disso, vamos criar mais três arquivos:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

Basicamente, em nosso arquivo webpack.common.babel.js , configuramos nossa configuração de entrada e saída e incluímos também todos os plug-ins necessários. No arquivo webpack.dev.babel.js , definimos o modo para desenvolvimento. E no nosso arquivo webpack.prod.babel.js , definimos o modo para produção.

Depois disso, em nossa pasta raiz, vamos criar o último arquivo webpack.config.js chamado webpack.config.js e colocar o seguinte código:

Nossa configuração do webpack está pronta, então agora vamos trabalhar em outras partes do clichê com Babel, ESLint, Prettier, etc.

Babel

Eu acho que quase todo mundo que trabalha com o React provavelmente já ouviu falar sobre Babel e como esse simples transpiler ajuda nossas vidas. Se você não sabe o que é, Babel é basicamente um transpilador que converte seu código JavaScript em simples JavaScript ES5 antigo que pode ser executado em qualquer navegador.

Nós vamos usar um monte de plugins do Babel, então na nossa pasta raiz, instale:

 npm install --save-dev @babel/core @babe/cli @babel/node @ babel / plugin-proposta-classe-propriedades @ babel / plugin-proposta-objeto-descanso-propagação @ babel / plugin-syntax-dynamic- import @ babel / plugin-syntax-import-meta @ babel / plugin-transformar-async-to-generator @ babel / plugin-transformar-runtime @ babel / preset-env @ babel / preset-react @ babel / register @ babel / tempo de execução babel-eslint babel-jest babel-loader babel-core@7.0.0-bridge.0 

Depois disso, vamos criar um arquivo em nossa pasta raiz chamada .babelrc e dentro desse arquivo, vamos colocar o seguinte código:

Agora nosso projeto é compilado pelo Babel e podemos usar a sintaxe JavaScript de última geração sem problemas.

ESLint

A ferramenta mais utilizada para projetos de lintagem atualmente é o ESLint. É realmente útil encontrar certas classes de erros, como aquelas relacionadas ao escopo de variáveis, à atribuição de variáveis não declaradas e assim por diante.

Primeiro, instale as seguintes dependências:

 npm install --save-dev eslint eslint-config-airbnb eslint-config-prettier eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11i eslint-plugin-prettier eslint-plugin-react 

Em seguida, em nossa pasta raiz, crie um arquivo chamado .eslintrc e coloque o seguinte código:

Mais bonito

Prettier é basicamente um formatador de código. Ele analisa seu código e o reimprime com suas próprias regras que levam em consideração o comprimento máximo da linha, envolvendo o código quando necessário.

Você só precisa instalá-lo:

 npm install --save-dev prettier 

E em nossa pasta raiz, crie um arquivo chamado .prettierrc e coloque o seguinte código lá:

Reagir

React é uma biblioteca de aplicativos JavaScript de código aberto para criar interfaces de usuário. Foi desenvolvido pelo Facebook e tem uma enorme comunidade por trás dele. Se você está lendo este artigo, eu suponho que você já conhece o React, mas se quiser saber mais sobre ele, você pode ler aqui .

Nós vamos instalar as seguintes dependências:

 npm install --save react react-dom cross-env 

E dentro de nossa pasta src , vamos criar um simples arquivo HTML index.html e colocar o seguinte código:

Depois disso, vamos criar um projeto simples de Reação. Dentro da nossa pasta src , crie um arquivo index.js como este:

Dentro da nossa pasta src , vamos ter a seguinte estrutura:

 src 
|--actions
|--components
|--reducers
|--reducers
|--store

Crie um arquivo chamado App.js dentro da pasta de components e insira o seguinte código:

Redux

O Redux facilita o gerenciamento do estado do seu aplicativo. Outra maneira de ver isso é que ele ajuda você a gerenciar os dados exibidos e a responder às ações do usuário. Hoje em dia muitas pessoas preferem outras opções como o MobX ou apenas o setState , mas eu vou ficar com o Redux por este clichê.

Primeiro, vamos instalar algumas dependências:

 npm install --save redux react-redux redux-thunk 

Então, vamos criar nossa loja Redux e colocar algum estado lá. Em nossa pasta de store , crie um arquivo index.js e coloque o seguinte código lá:

Agora, dentro da pasta reducers crie um index.js e coloque o seguinte código:

Por último, vamos para o nosso index.js em nossa pasta src e envolva o código com o <Provider /> e passar a nossa store como adereços para disponibilizá-lo para a nossa aplicação.

Vai ser assim:

Tudo feito. Nossa loja Redux está configurada e pronta para ser usada.

Roteador de Reação

O React Router é a biblioteca de roteamento padrão do React. Basicamente, mantém sua interface do usuário em sincronia com o URL. Nós vamos usá-lo em nosso clichê, então instale-o:

 npm install --save react-router-dom 

Depois disso, vá para o nosso index.js em nossa pasta src e <BrowserRouter>. todo o código lá com o <BrowserRouter>.

Nosso index.js em nossa pasta src vai acabar assim:

Componentes estilizados

O Styled Components torna o CSS fácil para todos, pois ajuda a organizar seu projeto React. Seu objetivo é escrever componentes menores e reutilizáveis. Nós vamos usá-lo, e se você quiser aprender mais sobre isso, leia aqui .

Primeiro, instale-o:

 npm install --save styled-components 

Em seguida, no nosso arquivo App.js dentro de nossa pasta de components , criaremos um título simples usando Componentes com estilo. Nosso título vai ser assim:

E dentro do nosso arquivo, precisamos importar componentes com estilo, então nosso arquivo vai acabar assim:

Jest & React Testing Library

Jest é uma biblioteca de teste JavaScript de código aberto do Facebook. Isso torna fácil testar seu aplicativo e nos fornece muitas informações sobre o que está dando a saída correta e o que não está. React Testing Library é uma solução muito leve para testar componentes React. Basicamente, esta biblioteca é um substituto para a Enzyme.

Todo aplicativo precisa de algum tipo de teste. Não vou escrever testes neste artigo, mas vou mostrar como você pode configurar essas ferramentas para começar a testar seus aplicativos.

Primeiro, vamos instalar os dois:

 npm install --save-dev jest jest-dom react-testing-library 

Depois disso, vá ao nosso pacote.json e coloque o seguinte depois de tudo:

Então, vá para a nossa pasta de config , e dentro dela crie outra pasta chamada tests e dentro dessa pasta, crie 2 arquivos.

Primeiro, crie um arquivo chamado jest.config.js e coloque o seguinte código:

Em seguida, crie um arquivo chamado rtl.setup.js e coloque o seguinte código:

Tudo feito. Nosso clichê está pronto e você pode usá-lo agora.

Agora vá para o nosso arquivo package.json e coloque o seguinte código:

Agora, se você executar o comando npm start e ir para localhost:8080 , devemos ver nosso aplicativo funcionando bem!

Se você quiser ver o meu código final, o boilerplate criado por este artigo está disponível aqui!

Eu tenho algumas idéias para alguns recursos que eu gostaria de incluir no clichê, então sinta-se à vontade para contribuir!

? Siga-me no Twitter!
? Siga-me no GitHub!

Estou à procura de uma oportunidade remota, por isso, se tiver alguma eu adoraria ouvir sobre isso, por favor contacte-me!