yuri admin
1.0.0
Esta é uma solução de gerenciamento de middle e backend baseada em React+React-router4+an�td3.
Uma solução mid e back-end baseada em React+react-router+antd, pronta para uso, sem configuração e apenas mantendo um json
Este projeto foi inicializado com Create React App.
Abaixo você encontrará algumas informações sobre como realizar tarefas comuns.
Você pode encontrar a versão mais recente deste guia aqui.
<title>publicpublic.env<meta> dinâmicas no servidornpm start não detecta alteraçõesnpm test trava no macOS Sierranpm run build sai muito cedonpm run build falha no Herokunpm run build falha ao minificarCreate React App é dividido em dois pacotes:
create-react-app é um utilitário de linha de comando global que você usa para criar novos projetos.react-scripts é uma dependência de desenvolvimento nos projetos gerados (incluindo este). Você quase nunca precisa atualizar o próprio create-react-app : ele delega toda a configuração para react-scripts .
Quando você executa create-react-app , ele sempre cria o projeto com a versão mais recente dos react-scripts para que você obtenha automaticamente todos os novos recursos e melhorias nos aplicativos recém-criados.
Para atualizar um projeto existente para uma nova versão de react-scripts , abra o changelog, encontre a versão em que você está atualmente (verifique package.json nesta pasta se não tiver certeza) e aplique as instruções de migração para o mais recente versões.
Na maioria dos casos, alterar a versão react-scripts em package.json e executar npm install nesta pasta deve ser suficiente, mas é bom consultar o changelog para possíveis alterações significativas.
Nós nos comprometemos a manter o mínimo de alterações significativas para que você possa atualizar react-scripts sem problemas.
Estamos sempre abertos ao seu feedback.
Após a criação, seu projeto deverá ficar assim:
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
Para que o projeto seja compilado, esses arquivos devem existir com nomes de arquivos exatos :
public/index.html é o modelo da página;src/index.js é o ponto de entrada do JavaScript.Você pode excluir ou renomear os outros arquivos.
Você pode criar subdiretórios dentro src . Para reconstruções mais rápidas, apenas os arquivos dentro src são processados pelo Webpack.
Você precisa colocar quaisquer arquivos JS e CSS dentro de src , caso contrário, o Webpack não os verá.
Somente arquivos dentro public podem ser usados em public/index.html .
Leia as instruções abaixo para usar recursos de JavaScript e HTML.
Você pode, no entanto, criar mais diretórios de nível superior.
Eles não serão incluídos na versão de produção, portanto você poderá usá-los para coisas como documentação.
No diretório do projeto, você pode executar:
npm start Executa o aplicativo no modo de desenvolvimento.
Abra http://localhost:3000 para visualizá-lo no navegador.
A página será recarregada se você fizer edições.
Você também verá erros de lint no console.
npm test Inicia o executor de teste no modo de observação interativo.
Consulte a seção sobre execução de testes para obter mais informações.
npm run build Cria o aplicativo para produção na pasta build .
Ele agrupa corretamente o React no modo de produção e otimiza a construção para obter o melhor desempenho.
A compilação é reduzida e os nomes dos arquivos incluem os hashes.
Seu aplicativo está pronto para ser implantado!
Consulte a seção sobre implantação para obter mais informações.
npm run eject Nota: esta é uma operação unilateral. Depois de eject , você não pode voltar atrás!
Se não estiver satisfeito com a ferramenta de compilação e as opções de configuração, você poderá eject a qualquer momento. Este comando removerá a dependência de compilação única do seu projeto.
Em vez disso, ele copiará todos os arquivos de configuração e as dependências transitivas (Webpack, Babel, ESLint, etc) diretamente no seu projeto para que você tenha controle total sobre eles. Todos os comandos, exceto eject ainda funcionarão, mas apontarão para o. scripts copiados para que você possa ajustá-los. Neste ponto, você está por conta própria.
Você nunca precisa usar eject . O conjunto de recursos selecionados é adequado para implantações pequenas e médias e você não deve se sentir obrigado a usar esse recurso. No entanto, entendemos que essa ferramenta não seria útil se você não pudesse. personalize-o quando estiver pronto para isso.
Por padrão, o projeto gerado usa a versão mais recente do React.
Você pode consultar a documentação do React para obter mais informações sobre os navegadores suportados.
Este projeto oferece suporte a um superconjunto do padrão JavaScript mais recente.
Além dos recursos de sintaxe ES6, ele também suporta:
Saiba mais sobre as diferentes etapas da proposta.
Embora recomendemos o uso de propostas experimentais com certa cautela, o Facebook usa muito esses recursos no código do produto, por isso pretendemos fornecer codemods se alguma dessas propostas mudar no futuro.
Observe que o projeto inclui apenas alguns polyfills ES6 :
Object.assign() através de object-assign .Promise através de promise .fetch() através de whatwg-fetch . Se você usar qualquer outro recurso ES6+ que precise de suporte de tempo de execução (como Array.from() ou Symbol ), certifique-se de incluir os polyfills apropriados manualmente ou de que os navegadores que você está direcionando já os suportam.
Observe também que o uso de alguns recursos de sintaxe mais recentes, como for...of ou [...nonArrayValue] faz com que o Babel emita código que depende dos recursos de tempo de execução do ES6 e pode não funcionar sem um polyfill. qualquer sintaxe específica é compilada.
Para configurar o realce de sintaxe em seu editor de texto favorito, acesse a página de documentação relevante do Babel e siga as instruções abordadas em alguns dos editores mais populares.
Nota: este recurso está disponível com
[email protected]e superior.
Também funciona apenas com npm 3 ou superior.
Alguns editores, incluindo Sublime Text, Atom e Visual Studio Code, fornecem plug-ins para ESLint.
Eles não são necessários para o linting. Você deve ver a saída do linter diretamente no seu terminal, bem como no console do navegador. No entanto, se preferir que os resultados do lint apareçam diretamente no seu editor, existem algumas etapas extras que você pode executar.
Você precisaria primeiro instalar um plugin ESLint para o seu editor. Em seguida, adicione um arquivo chamado .eslintrc à raiz do projeto:
{
"extends" : "react-app"
}Agora seu editor deve relatar os avisos de linting.
Observe que mesmo se você editar ainda mais seu arquivo .eslintrc , essas alterações afetarão apenas a integração do editor . Elas não afetarão a saída do terminal e do lint no navegador. Isso ocorre porque o Create React App fornece intencionalmente um conjunto mínimo de regras que são encontradas. erros comuns.
Se você deseja impor um estilo de codificação ao seu projeto, considere usar regras de estilo Prettier em vez de ESLint.
Atualmente, esse recurso é compatível apenas com Visual Studio Code e WebStorm.
Visual Studio Code e WebStorm suportam depuração pronta para uso com Create React App. Isso permite que você, como desenvolvedor, escreva e depure seu código React sem sair do editor e, o mais importante, permite que você tenha um fluxo de trabalho de desenvolvimento contínuo, onde a mudança de contexto. é mínimo, pois você não precisa alternar entre ferramentas.
Você precisaria ter a versão mais recente do VS Code e do VS Code Chrome Debugger Extension instalada.
Em seguida, adicione o bloco abaixo ao seu arquivo launch.json e coloque-o dentro da pasta .vscode no diretório raiz do seu aplicativo.
{
"version" : " 0.2.0 " ,
"configurations" : [{
"name" : " Chrome " ,
"type" : " chrome " ,
"request" : " launch " ,
"url" : " http://localhost:3000 " ,
"webRoot" : " ${workspaceRoot}/src " ,
"sourceMapPathOverrides" : {
"webpack:///src/*" : " ${webRoot}/* "
}
}]
}Observação: a URL pode ser diferente se você tiver feito ajustes por meio das variáveis de ambiente HOST ou PORT.
Inicie seu aplicativo executando npm start e comece a depurar no VS Code pressionando F5 ou clicando no ícone de depuração verde. Agora você pode escrever código, definir pontos de interrupção, fazer alterações no código e depurar seu código recém-modificado, tudo a partir do seu. editor.
Está tendo problemas com a depuração do VS Code? Consulte o guia de solução de problemas.
Você precisaria ter a extensão WebStorm e JetBrains IDE Support Chrome instalada.
No menu WebStorm Run selecione Edit Configurations... Em seguida, clique em + e selecione JavaScript Debug . Cole http://localhost:3000 no campo URL e salve a configuração.
Observação: a URL pode ser diferente se você tiver feito ajustes por meio das variáveis de ambiente HOST ou PORT.
Inicie seu aplicativo executando npm start e pressione ^D no macOS ou F9 no Windows e Linux ou clique no ícone de depuração verde para iniciar a depuração no WebStorm.
Da mesma forma que você pode depurar seu aplicativo no IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro e RubyMine.
Prettier é um formatador de código opinativo com suporte para JavaScript, CSS e JSON. Com Prettier você pode formatar o código que escreve automaticamente para garantir um estilo de código em seu projeto. Consulte a página GitHub do Prettier para obter mais informações e consulte esta página para ver. isso em ação.
Para formatar nosso código sempre que fizermos um commit no git, precisamos instalar as seguintes dependências:
npm install --save husky lint-staged prettier Alternativamente, você pode usar yarn :
yarn add husky lint-staged prettierhusky facilita o uso de githooks como se fossem scripts npm.lint-staged nos permite executar scripts em arquivos preparados no git. Veja esta postagem do blog sobre lint-staged para saber mais sobre ele.prettier é o formatador JavaScript que executaremos antes dos commits. Agora podemos garantir que cada arquivo esteja formatado corretamente adicionando algumas linhas ao package.json na raiz do projeto.
Adicione a seguinte linha à seção scripts :
"scripts": {
+ "precommit": "lint-staged",
"start": "react-scripts start",
"build": "react-scripts build", Em seguida, adicionamos um campo 'lint-staged' ao package.json , por exemplo:
"dependencies": {
// ...
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,json,css}": [
+ "prettier --single-quote --write",
+ "git add"
+ ]
+ },
"scripts": { Agora, sempre que você fizer um commit, o Prettier formatará os arquivos alterados automaticamente. Você também pode executar ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}" para formatar todo o seu projeto pela primeira vez.
Em seguida, você pode querer integrar o Prettier em seu editor favorito. Leia a seção sobre Integração do Editor na página do Prettier GitHub.
<title> Você pode encontrar o arquivo HTML de origem na pasta public do projeto gerado. Você pode editar a tag <title> nele para alterar o título de “React App” para qualquer outro.
Observe que normalmente você não editaria arquivos na pasta public com muita frequência. Por exemplo, a adição de uma folha de estilo é feita sem tocar no HTML.
Se precisar atualizar dinamicamente o título da página com base no conteúdo, você pode usar a API document.title do navegador. Para cenários mais complexos, quando quiser alterar o título dos componentes React, você pode usar React Helmet, uma biblioteca de terceiros.
Se você usa um servidor personalizado para seu aplicativo em produção e deseja modificar o título antes que ele seja enviado ao navegador, você pode seguir os conselhos desta seção. Como alternativa, você pode pré-construir cada página como um arquivo HTML estático que será carregado. o pacote JavaScript, que é abordado aqui.
O projeto gerado inclui React e ReactDOM como dependências. Ele também inclui um conjunto de scripts usados pelo Create React App como dependência de desenvolvimento. Você pode instalar outras dependências (por exemplo, React Router) com npm :
npm install --save react-router Alternativamente, você pode usar yarn :
yarn add react-router Isso funciona para qualquer biblioteca, não apenas para react-router .
Esta configuração de projeto suporta módulos ES6 graças ao Babel.
Embora você ainda possa usar require() e module.exports , recomendamos que você use import e export .
Por exemplo:
Button.js import React , { Component } from 'react' ;
class Button extends Component {
render ( ) {
// ...
}
}
export default Button ; // Don’t forget to use export default!DangerButton.js import React , { Component } from 'react' ;
import Button from './Button' ; // Import a component from another file
class DangerButton extends Component {
render ( ) {
return < Button color = "red" /> ;
}
}
export default DangerButton ;Esteja ciente da diferença entre exportações padrão e nomeadas. É uma fonte comum de erros.
Sugerimos que você continue usando importações e exportações padrão quando um módulo exporta apenas uma única coisa (por exemplo, um componente). Isso é o que você obtém quando usa export default Button e import Button from './Button' .
As exportações nomeadas são úteis para módulos utilitários que exportam diversas funções. Um módulo pode ter no máximo uma exportação padrão e quantas exportações nomeadas desejar.
Saiba mais sobre os módulos ES6:
Em vez de baixar o aplicativo inteiro antes que os usuários possam usá-lo, a divisão de código permite dividir seu código em pequenos pedaços que você pode carregar sob demanda.
Esta configuração do projeto suporta divisão de código via import() dinâmico. Sua proposta está no estágio 3. O formato semelhante à função import() toma o nome do módulo como um argumento e retorna uma Promise que sempre resolve para o objeto namespace do módulo.
Aqui está um exemplo:
moduleA.js const moduleA = 'Hello' ;
export { moduleA } ;App.js import React , { Component } from 'react' ;
class App extends Component {
handleClick = ( ) => {
import ( './moduleA' )
. then ( ( { moduleA } ) => {
// Use moduleA
} )
. catch ( err => {
// Handle failure
} ) ;
} ;
render ( ) {
return (
< div >
< button onClick = { this . handleClick } > Load </ button >
</ div >
) ;
}
}
export default App ; Isso fará com que moduleA.js e todas as suas dependências exclusivas sejam um bloco separado que só é carregado depois que o usuário clica no botão 'Carregar'.
Você também pode usá-lo com sintaxe async / await , se preferir.
Se você estiver usando o React Router, confira este tutorial sobre como usar a divisão de código com ele. Você pode encontrar o repositório GitHub complementar aqui.
Verifique também a seção Divisão de código na documentação do React.
Esta configuração do projeto usa Webpack para lidar com todos os ativos. O Webpack oferece uma maneira personalizada de “estender” o conceito de import além do JavaScript. Para expressar que um arquivo JavaScript depende de um arquivo CSS, você precisa importar o CSS do arquivo JavaScript :
Button.css. Button {
padding : 20 px ;
}Button.js import React , { Component } from 'react' ;
import './Button.css' ; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render ( ) {
// You can use them as regular CSS styles
return < div className = "Button" /> ;
}
}Isso não é necessário para React , mas muitas pessoas acham esse recurso conveniente. Você pode ler sobre os benefícios dessa abordagem aqui. No entanto, você deve estar ciente de que isso torna seu código menos portável para outras ferramentas e ambientes de construção que não o Webpack.
No desenvolvimento, expressar dependências dessa forma permite que seus estilos sejam recarregados instantaneamente conforme você os edita. Na produção, todos os arquivos CSS serão concatenados em um único arquivo .css reduzido na saída da compilação.
Se você estiver preocupado em usar a semântica específica do Webpack, você pode colocar todo o seu CSS diretamente em src/index.css . Ele ainda seria importado de src/index.js , mas você sempre poderá remover essa importação se migrar posteriormente para um. diferentes ferramentas de construção.
Esta configuração do projeto minimiza seu CSS e adiciona prefixos de fornecedor automaticamente por meio do Autoprefixer para que você não precise se preocupar com isso.
Por exemplo, isto:
. App {
display : flex;
flex-direction : row;
align-items : center;
}fica assim:
. App {
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-orient : horizontal;
-webkit-box-direction : normal;
-ms-flex-direction : row;
flex-direction : row;
-webkit-box-align : center;
-ms-flex-align : center;
align-items : center;
}Se você precisar desabilitar o prefixo automático por algum motivo, siga esta seção.
Geralmente, recomendamos que você não reutilize as mesmas classes CSS em componentes diferentes. Por exemplo, em vez de usar uma classe CSS .Button nos componentes <AcceptButton> e <RejectButton> , recomendamos criar um componente <Button> com seu próprio componente. Estilos .Button , que <AcceptButton> e <RejectButton> podem renderizar (mas não herdar).
Seguir esta regra muitas vezes torna os pré-processadores CSS menos úteis, pois recursos como mixins e aninhamento são substituídos pela composição de componentes. Você pode, no entanto, integrar um pré-processador CSS se achar que é valioso. Neste passo a passo, usaremos Sass. use também Menos ou outra alternativa.
Primeiro, vamos instalar a interface de linha de comando do Sass:
npm install --save node-sass-chokidar Alternativamente, você pode usar yarn :
yarn add node-sass-chokidar Em seguida, em package.json , adicione as seguintes linhas aos scripts :
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",Nota: Para usar um pré-processador diferente, substitua os comandos
build-cssewatch-cssde acordo com a documentação do seu pré-processador.
Agora você pode renomear src/App.css para src/App.scss e executar npm run watch-css . O observador encontrará todos os arquivos Sass nos subdiretórios src e criará um arquivo CSS correspondente próximo a ele, em nosso caso substituindo src/App.css . Como src/App.js ainda importa src/App.css , os estilos se tornam parte do seu aplicativo. src/App.scss e src/App.css serão regenerados.
Para compartilhar variáveis entre arquivos Sass, você pode usar importações Sass. Por exemplo, src/App.scss e outros arquivos de estilo de componente podem incluir @import "./shared.scss";
Para permitir a importação de arquivos sem usar caminhos relativos, você pode adicionar a opção --include-path ao comando em package.json .
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
Isso permitirá que você faça importações como
@import ' styles/_colors.scss ' ; // assuming a styles directory under src/
@import ' nprogress/nprogress ' ; // importing a css file from the nprogress node module Neste ponto, você pode querer remover todos os arquivos CSS do controle de origem e adicionar src/**/*.css ao seu arquivo .gitignore . Geralmente, é uma boa prática manter os produtos de construção fora do controle de origem.
Como etapa final, você pode achar conveniente executar watch-css automaticamente com npm start e executar build-css como parte de npm run build . No entanto, não há nenhum operador && . maneira multiplataforma de executar dois scripts em paralelo, então instalaremos um pacote para isso:
npm install --save npm-run-all Alternativamente, você pode usar yarn :
yarn add npm-run-all Então podemos alterar os scripts start e build para incluir os comandos do pré-processador CSS:
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts build",
+ "build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
} Agora, executar npm start e npm run build também cria arquivos Sass.
Por que node-sass-chokidar ?
node-sass foi relatado como tendo os seguintes problemas:
Foi relatado que node-sass --watch apresenta problemas de desempenho em certas condições quando usado em uma máquina virtual ou com docker.
Compilação de estilos infinitos #1939
node-sass foi relatado como tendo problemas com a detecção de novos arquivos em um diretório #1891
node-sass-chokidar é usado aqui porque aborda esses problemas.
Com o Webpack, o uso de ativos estáticos como imagens e fontes funciona de forma semelhante ao CSS.
Você pode import um arquivo diretamente em um módulo JavaScript . Isso diz ao Webpack para incluir esse arquivo no pacote. Ao contrário das importações CSS, importar um arquivo fornece um valor de string. o atributo src de uma imagem ou o href de um link para um PDF.
Para reduzir o número de solicitações ao servidor, a importação de imagens com menos de 10.000 bytes retorna um URI de dados em vez de um caminho. Isso se aplica às seguintes extensões de arquivo: arquivos bmp, gif, jpg, jpeg e png. devido a #1153.
Aqui está um exemplo:
import React from 'react' ;
import logo from './logo.png' ; // Tell Webpack this JS file uses this image
console . log ( logo ) ; // /logo.84287d09.png
function Header ( ) {
// Import result is the URL of your image
return < img src = { logo } alt = "Logo" /> ;
}
export default Header ;Isso garante que quando o projeto for compilado, o Webpack moverá corretamente as imagens para a pasta de construção e nos fornecerá os caminhos corretos.
Isso também funciona em CSS:
. Logo {
background-image : url (. / logo.png);
} O Webpack encontra todas as referências relativas aos módulos em CSS (elas começam com ./ ) e as substitui pelos caminhos finais do pacote compilado. Se você cometer um erro de digitação ou excluir acidentalmente um arquivo importante, verá um erro de compilação, assim como quando você faz isso. importar um módulo JavaScript inexistente Os nomes de arquivos finais no pacote compilado são gerados pelo Webpack a partir de hashes de conteúdo. Se o conteúdo do arquivo mudar no futuro, o Webpack fornecerá um nome diferente na produção para que você não precise se preocupar. cache de longo prazo de ativos.
Informamos que este também é um recurso personalizado do Webpack.
Não é obrigatório para o React , mas muitas pessoas gostam dele (e o React Native usa um mecanismo semelhante para imagens).
Uma forma alternativa de lidar com ativos estáticos é descrita na próxima seção.
publicNota: este recurso está disponível com
[email protected]e superior.
A pasta public contém o arquivo HTML para que você possa ajustá-lo, por exemplo, para definir o título da página. A tag <script> com o código compilado será adicionada automaticamente durante o processo de construção.
Você também pode adicionar outros ativos à pasta public .
Observe que normalmente recomendamos que você import ativos em arquivos JavaScript. Por exemplo, consulte as seções sobre como adicionar uma folha de estilo e como adicionar imagens e fontes. Este mecanismo oferece vários benefícios:
No entanto, existe uma saída de emergência que você pode usar para adicionar um ativo fora do sistema de módulos.
Se você colocar um arquivo na pasta public , ele não será processado pelo Webpack. Em vez disso, ele será copiado para a pasta de construção intacto. Para referenciar ativos na pasta public , você precisa usar uma variável especial chamada PUBLIC_URL .
Dentro de index.html , você pode usá-lo assim:
< link rel =" shortcut icon " href =" %PUBLIC_URL%/favicon.ico " > Somente arquivos dentro da pasta public serão acessíveis pelo prefixo %PUBLIC_URL% Se você precisar usar um arquivo de src ou node_modules , você terá que copiá-lo para especificar explicitamente sua intenção de tornar este arquivo parte da compilação.
Quando você executa npm run build , Create React App substituirá %PUBLIC_URL% por um caminho absoluto correto para que seu projeto funcione mesmo se você usar roteamento do lado do cliente ou hospedá-lo em uma URL não raiz.
No código JavaScript, você pode usar process.env.PUBLIC_URL para fins semelhantes:
render ( ) {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return < img src = { process . env . PUBLIC_URL + '/img/logo.png' } /> ;
}Tenha em mente as desvantagens desta abordagem:
public é pós-processado ou reduzido.public Normalmente recomendamos importar folhas de estilo, imagens e fontes de JavaScript. A pasta public é útil como solução alternativa para vários casos menos comuns:
manifest.webmanifest .pace.js fora do código incluído.<script> . Observe que se você adicionar um <script> que declare variáveis globais, você também precisará ler a próxima seção sobre como usá-las.
Quando você inclui um script no arquivo HTML que define variáveis globais e tenta usar uma dessas variáveis no código, o linter irá reclamar porque não consegue ver a definição da variável.
Você pode evitar isso lendo explicitamente a variável global do objeto window , por exemplo:
const $ = window . $ ;Isso torna óbvio que você está usando uma variável global intencionalmente e não por causa de um erro de digitação.
Alternativamente, você pode forçar o linter a ignorar qualquer linha adicionando // eslint-disable-line depois dela.
Você não precisa usar React Bootstrap junto com React, mas é uma biblioteca popular para integrar Bootstrap com aplicativos React. Se precisar, você pode integrá-lo com Create React App seguindo estas etapas:
Instale React Bootstrap e Bootstrap do npm. React Bootstrap não inclui Bootstrap CSS, portanto, ele também precisa ser instalado:
npm install --save react-bootstrap bootstrap@3 Alternativamente, você pode usar yarn :
yarn add react-bootstrap bootstrap@3 Importe CSS do Bootstrap e, opcionalmente, CSS do tema Bootstrap no início do seu arquivo src/index.js :
import 'bootstrap/dist/css/bootstrap.css' ;
import 'bootstrap/dist/css/bootstrap-theme.css' ;
// Put any other imports below so that CSS from your
// components takes precedence over default styles. Importe os componentes necessários do React Bootstrap no arquivo src/App.js ou nos arquivos de componentes personalizados:
import { Navbar , Jumbotron , Button } from 'react-bootstrap' ; Agora você está pronto para usar os componentes importados do React Bootstrap dentro de sua hierarquia de componentes definida no método render. Aqui está um exemplo de App.js refeito usando React Bootstrap.
Às vezes você pode precisar ajustar os estilos visuais do Bootstrap (ou pacote equivalente).
Sugerimos a seguinte abordagem:
Aqui está um exemplo de adição de um Bootstrap personalizado que segue estas etapas.
Flow é um verificador de tipo estático que ajuda você a escrever código com menos bugs. Confira esta introdução ao uso de tipos estáticos em JavaScript se você for novo neste conceito.
Versões recentes do Flow funcionam com projetos Create React App prontos para uso.
Para adicionar Flow a um projeto Create React App, siga estas etapas:
npm install --save flow-bin (ou yarn add flow-bin )."flow": "flow" à seção scripts do seu package.json .npm run flow init (ou yarn flow init ) para criar um arquivo .flowconfig no diretório raiz.// @flow a todos os arquivos que você deseja digitar check (por exemplo, para src/App.js ). Agora você pode executar npm run flow (ou yarn flow ) para verificar se há erros de tipo nos arquivos. Opcionalmente, você pode usar um IDE como Nuclide para uma experiência melhor integrada.
Para saber mais sobre o Flow, confira sua documentação.
Create React App não prescreve uma solução de roteamento específica, mas React Router é a mais popular.
Para adicioná-lo, execute:
npm install --save react-router-dom Alternativamente, você pode usar yarn :
yarn add react-router-dom Para experimentar, exclua todo o código em src/App.js e substitua-o por qualquer um dos exemplos em seu site. O Exemplo Básico é um bom lugar para começar.
Observe que pode ser necessário configurar seu servidor de produção para oferecer suporte ao roteamento do lado do cliente antes de implantar seu aplicativo.
Nota: este recurso está disponível com
[email protected]e superior.
Seu projeto pode consumir variáveis declaradas em seu ambiente como se tivessem sido declaradas localmente em seus arquivos JS. Por padrão, você terá NODE_ENV definido para você e quaisquer outras variáveis de ambiente começando com REACT_APP_ .
As variáveis de ambiente são incorporadas durante o tempo de construção . Como o Create React App produz um pacote HTML/CSS/JS estático, ele não pode lê-los em tempo de execução. Para lê-los em tempo de execução, você precisaria carregar o HTML na memória no. server e substitua os espaços reservados em tempo de execução, conforme descrito aqui. Alternativamente, você pode reconstruir o aplicativo no servidor sempre que alterá-los.
Nota: Você deve criar variáveis de ambiente personalizadas começando com
REACT_APP_. Quaisquer outras variáveis, excetoNODE_ENVserão ignoradas para evitar a exposição acidental de uma chave privada na máquina que possa ter o mesmo nome. ele está funcionando.
Essas variáveis de ambiente serão definidas para você em process.env . Por exemplo, ter uma variável de ambiente chamada REACT_APP_SECRET_CODE será exposta em seu JS como process.env.REACT_APP_SECRET_CODE .
Há também uma variável de ambiente interna especial chamada NODE_ENV . Você pode lê-la em process.env.NODE_ENV . Quando você executa npm start , é sempre igual a 'development' , quando você executa npm test é sempre igual a 'test' e quando você executa npm run build para criar um pacote de produção, é sempre igual a 'production' . Você não pode substituir NODE_ENV manualmente. produção.
Essas variáveis de ambiente podem ser úteis para exibir informações condicionalmente com base em onde o projeto está implantado ou para consumir dados confidenciais que estão fora do controle de versão.
Primeiro, você precisa ter variáveis de ambiente definidas. Por exemplo, digamos que você queira consumir um segredo definido no ambiente dentro de um <form> :
render ( ) {
return (
< div >
< small > You are running this application in < b > { process . env . NODE_ENV } </ b > mode. </ small >
< form >
< input type = "hidden" defaultValue = { process . env . REACT_APP_SECRET_CODE } />
</ form >
</ div >
) ;
} Durante a construção, process.env.REACT_APP_SECRET_CODE será substituído pelo valor atual da variável de ambiente REACT_APP_SECRET_CODE Lembre-se de que a variável NODE_ENV será definida para você automaticamente.
Ao carregar o aplicativo no navegador e inspecionar o <input> , você verá seu valor definido como abcdef , e o texto em negrito mostrará o ambiente fornecido ao usar npm start :
< div >
< small > You are running this application in < b > development </ b > mode. </ small >
< form >
< input type =" hidden " value =" abcdef " />
</ form >
</ div > O formulário acima está procurando uma variável chamada REACT_APP_SECRET_CODE do ambiente. Para consumir este valor, precisamos defini .env lo no ambiente. Ambas as formas são descritas nas próximas seções.
Ter acesso ao NODE_ENV também é útil para executar ações condicionalmente:
if ( process . env . NODE_ENV !== 'production' ) {
analytics . disable ( ) ;
} Quando você compila o aplicativo com npm run build , a etapa de minificação eliminará essa condição e o pacote resultante será menor.
Nota: este recurso está disponível com
[email protected]e superior.
Você também pode acessar as variáveis de ambiente começando com REACT_APP_ em public/index.html .
< title > %REACT_APP_WEBSITE_NAME% </ title >Observe que as advertências da seção acima se aplicam:
NODE_ENV e PUBLIC_URL ), os nomes das variáveis devem começar com REACT_APP_ para funcionar.A definição de variáveis de ambiente pode variar entre sistemas operacionais. Também é importante saber que essa maneira é temporária durante a vida da sessão do shell.
set " REACT_APP_SECRET_CODE = abcdef " && npm start(Observação: aspas em torno da atribuição da variável são necessárias para evitar espaços em branco no final.)
( $ env: REACT_APP_SECRET_CODE = " abcdef " ) -and (npm start)REACT_APP_SECRET_CODE=abcdef npm start.envNota: este recurso está disponível com
[email protected]e superior.
Para definir variáveis de ambiente permanentes, crie um arquivo chamado .env na raiz do seu projeto:
REACT_APP_SECRET_CODE=abcdef
Nota: Você deve criar variáveis de ambiente personalizadas começando com
REACT_APP_. Quaisquer outras variáveis, excetoNODE_ENVserão ignoradas para evitar a exposição acidental de uma chave privada na máquina que possa ter o mesmo nome. ele está funcionando.
Os arquivos .env devem ser verificados no controle de origem (com a exclusão de .env*.local ).
.env podem ser usados?Nota: este recurso está disponível com
[email protected]e superior .
.env : Padrão..env.local : substituições locais Este arquivo é carregado para todos os ambientes, exceto teste..env.development , .env.test , .env.production : configurações específicas do ambiente..env.development.local , .env.test.local , .env.production.local : substituições locais de configurações específicas do ambiente.Os arquivos à esquerda têm mais prioridade que os arquivos à direita:
npm start : .env.development.local , .env.development , .env.local , .envnpm run build : .env.production.local , .env.production , .env.local , .envnpm test : .env.test.local , .env.test , .env (nota .env.local está faltando) Essas variáveis atuarão como padrões se a máquina não as definir explicitamente.
Consulte a documentação do dotenv para obter mais detalhes.
Nota: Se você estiver definindo variáveis de ambiente para desenvolvimento, seu CI e/ou plataforma de hospedagem provavelmente também precisará delas definidas. Consulte a documentação sobre como fazer isso.
.envNota: Este recurso está disponível com
[email protected]e superior.
Expanda as variáveis já em sua máquina para uso no seu arquivo .env (usando dotenv-expand).
Por exemplo, para obter a variável de ambiente npm_package_version :
REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
Ou expandir variáveis locais para o arquivo .env atual:
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
Muitas bibliotecas populares usam decoradores em sua documentação.
Create React App não suporta a sintaxe do decorador no momento porque:
No entanto, em muitos casos, você pode reescrever o código baseado em decoradores sem decoradores igualmente bom.
Consulte estes dois tópicos para referência:
Create React App adicionará suporte ao decorador quando a especificação avançar para um estágio estável.
O REACT não prescreve uma abordagem específica para buscar dados, mas as pessoas geralmente usam uma biblioteca como a AXIOS ou a API fetch() fetch() pelo navegador. preocupando -se com o suporte do navegador.
A função Global fetch Promise fazer fetch solicitações de Response .
Este projeto também inclui um Polyfill Promise, que fornece uma implementação completa de promessas/A fetch() . Você também pode usar a sintaxe async / await para reduzir o ninho de retorno de chamada.
Você pode aprender mais sobre como fazer solicitações de Ajax dos componentes do React na entrada de perguntas frequentes no site do React.
Esses tutoriais ajudarão você a integrar seu aplicativo com um back -end da API em outra porta, usando fetch() para acessá -lo.
Confira este tutorial.
Confira este tutorial.
Nota: Este recurso está disponível com
[email protected]e superior.
As pessoas costumam servir o aplicativo React front-end do mesmo host e porta que sua implementação de back-end.
Por exemplo, uma configuração de produção pode ser assim depois que o aplicativo for implantado:
/ - static server returns index.html with React app
/todos - static server returns index.html with React app
/api/todos - server handles any /api/* requests using the backend implementation
Essa configuração não é necessária fetch('/api/todos')
Para dizer ao servidor de desenvolvimento para proxy qualquer solicitação desconhecida ao seu servidor de API em desenvolvimento, adicione um campo proxy ao seu package.json , por exemplo:
"proxy" : "http://localhost:4000" , Dessa forma, quando você fetch('/api/todos') em desenvolvimento, o servidor de desenvolvimento reconhecerá que não é um ativo estático e procurará sua solicitação para http://localhost:4000/api/todos como fallback. O servidor de desenvolvimento só tentará enviar solicitações sem text/html em seu cabeçalho Accept para o proxy.
Convenientemente, isso evita problemas de CORS e mensagens de erro como esta no desenvolvimento:
Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Lembre -se de que proxy só tem efeito no desenvolvimento (com npm start ) e cabe a você garantir que os URLs como /api/todos apontam para a coisa /api na produção. text/html proxy
A opção proxy suporta conexões HTTP, HTTPS e WebSocket.
Se a opção proxy não for flexível o suficiente para você, alternativamente, você pode:
Quando você habilita a opção proxy , você opta por um conjunto mais rigoroso de verificações de host.
Isso não deve afetá -lo ao desenvolver no localhost , mas se você se desenvolver remotamente como descrito aqui, verá esse erro no navegador depois de ativar a opção proxy :
Cabeçalho do host inválido
Para contorná -lo, você pode especificar seu host de desenvolvimento público em um arquivo chamado .env.development na raiz do seu projeto:
HOST=mypublicdevhost.com
Se você reiniciar o servidor de desenvolvimento agora e carregar o aplicativo do host especificado, ele deve funcionar.
Se você ainda está tendo problemas ou se estiver usando um ambiente mais exótico , como um editor de nuvem, pode ignorar completamente a verificação do host adicionando uma linha ao .env.development.local . Execução de código remoto de sites maliciosos:
# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true
Não recomendamos essa abordagem.
Nota: Este recurso está disponível com
[email protected]e superior.
Se a opção proxy não for flexível o suficiente para você, você poderá especificar um objeto na forma a seguir (no package.json ).
Você também pode especificar qualquer valor de configuração http-proxy-middleware ou http-proxy .
{
// ...
"proxy" : {
"/api" : {
"target" : "<url>" ,
"ws" : true
// ...
}
}
// ...
} Todas as solicitações correspondentes a esse caminho serão proxies, sem text/html proxy
Se você precisar especificar vários proxies, pode fazê -lo especificando entradas adicionais.
{
// ...
"proxy" : {
// Matches any request starting with /api
"/api" : {
"target" : "<url_1>" ,
"ws" : true
// ...
} ,
// Matches any request starting with /foo
"/foo" : {
"target" : "<url_2>" ,
"ssl" : true ,
"pathRewrite" : {
"^/foo" : "/foo/beta"
}
// ...
} ,
// Matches /bar/abc.html but not /bar/sub/def.html
"/bar/[^/]*[.]html" : {
"target" : "<url_3>" ,
// ...
} ,
// Matches /baz/abc.html and /baz/sub/def.html
"/baz/.*/.*[.]html" : {
"target" : "<url_4>"
// ...
}
}
// ...
}Ao configurar um proxy do WebSocket, existem algumas considerações extras a serem cientes.
Se você estiver usando um mecanismo WebSocket como o Socket.io, você deve ter um servidor Socket.io que você pode usar como o objetivo do proxy. .io para trabalhar com o teste de eco websocket.org.
Há uma boa documentação disponível para configurar um servidor Socket.io.
O WebSockets padrão funcionará com um servidor WebSocket padrão, bem como com o teste de eco websocket.org.
De qualquer maneira, você pode proxy WebSocket Solictações manualmente no package.json :
{
// ...
"proxy" : {
"/socket" : {
// Your compatible WebSocket server
"target" : "ws://<socket_url>" ,
// Tell http-proxy-middleware that this is a WebSocket proxy.
// Also allows you to proxy WebSocket requests without an additional HTTP request
// https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
"ws" : true
// ...
}
}
// ...
} Nota: Este recurso está disponível com
[email protected]e superior.
Você pode exigir que o servidor de dev sirva páginas sobre o HTTPS.
Para fazer isso, defina a variável de ambiente HTTPS como true e inicie o servidor dev, como de costume, com npm start :
set HTTPS = true && npm start ( $ env: HTTPS = $true ) -and (npm start)(Nota: a falta de espaço em branco é intencional.)
HTTPS=true npm startObserve que o servidor usará um certificado autoassinado; portanto, seu navegador da Web quase definitivamente exibirá um aviso ao acessar a página.
<meta> no servidor Como o aplicativo Create React não suporta a renderização do servidor, você pode estar se perguntando como fazer com que <meta> tags dinâmico e reflita o URL atual.
<!doctype html >
< html lang =" en " >
< head >
< meta property =" og:title " content =" __OG_TITLE__ " >
< meta property =" og:description " content =" __OG_DESCRIPTION__ " > Em seguida, no servidor, independentemente do back -end que você usa, você pode ler index.html na memória e substituir __OG_TITLE__ , __OG_DESCRIPTION__ e quaisquer outros reservatórios com valores, dependendo do URL atual. Valores para que sejam seguros para incorporar no HTML!
Se você usar um servidor de nó, pode até compartilhar a lógica de correspondência de rota entre o cliente e o servidor.
Se você estiver hospedando sua build com um provedor de hospedagem estática, você pode usar o React-Snapshot ou o reagir-snap para gerar páginas HTML para cada rota ou link relativo, em seu aplicativo. , quando o pacote JavaScript está carregado.
Há também oportunidades de usar isso fora da hospedagem estática, para tirar a pressão do servidor ao gerar rotas de cache.
O principal benefício da pré-renderização é que você obtém o conteúdo principal de cada página com a carga útil HTML-indefinindo se o seu pacote de JavaScript com sucesso. motores.
Você pode ler mais sobre a pré-renderização de configuração zero (também chamada de instantâneo) aqui.
Da mesma forma a seção anterior, você pode deixar alguns espaços reservados no HTML que injetam variáveis globais, por exemplo:
< ! doctype html >
< html lang = "en" >
< head >
< script >
window.SERVER_DATA = __SERVER_DATA__;
</ script > Em seguida, no servidor, você pode substituir __SERVER_DATA__ por um JSON de dados reais antes de enviar a resposta window.SERVER_DATA Seu aplicativo vulnerável a ataques XSS.
Nota: Este recurso está disponível com
[email protected]e superior.
Leia o Guia de Migração para aprender como habilitá -lo em projetos mais antigos!
Create React App usa o JEST como seu corredor de teste.
O JEST é um corredor baseado em nós.
Enquanto o JEST fornece globais de navegador, como window graças ao JSDOM, eles são apenas aproximações do comportamento real do navegador.
Recomendamos que você use uma ferramenta separada para testes de ponta a ponta do navegador, se você precisar deles.
O JEST procurará arquivos de teste com qualquer uma das seguintes convenções de nomeação popular:
.js em pastas __tests__ ..test.js ..spec.js . Os arquivos .test.js / .spec.js (ou as pastas __tests__ ) podem estar localizados em qualquer profundidade na pasta de nível superior src .
Recomendamos colocar os arquivos de teste (ou pastas __tests__ App.test.js ao lado do código App.js eles estão testando para que as importações relativas pareçam mais curtas. import App from './App' em vez de um longo caminho relativo.
npm start você executa npm test , o JEST será lançado no modo de relógio.
O observador inclui uma interface de linha de comando interativa com a capacidade de executar todos os testes ou focar em um padrão de pesquisa. “Assista a uso”, observe que o observador imprime após cada execução:
Por padrão, quando você executa npm test , o Jest executa apenas os testes relacionados aos arquivos alterados desde o último compromisso. geralmente compromete o código que não passa nos testes.
O JEST sempre menciona a que executou apenas testes relacionados aos arquivos, desde o último compromisso.
O JEST sempre executará todos os testes em um servidor de integração contínuo ou se o projeto não estiver dentro de um repositório Git ou Mercurial.
Para criar testes, adicione -o describe() it() (ou test() ) com o nome do teste e seu código.
O JEST fornece uma função global expect() para fazer as afirmações.
import sum from './sum' ;
it ( 'sums numbers' , ( ) => {
expect ( sum ( 1 , 2 ) ) . toEqual ( 3 ) ;
expect ( sum ( 2 , 2 ) ) . toEqual ( 4 ) ;
} ) ; Todos os Matcores expect() suportados pelo JEST estão extensivamente documentados aqui.
Você também pode usar jest.fn() e expect(fn).toBeCalled() para criar "espiões" ou zombar funções.
Há um amplo espectro de técnicas de teste de componentes.
Projetos diferentes escolhem diferentes trocas de teste com base na frequência com que os componentes mudam e a lógica que eles contêm.
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
const div = document . createElement ( 'div' ) ;
ReactDOM . render ( < App /> , div ) ;
} ) ; Este teste monta um componente e garante que ele não jogue durante src/App.test.js renderização. src/App.test.js .
Quando você encontra bugs causados pela alteração dos componentes, você obterá uma visão mais profunda sobre quais partes deles valem a pena testar em seu aplicativo.
Se você deseja testar os componentes isolados dos componentes filhos que eles renderizam, recomendamos o uso da API de renderização shallow() da Enzyme.
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer Como alternativa, você pode usar yarn :
yarn add enzyme enzyme-adapter-react-16 react-test-rendererA partir da enzima 3, você precisará instalar a enzima junto com um adaptador correspondente à versão do React que você está usando.
O adaptador também precisará ser configurado em seu arquivo de configuração global:
src/setupTests.js import { configure } from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
configure ( { adapter : new Adapter ( ) } ) ;NOTA: Lembre -se de que, se você decidir "ejetar" antes de criar
src/setupTests.js, o arquivopackage.jsonresultante não conterá nenhuma referência a ele.
Agora você pode escrever um teste de fumaça com ele:
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
shallow ( < App /> ) ;
} ) ; Ao <App> do teste de fumaça anterior usando o Reactdom.render <Button> ReactDOM.render() , este teste apenas renderiza <App> e não se aprofunda é mount() para testes de unidade isolados, mas você ainda pode criar alguns testes de renderização completos para garantir que os componentes se integrem corretamente.
Você pode ler a documentação jest.fn() enzima expect() obter mais técnicas de teste.
Aqui está um exemplo da documentação enzimática que afirma que a saída específica, reescrita, para usar o Jest Matchers:
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders welcome message' , ( ) => {
const wrapper = shallow ( < App /> ) ;
const welcome = < h2 > Welcome to React </ h2 > ;
// expect(wrapper.contains(welcome)).to.equal(true);
expect ( wrapper . contains ( welcome ) ) . toEqual ( true ) ;
} ) ; Todos os fósforos de Jest estão extensivamente documentados aqui.
No entanto, você pode usar uma biblioteca de afirmação de terceiros como o Chai, se quiser, conforme descrito abaixo.
contains disso, você pode achar o Jest-Enzyme útil para simplificar seus testes com focistas legíveis.
expect ( wrapper ) . toContainReact ( welcome ) Para ativar isso, instale jest-enzyme :
npm install --save jest-enzyme Como alternativa, você pode usar yarn :
yarn add jest-enzyme Importe -o no src/setupTests.js para disponibilizar seus fósteadores em todos os testes:
import 'jest-enzyme' ; Recomendamos que você use expect() para asserções e jest.fn() para espiões. , por exemplo, os elementos react bastante impressionantes como JSX.
No entanto, se você estiver acostumado a outras bibliotecas, como Chai e Sinon, ou se você tiver código existente usando -os que deseja portar, poderá importá -los normalmente assim:
import sinon from 'sinon' ;
import { expect } from 'chai' ;E então use -os em seus testes como você normalmente.
Nota: Este recurso está disponível com
[email protected]e superior.
Se o seu aplicativo usa uma API do navegador que você precisa zombar de seus testes ou se você precisar apenas de uma configuração global antes de executar seus testes, adicione um src/setupTests.js ao seu projeto.
Por exemplo:
src/setupTests.js const localStorageMock = {
getItem : jest . fn ( ) ,
setItem : jest . fn ( ) ,
clear : jest . fn ( )
} ;
global . localStorage = localStorageMockNOTA: Lembre -se de que, se você decidir "ejetar" antes de criar
src/setupTests.js, o arquivopackage.jsonresultante não conterá nenhuma referência a ele; portanto, você deve criar manualmente o imóvelsetupTestFrameworkScriptFilena configuração para jest, algo como o seguinte:
"jest" : { // ... "setupTestFrameworkScriptFile" : "<rootDir>/src/setupTests.js" }
Você pode substituí it() por xit() para excluir temporariamente um teste de ser executado.
Da mesma forma, fit() permite que você se concentre em um teste específico sem executar outros testes.
O JEST possui um repórter de cobertura integrado que funciona bem com o ES6 e não requer configuração.
Execute npm test -- --coverage (observe extra -- meio) para incluir um relatório de cobertura como este:
Observe que os testes são muito mais lentos com a cobertura, por isso é recomendável executá -lo separadamente do seu fluxo de trabalho normal.
A configuração padrão da cobertura do jest pode ser superestimada adicionando qualquer uma das seguintes teclas suportadas a uma configuração de jest no seu package.json.
Substituições suportadas:
collectCoverageFromcoverageReporterscoverageThresholdsnapshotSerializersExemplo Package.json:
{
"name" : " your-package " ,
"jest" : {
"collectCoverageFrom" : [
" src/**/*.{js,jsx} " ,
" !<rootDir>/node_modules/ " ,
" !<rootDir>/path/to/dir/ "
],
"coverageThreshold" : {
"global" : {
"branches" : 90 ,
"functions" : 90 ,
"lines" : 90 ,
"statements" : 90
}
},
"coverageReporters" : [ " text " ],
"snapshotSerializers" : [ " my-serializer-module " ]
}
} Por padrão, npm test executa CI vigia com a CLI interativa.
Ao criar uma compilação do seu aplicativo com os avisos do npm test npm run build Linter CI são verificados por padrão. .
Os servidores de CI populares já definem a variável de ambiente CI por padrão, mas você também pode fazer isso:
.travis.yml ao seu repositório Git. language: node_js
node_js:
- 6
cache:
directories:
- node_modules
script:
- npm run build
- npm test
Siga este artigo para configurar o CircLeci com um projeto de aplicativo Create React.
set CI = true && npm test set CI = true && npm run build(Nota: a falta de espaço em branco é intencional.)
( $ env: CI = $true ) -and (npm test)( $ env: CI = $true ) -and (npm run build)CI=true npm test CI=true npm run buildO comando de teste forçará o JEST a executar testes uma vez, em vez de iniciar o vigia.
Se você estiver fazendo isso com frequência em desenvolvimento, registre um problema para nos contar sobre o seu caso de uso, pois queremos tornar o Watcher a melhor experiência e está aberto a alterar a maneira como funciona para acomodar mais fluxos de trabalho.
O comando Build verificar se há avisos do Linter e falhará, se houver, for encontrado.
Por padrão, o package.json do projeto gerado se parece com o seguinte:
"scripts" : {
"start" : "react-scripts start" ,
"build" : "react-scripts build" ,
"test" : "react-scripts test --env=jsdom" Se você souber que nenhum de seus testes depende do JSDOM, você pode remover com segurança --env=jsdom , e seus testes serão executados mais rápido:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
- "test": "react-scripts test --env=jsdom"
+ "test": "react-scripts test"Para ajudá -lo a se decidir, aqui está uma lista de APIs que precisam de JSDOM :
window e documentReactDOM.render()TestUtils.renderIntoDocument() (um atalho para o acima)mount() na enzimaPor outro lado, o JSDOM não é necessário para as seguintes APIs:
TestUtils.createRenderer() (renderização rasa)shallow() na enzimaFinalmente, o JSDOM também não é necessário para testes de instantâneos.
O teste instantâneo é um recurso do JEST que gera automaticamente instantâneos de texto de seus componentes e os salva no disco;
Se você usa o código do Visual Studio, existe uma extensão de brincadeira que funciona com o aplicativo Create React pronta para a caixa. , iniciando e interrompendo o observador automaticamente e oferecendo atualizações de instantâneos com um clique.
Existem várias maneiras de configurar um depurador para seus testes de brincadeira.
Nota: Os testes de depuração requer o nó 8 ou superior.
Adicione o seguinte à seção scripts no package.json do seu projeto.json
"scripts" : {
"test:debug" : " react-scripts --inspect-brk test --runInBand --env=jsdom "
} Coloque debugger;
$ npm run test:debugIsso começará a executar seus testes de brincadeira, mas pausará antes de executar para permitir que um depurador anexe ao processo.
Abra o seguinte no Chrome
about:inspect
Após abrir esse link, as ferramentas do desenvolvedor do Chrome serão inspect . De execução antes de você ter tempo para fazer isso). você pode examinar o escopo atual e ligar pilha.
NOTA: A opção -RuninBand CLI garante que o Teste de Jest executa no mesmo processo, em vez de processos de desova para testes individuais.
Os testes de jest de depuração são suportados para fora da caixa para o código do Visual Studio.
Use o seguinte arquivo de configuração launch.json :
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
Geralmente, em um aplicativo, você tem muitos componentes da interface do usuário e cada um deles tem muitos estados diferentes.
Geralmente, é difícil ver esses estados sem executar um aplicativo de amostra ou alguns exemplos.
O aplicativo Create React não inclui ferramentas para isso por padrão, mas você pode adicionar facilmente o Storybook para react (fonte) ou react styleguidist (origem) ao seu projeto. Estados isolados do seu aplicativo .
Você também pode implantar seu livro de histórias ou guia de estilo como um aplicativo estático.
O Storybook é um ambiente de desenvolvimento para os componentes da interface do usuário do React.
Primeiro, instale o seguinte pacote NPM globalmente:
npm install -g @storybook/cliEm seguida, execute o seguinte comando dentro do diretório do seu aplicativo:
getstorybookDepois disso, siga as instruções na tela.
Saiba mais sobre o React Storybook:
O StyleGuidist combina um guia de estilo, onde todos os seus componentes são apresentados em uma única página com a documentação e o uso de adereços, com um ambiente para o desenvolvimento de componentes isolados, semelhante ao livro de histórias. renderizado como um playground editável ao vivo.
Primeiro, instale o StyleGuidist:
npm install --save react-styleguidist Como alternativa, você pode usar yarn :
yarn add react-styleguidist Em seguida, adicione esses scripts ao seu package.json :
"scripts": {
+ "styleguide": "styleguidist server",
+ "styleguide:build": "styleguidist build",
"start": "react-scripts start",Em seguida, execute o seguinte comando dentro do diretório do seu aplicativo:
npm run styleguideDepois disso, siga as instruções na tela.
Saiba mais sobre o React StyleGuidist:
Create React App não fornece nenhuma funcionalidade interna para publicar um componente no NPM. e depois usando uma ferramenta como o NWB para prepará -la para publicação.
Por padrão, a construção da produção é um aplicativo da Web progressivo totalmente funcional e offline.
Os aplicativos da Web progressivos são mais rápidos e confiáveis que as páginas da web tradicionais e fornecem uma experiência móvel envolvente:
O sw-precache-webpack-plugin é integrado à configuração de produção e cuidará de um arquivo de trabalhador de serviço que precede automaticamente todos os seus ativos locais e os manterá atualizados à medida que você implantará atualizações. Uma estratégia de cache primeiro para lidar com todas as solicitações de ativos locais, incluindo o HTML inicial, garantindo que seu aplicativo da Web seja de forma confiável, mesmo em uma rede lenta ou não confiável.
Se você preferir não habilitar os trabalhadores do serviço antes da implantação inicial da produção, remova a chamada para o registerServiceWorker() do src/index.js .
Se você tivesse ativado anteriormente os trabalhadores de serviço em sua implantação de produção e decidiu que gostaria de desativá -los por todos os seus usuários existentes, você pode trocar a chamada para registerServiceWorker() em src/index.js primeiro modificando a importação do trabalhador de serviço :
import { unregister } from './registerServiceWorker' ; e depois ligue para unregister() /service-worker.js unregister() cache para ser invalidado.
Os funcionários de serviço exigem HTTPs, embora para facilitar os testes locais, essa política não se aplica ao localhost .
Os trabalhadores de serviços não são atualmente apoiados em todos os navegadores da Web.
O trabalhador do serviço é ativado apenas no ambiente de produção, por exemplo, a saída da npm run build . Não inclua as últimas alterações que você fez localmente.
Se você precisar testar o seu funcionário de serviço offline localmente, crie o aplicativo (usando create-react-app npm run build ) e execute um servidor HTTP simples no diretório de compilação. Para testar sua produção localmente e as instruções de implantação têm instruções para usar outros métodos.
Se possível, configure seu ambiente de produção para servir o service-worker.js com o cache HTTP desativado. Se você visitar seu site de produção e revisitar novamente antes de o service-worker.js . Implantação, A execução de uma refrescamento de turno desativará temporariamente o trabalhador do serviço e recuperará todos os ativos da rede.
Os usuários nem sempre estão familiarizados com os aplicativos da Web offline. O funcionário do serviço buscou as atualizações mais recentes que estarão disponíveis na próxima vez que carregarem a página (mostrando um "novo conteúdo está disponível; por favor, atualize". um ponto de partida, você pode usar A lógica incluída no src/registerServiceWorker.js , que demonstra quais eventos de ciclo de vida do trabalhador de serviço para ouvir para detectar cada cenário e qual como padrão, apenas registra mensagens apropriadas no console JavaScript.
Por padrão, o arquivo de trabalhador de serviço gerado não interceptará ou cache nenhum tráfego de origem cruzada, como solicitações de API HTTP, imagens ou incorporadas carregadas de um domínio diferente. eject e configure a opção runtimeCaching na seção SWPrecacheWebpackPlugin do webpack.config.prod.js .
A configuração padrão inclui um manifesto de aplicativo da web localizado em public/manifest.json , que você pode personalizar com detalhes específicos para o seu aplicativo da web.
Quando um usuário adiciona um aplicativo da web à tela inicial usando o Chrome ou o Firefox no Android, os metadados no manifest.json determina quais ícones, nomes e cores de marca a serem usados quando o aplicativo da web é exibido. O que cada campo significa e como suas personalizações afetarão a experiência de seus usuários.
Fonte Map Explorer JavaScript Pacotes usando os mapas de origem. Esta análise ajuda a entender de onde vem o código.
Para adicionar o MAPO de origem Explorer a um projeto Create React App, siga estas etapas:
npm install --save source-map-explorer Como alternativa, você pode usar yarn :
yarn add source-map-explorer Em seguida, no package.json , adicione a seguinte linha aos scripts :
"scripts": {
+ "analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",Em seguida, para analisar o pacote, execute a construção da produção e execute o script de análise.
npm run build
npm run analyze
/static/js/main.<hash>.js npm run build index.html um diretório build com uma construção de produção do seu aplicativo. /static/js/main.<hash>.js são servidos com o conteúdo do arquivo /static/js/main.<hash>.js .<hash>.js.
Para ambientes usando o nó, a maneira mais fácil de lidar com isso seria instalar o saque e deixá -lo lidar com o resto:
npm install -g serve
serve -s build O último comando mostrado acima servirá ao seu site estático na porta 5000. Como muitas das configurações internas do Serv, a porta pode ser ajustada usando os sinalizadores -p ou --port .
Execute este comando para obter uma lista completa das opções disponíveis:
serve -hVocê não precisa necessariamente de um servidor estático para executar um projeto de aplicativo Create React em produção.
Aqui está um exemplo programático usando o nó e expresso:
const express = require ( 'express' ) ;
const path = require ( 'path' ) ;
const app = express ( ) ;
app . use ( express . static ( path . join ( __dirname , 'build' ) ) ) ;
app . get ( '/' , function ( req , res ) {
res . sendFile ( path . join ( __dirname , 'build' , 'index.html' ) ) ;
} ) ;
app . listen ( 9000 ) ;A escolha do software do seu servidor também não é importante.
A pasta build com ativos estáticos é a única saída produzida pelo aplicativo Create React.
No entanto /todos/42 isso não é suficiente se você usar o roteamento do lado do cliente.
Se você usa roteadores que usam a API HTML5 pushState History sob o capô (por exemplo, o Router React com browserHistory ), muitos servidores de arquivos /todos/42 falharão. server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.
This is because when there is a fresh page load for a /todos/42 , the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html . For example, we can amend our Express example above to serve index.html for any unknown paths:
app.use(express.static(path.join(__dirname, 'build')));
- app.get('/', function (req, res) {
+ app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
}); If you're using Apache HTTP Server, you need to create a .htaccess file in the public folder that looks like this:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
It will get copied to the build folder when you run npm run build .
If you're using Apache Tomcat, you need to follow this Stack Overflow answer.
Now requests to /todos/42 will be handled correctly both in development and in production.
On a production build, and in a browser that supports service workers, the service worker will automatically handle all navigation requests, like for /todos/42 , by serving the cached copy of your index.html . This service worker navigation routing can be configured or disabled by eject ing and then modifying the navigateFallback and navigateFallbackWhitelist options of the SWPreachePlugin configuration.
When users install your app to the homescreen of their device the default configuration will make a shortcut to /index.html . This may not work for client-side routers which expect the app to be served from / . Edit the web app manifest at public/manifest.json and change start_url to match the required URL scheme, for example:
"start_url" : "." , By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json , for example:
"homepage" : "http://mywebsite.com/relativepath" ,This will let Create React App correctly infer the root path to use in the generated HTML file.
Note : If you are using react-router@^4 , you can root <Link> s using the basename prop on any <Router> .
More information here.
Por exemplo:
< BrowserRouter basename = "/calendar" />
< Link to = "/today" / > // renders <a href="/calendar/today"> Note: this feature is available with
[email protected]and higher.
If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json :
"homepage" : "." , This will make sure that all the asset paths are relative to index.html . You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
See this blog post on how to deploy your React app to Microsoft Azure.
See this blog post or this repo for a way to use automatic deployment to Azure App Service.
Install the Firebase CLI if you haven't already by running npm install -g firebase-tools . Sign up for a Firebase account and create a new project. Run firebase login and login with your previous created Firebase account.
Then run the firebase init command from your project's root. You need to choose the Hosting: Configure and deploy Firebase Hosting sites and choose the Firebase project you created in the previous step. You will need to agree with database.rules.json being created, choose build as the public directory, and also agree to Configure as a single-page app by replying with y .
=== Project Setup
First, let ' s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we ' ll just set up a default project.
? What Firebase project do you want to associate as default ? Example app (example-app-fd690)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.
? What file should be used for Database Rules ? database.rules.json
✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build ' s output directory.
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete! IMPORTANT: you need to set proper HTTP caching headers for service-worker.js file in firebase.json file or you will not be able to see changes after first deployment (issue #2440). It should be added inside "hosting" key like next:
{
"hosting": {
...
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
...
Now, after you create a production build with npm run build , you can deploy it by running firebase deploy .
=== Deploying to ' example-app-fd690 ' ...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory for upload...
Uploading: [ ============================== ] 75%✔ hosting: build folder uploaded successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...
✔ Deploy complete !
Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
Hosting URL: https://example-app-fd690.firebaseapp.comFor more information see Add Firebase to your JavaScript Project.
Note: this feature is available with
[email protected]and higher.
homepage to package.json The step below is important!
If you skip it, your app will not deploy correctly.
Open your package.json and add a homepage field for your project:
"homepage" : " https://myusername.github.io/my-app " ,or for a GitHub user page:
"homepage" : " https://myusername.github.io " , Create React App uses the homepage field to determine the root URL in the built HTML file.
gh-pages and add deploy to scripts in package.json Now, whenever you run npm run build , you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
To publish it at https://myusername.github.io/my-app, run:
npm install --save gh-pages Alternatively you may use yarn :
yarn add gh-pages Add the following scripts in your package.json :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", The predeploy script will run automatically before deploy is run.
If you are deploying to a GitHub user page instead of a project page you'll need to make two additional modifications:
package.json scripts to push deployments to master : "scripts": {
"predeploy": "npm run build",
- "deploy": "gh-pages -d build",
+ "deploy": "gh-pages -b master -d build", npm run deployThen run:
npm run deploygh-pages Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:
You can configure a custom domain with GitHub Pages by adding a CNAME file to the public/ folder.
GitHub Pages doesn't support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory ). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42 , where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42 . If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj ). Read more about different history implementations in React Router.index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you'll need to add code handling the redirect parameter to index.html . You can find a detailed explanation of this technique in this guide. Use the Heroku Buildpack for Create React App.
You can find instructions in Deploying React with Zero Configuration.
Sometimes npm run build works locally but fails during deploy via Heroku. Following are the most common cases.
If you get something like this:
remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
It means you need to ensure that the lettercase of the file or directory you import matches the one you see on your filesystem or on GitHub.
This is important because Linux (the operating system used by Heroku) is case sensitive. So MyDirectory and mydirectory are two distinct directories and thus, even though the project builds locally, the difference in case breaks the import statements on Heroku remotes.
If you exclude or ignore necessary files from the package you will see a error similar this one:
remote: Could not find a required file.
remote: Name: `index.html`
remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
In this case, ensure that the file is there with the proper lettercase and that's not ignored on your local .gitignore or ~/.gitignore_global .
To do a manual deploy to Netlify's CDN:
npm install netlify-cli -g
netlify deploy Choose build as the path to deploy.
To setup continuous delivery:
With this setup Netlify will build and deploy when you push to git or open a pull request:
yarn build as the build command and build as the publish directoryDeploy siteSupport for client-side routing:
To support pushState , make sure to create a public/_redirects file with the following rewrite rules:
/* /index.html 200
When you build the project, Create React App will place the public folder contents into the build output.
Now offers a zero-configuration single-command deployment. You can use now to deploy your app for free.
Install the now command-line tool either via the recommended desktop tool or via node with npm install -g now .
Build your app by running npm run build .
Move into the build directory by running cd build .
Run now --name your-project-name from within the build directory. You will see a now.sh URL in your output like this:
> Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
Paste that URL into your browser when the build is complete, and you will see your deployed app.
Details are available in this article.
See this blog post on how to deploy your React app to Amazon Web Services S3 and CloudFront.
Install the Surge CLI if you haven't already by running npm install -g surge . Run the surge command and log in you or create a new account.
When asked about the project path, make sure to specify the build folder, for example:
project path: /path/to/project/build Note that in order to support routers that use HTML5 pushState API, you may want to rename the index.html in your build folder to 200.html before deploying to Surge. This ensures that every URL falls back to that file.
You can adjust various development and production settings by setting environment variables in your shell or with .env.
| Variável | Desenvolvimento | Produção | Uso |
|---|---|---|---|
| NAVEGADOR | ✅ | By Default, Create React App will open the default system <System Browser, Favoring Chrome on Macos. Specify a <<Browser to Override This Behavior, or Set it to none to disab. Le it Completely. If you need to customize the way the browser is launchd, you can Specify A Node Script Instead. Any Arguments Passed to npm start Will Also be passed to this script, and the url where your app is server be the last ARG ument. Your Script's File name must have the .js extension . | |
| HOSPEDAR | ✅ | By default, the development web server binds to localhost . You may use this variable to specify a different host. | |
| PORTA | ✅ | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | |
| HTTPS | ✅ | When set to true , Create React App will run the development server in https mode. | |
| PUBLIC_URL | ✅ | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json ( homepage ). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | |
| IC | ? | ✅ | When set to true , Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. |
| REACT_EDITOR | ✅ | When an app crashes in development, you will see an error overlay with clicking trace. When you click on it, Create React App will to derymine the edi. TOR You are using Based on CurrenTly Running Processses, and Open The Relevant Source File. You . You. Can Send A PULL Request to Detect Your Editor of Choice. Setting this environment variable overrides the automatic detection. If you do it, make six systems PATH Environment Variable Points to your Editor's Bin Folder. You can also set it to none it completamente. | |
| CHOKIDAR_USEPOLLING | ✅ | When set to true , the watcher runs in polling mode, as necessary inside a VM. Use this option if npm start isn't detecting changes. | |
| GENERATE_SOURCEMAP | ✅ | When set to false , source maps are not generated for a production build. This solves OOM issues on some smaller machines. | |
| NODE_PATH | ✅ | ✅ | Same as NODE_PATH in Node.js, but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting NODE_PATH=src . |
npm start doesn't detect changes When you save a file while npm start is running, the browser should refresh with the updated code.
If this doesn't happen, try one of the following workarounds:
index.js and you're referencing it by the folder name, you need to restart the watcher due to a Webpack bug..env file in your project directory if it doesn't exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start , the watcher uses the polling mode, as necessary inside a VM.If none of these solutions help please leave a comment in this thread.
npm test hangs on macOS Sierra If you run npm test and the console gets stuck after printing react-scripts test --env=jsdom to the console there might be a problem with your Watchman installation as described in facebookincubator/create-react-app#713.
We recommend deleting node_modules in your project and running npm install (or yarn if you use it) first. If it doesn't help, you can try one of the numerous workarounds mentioned in these issues:
It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use Homebrew, you can run these commands to update it:
watchman shutdown-server
brew update
brew reinstall watchman
You can find other installation methods on the Watchman documentation page.
If this still doesn't help, try running launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist .
There are also reports that uninstalling Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
npm run build exits too early It is reported that npm run build can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message:
The build failed because the process exited too early. This probably means the system ran out of memory or someone called
kill -9on the process.
If you are completely sure that you didn't terminate the process, consider adding some swap space to the machine you're building on, or build the project locally.
npm run build fails on HerokuThis may be a problem with case sensitive filenames. Please refer to this section.
If you use a Moment.js, you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of all the locales provided by Moment.js.
To add a specific Moment.js locale to your bundle, you need to import it explicitly.
Por exemplo:
import moment from 'moment' ;
import 'moment/locale/fr' ; If import multiple locales this way, you can later switch between them by calling moment.locale() with the locale name:
import moment from 'moment' ;
import 'moment/locale/fr' ;
import 'moment/locale/es' ;
// ...
moment . locale ( 'fr' ) ;This will only work for locales that have been explicitly imported before.
npm run build fails to minifySome third-party packages don't compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years.
module field in package.json . Note that even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers .Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds.
Ejecting lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need. This article dives into how to do it in depth. You can find more discussion in this issue.
If you have ideas for more “How To” recipes that should be on this page, let us know or contribute some!
