Pular para conteúdo

02 Iniciando ReactJS

Iniciando um projeto com ReactJS#

Iniciar um projeto no React JS requer a instalação e configuração adequadas de ferramentas e bibliotecas. Para iniciar um projeto no React JS, siga o passo a passo:

  1. Instale o Node.js: O React JS é uma biblioteca baseada no Node.js, por isso, é necessário instalá-lo em seu sistema antes de iniciar um novo projeto React. Você pode fazer o download da versão mais recente do Node.js no site oficial e instalar seguindo as instruções.

  2. Crie um novo projeto.

  npx create-react-app nome-do-seu-projeto
  1. Execute o projeto: Depois de criar o projeto, navegue para o diretório do projeto no terminal.
  npm start

O servidor será iniciado em http://localhost:3000 e qualquer alteração que você fizer no código será refletida automaticamente no navegador.

Estrutura do projeto#

  my-app/
  ├── node_modules/
  ├── public/
  │   ├── index.html
  │   ├── favicon.ico
  │   └── manifest.json
  ├── src/
  │   ├── App.css
  │   ├── App.js
  │   ├── App.test.js
  │   ├── index.css
  │   ├── index.js
  │   ├── logo.svg
  │   ├── reportWebVitals.js
  │   ├── setupTests.js
  ├── .gitignore
  ├── package-lock.json
  ├── package.json
  └── README.md

node_modules: pasta que contém as dependências do projeto, instaladas automaticamente pelo npm ou yarn. public: pasta que contém os arquivos públicos da aplicação, como o arquivo HTML principal (index.html) e o arquivo de ícone (favicon.ico). src: pasta que contém o código-fonte da aplicação. App.css: arquivo CSS para estilização do componente App. App.js: arquivo JavaScript que define o componente principal App. App.test.js: arquivo de testes para o componente App. index.css: arquivo CSS global para estilização da aplicação. index.js: arquivo JavaScript que inicia a aplicação React. logo.svg: arquivo SVG com o logo do React, utilizado como exemplo no código. reportWebVitals.js: arquivo que contém a função reportWebVitals para medição de métricas de desempenho da aplicação. setupTests.js: arquivo de configuração para testes. .gitignore: arquivo que lista os arquivos e pastas que devem ser ignorados pelo controle de versão Git. package-lock.json: arquivo gerado automaticamente pelo npm ou yarn que contém informações detalhadas sobre as dependências instaladas no projeto. package.json: arquivo que contém informações sobre o projeto, como nome, descrição, versão e dependências, além de scripts para automatizar tarefas. README.md: arquivo com informações sobre o projeto, incluindo como executá-lo e como contribuir com ele.

Selecione template#

Ao iniciar um novo projeto em React, você pode usar o parâmetro --template para especificar um modelo personalizado para ser usado como ponto de partida. Isso pode ser útil se você já tem um modelo personalizado criado ou se deseja usar um modelo diferente do padrão fornecido pelo Create React App.

  npx create-react-app my-app --template [nome do template]

O Create React App inclui vários modelos diferentes que você pode usar, como cra-template-typescript, cra-template-redux, cra-template-redux-typescript, entre outros.

Se desejar usar um modelo personalizado que não está incluído no Create React App, pode especificar a URL do repositório Git do modelo em vez do nome do modelo.

  npx create-react-app my-app --template git+https://github.com/[username]/[reponame].git

Isso clonará o repositório Git do modelo e usará os arquivos como ponto de partida para o seu projeto React.

Depois de iniciar o projeto com o modelo personalizado, você pode modificar o código e os arquivos do modelo para atender às suas necessidades específicas.