Use uma toolchain integrada para uma melhor experiência de usuário e desenvolvedor.
\nEsta página descreve algumas toolchains populares com React que ajudam em tarefas como:
\nAs toolchains recomendadas nesta página não requerem configuração para começar.
\nSe você não se depara com nenhum dos problemas descritos acima, ou se ainda não se sente confortável usando ferramentas JavaScript, considere simplesmente adicionar uma tag script numa página HTML, opcionalmente usando JSX.
Esta é a maneira mais fácil de integrar React a um site já existente. Você pode a qualquer momento adicionar à toolchain conforme achar útil.
\nA equipe React recomenda principalmente as seguintes soluções:
\nCreate React App é um ambiente confortável para aprender React, e é a melhor maneira de começar um single-page application em React.
\nAlém de configurar seu ambiente de desenvolvimento para utilizar as funcionalidades mais recentes do JavaScript, ele fornece uma experiência de desenvolvimento agradável, e otimiza o seu app para produção. Será necessário ter Node >= 8.10 e npm >= 5.6 na sua máquina. Para criar um novo projeto, rode:
\nnpx create-react-app my-app\ncd my-app\nnpm start\n\nNota
\n\n
npxna primeira linha não é erro de digitação — é um package runner que vem com npm 5.2+.
Create React App não lida com lógica de backend nem banco de dados. Ele apenas cria um build pipeline para o frontend, podendo portanto ser utilizado com qualquer backend de sua escolha. Por trás, Babel e Webpack estão sendo utilizados, mas não é necessário saber nada sobre eles.
\nQuando estiver pronto pra mandar pra produção, rode npm run build para criar e mandar o build otimizado de seu app para a pasta build. Você pode saber mais sobre o Create React App através de seu README e o Guia de Usuário.
Next.js é um framework leve e popular para aplicações estáticas e renderizadas no servidor feito com React. Ele inclui soluções para estilização e roteamento prontas, e presume que esteja rodando Node.js como ambiente de servidor.
\nAprenda Next.js através de seu guia oficial.
\nGatsby é a melhor forma de criar sites estáticos usando React. Ele permite usar componentes React, porém produzindo HTML e CSS pré-renderizado para garantir a velocidade mais rápida possível de carregamento.
\nAprenda Gatsby através de seu guia oficial e a galeria de starter kits.
\nAs seguintes toolchains oferecem mais flexibilidade e escolha. Nós as recomendamos para usuários mais experientes:
\nUma build toolchain em JavaScript consiste tipicamente de:
\nSe você prefere criar a sua própria JavaScript toolchain do zero, dê uma olhada neste guia que recria algumas das funcionalidades do Create React App.
\nNão se esqueça de assegurar que sua toolchain customizada esteja corretamente configurado para produção.
","frontmatter":{"title":"Crie um novo React App","next":"cdn-links.html","prev":"add-react-to-a-website.html"},"fields":{"path":"content/docs/create-a-new-react-app.md","slug":"docs/create-a-new-react-app.html"}}},"pageContext":{"slug":"docs/create-a-new-react-app.html"}},"staticQueryHashes":[]}