Criando Seu Primeiro Aplicativo com create-react-app e NPX

Criando Seu Primeiro Aplicativo com `create-react-app` e NPX

O React é uma das bibliotecas JavaScript mais populares para o desenvolvimento de interfaces de usuário. Um dos métodos mais fáceis de começar um projeto React é usando o comando create-react-app, que automatiza boa parte da configuração inicial. Neste post, vamos explorar como criar seu primeiro aplicativo React com npx create-react-app.

O que é `create-react-app`?

create-react-app é uma ferramenta desenvolvida pelo time do React que permite criar uma nova aplicação React com uma configuração inicial pronta. Ele cuida de todos os detalhes da configuração, como Webpack, Babel e outras dependências. Isso economiza muito tempo, especialmente para quem está começando.

O que é `npx`?

npx é uma ferramenta que vem com o Node.js desde a versão 5.2. Ela permite executar pacotes npm sem precisar instalá-los globalmente. Isso significa que, em vez de instalar create-react-app globalmente, você pode simplesmente rodar o comando com npx e começar a criar seu projeto imediatamente.

Passo a Passo: Criando Seu Primeiro App

1. Instalando o Node.js

Antes de começar, certifique-se de que você tem o Node.js instalado em sua máquina. Caso contrário, baixe e instale a partir de nodejs.org.

Para verificar se o Node.js está instalado corretamente, abra o terminal e digite:

node -v

Você deve ver a versão do Node.js. Além disso, verifique a versão do npm, que vem junto com o Node.js:

npm -v

2. Usando `npx` para Criar o Projeto

Agora, abra o terminal ou prompt de comando e digite o seguinte comando:

npx create-react-app meu-primeiro-app

Esse comando faz com que o create-react-app crie uma nova aplicação React em uma pasta chamada meu-primeiro-app. A estrutura básica do projeto será gerada automaticamente.

Após a conclusão, você verá algo parecido com isso:

Success! Created meu-primeiro-app at /caminho/do/projeto/meu-primeiro-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files and scripts into the app directory.

We suggest that you begin by typing:

  cd meu-primeiro-app
  npm start

3. Rodando o Projeto

Entre na pasta do projeto:

cd meu-primeiro-app

E inicie o servidor de desenvolvimento com:

npm start

Isso vai abrir uma nova aba no navegador em http://localhost:3000, onde você verá a página inicial do React.

4. Estrutura do Projeto

A estrutura inicial do seu projeto vai se parecer com isso:

meu-primeiro-app/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

src/: Contém o código principal do aplicativo. Aqui você encontrará o arquivo App.js, que define o componente principal da sua aplicação.
public/: Inclui arquivos estáticos e o HTML principal da aplicação (index.html).
node_modules/: Diretório onde as dependências do projeto são instaladas.
package.json: Arquivo que lista as dependências do projeto e scripts de execução.

5. Personalizando o Aplicativo

Agora que você configurou seu aplicativo, pode começar a editar o arquivo App.js para personalizar sua aplicação. Abra o arquivo src/App.js no seu editor de texto favorito e altere o conteúdo para:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Bem-vindo ao meu primeiro App React!</h1>
      </header>
    </div>
  );
}

export default App;

Salve o arquivo e observe a mudança instantaneamente no navegador.

Conclusão

Parabéns! Você acabou de criar e rodar sua primeira aplicação React usando npx create-react-app. Agora você está pronto para começar a construir interfaces poderosas e interativas com React. Se quiser aprender mais, explore a documentação oficial do React e continue experimentando.

Links Úteis

Próximos Passos

Explore o componente App.js e comece a adicionar mais componentes ao seu projeto.
Aprenda sobre hooks e como eles podem ajudar a gerenciar estado e efeitos colaterais em sua aplicação.
Veja como fazer deploy da sua aplicação com plataformas como Netlify ou Vercel.

Com essa base, você pode desenvolver aplicações React de maneira simples e eficiente.

edvaldo b. guimarães filho

Criando Seu Primeiro Aplicativo com create-react-app e NPX