Iniciando em React: Guia Completo para Iniciantes | Tutorial Passo a Passo

O React é uma renomada biblioteca JavaScript utilizada para desenvolver interfaces de usuário dinâmicas. Criado pelo Facebook, destaca-se pela eficiência e flexibilidade, permitindo a construção de aplicativos web robustos.

Sua abordagem baseada em componentes simplifica a criação de interfaces reutilizáveis, enquanto a técnica do Virtual DOM otimiza o desempenho, garantindo uma experiência fluida para o usuário.

Com uma comunidade ativa e recursos abrangentes, o React é uma escolha popular para o desenvolvimento web moderno, oferecendo tanto a iniciantes quanto a profissionais a capacidade de construir aplicações web poderosas e inovadoras.

Neste artigo veremos como criar um app React do zero, sem enrolação e utilizando a principal ferramenta do getting started: create-react-app

• Começo rápido
• Comece Imediatamente
• Criando um Aplicativo
• Selecione um template Adequado
• Selecione um gerenciador de pacotes
• Output do React
• Scripts

Começo rápido

npx create-react-app my-app
cd my-app
npm start

Se você instalou anteriormente o create-react-app globalmente via npm install -g create-react-app, recomendamos desinstalar o pacote usando npm uninstall -g create-react-app ou yarn global remove create-react-app para garantir que o npx sempre utilize a versão mais recente.

(npx está disponível no npm 5.2+ e versões superiores; veja as instruções para versões mais antigas do npm)

Em seguida, abra http://localhost:3000/ para visualizar seu aplicativo.

Quando estiver pronto para implantar em produção, crie um pacote minificado com npm run build.

Comece Imediatamente

Você não precisa instalar ou configurar ferramentas como webpack ou Babel. Elas estão pré-configuradas e ocultas para que você possa se concentrar no código.

Crie um projeto e pronto, você está pronto para começar.

Criando um Aplicativo

Você precisará ter o Node >= 14 em sua máquina de desenvolvimento local (mas não é necessário no servidor). Você pode usar o nvm (macOS/Linux) ou nvm-windows para alternar entre diferentes versões do Node em projetos diferentes.

Para criar um novo aplicativo, você pode escolher um dos seguintes métodos:

npx

npx create-react-app my-app

npm

npm init react-app my-app

npm init <initializer> está disponível a partir do npm 6+

Yarn

yarn create react-app my-app

yarn create está disponível a partir do Yarn 0.25+

Selecione um template Adequado

Você agora tem a opção de iniciar um novo aplicativo a partir de um modelo, adicionando --template [nome-do-modelo] ao comando de criação.

Se não selecionar um modelo, criaremos seu projeto com nosso modelo base.

Os modelos são sempre nomeados no formato cra-template-[nome-do-modelo], no entanto, você só precisa fornecer o [nome-do-modelo] ao comando de criação.

npx create-react-app my-app --template [template-name]

O React tem uma documentação de Templates Personalizados descreve como você pode construir seu próprio modelo.

Criando um aplicativo TypeScript

Você pode iniciar um novo aplicativo TypeScript usando modelos. Para usar nosso modelo TypeScript fornecido, adicione --template typescript ao comando de criação.

npx create-react-app my-app --template typescript

Selecione um gerenciador de pacotes

Quando você cria um novo aplicativo, o CLI usará npm ou Yarn para instalar dependências, dependendo de qual ferramenta você usa para executar create-react-app.

Por exemplo:

# rode este se for usar npm
npx create-react-app my-app
# E esse se for usar o yarn
yarn create react-app my-app

Output do React

Ao executar qualquer um desses comandos, será criado um diretório chamado my-app no diretório atual. Lá dentro, será gerada a estrutura inicial do projeto e as dependências transitivas serão instaladas.

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

Sem configuração ou estruturas de pastas complicadas, apenas os arquivos necessários para construir seu aplicativo. Após a instalação, você pode abrir a pasta do seu projeto:

Scripts

Dentro do projeto recém-criado, você pode executar alguns comandos integrados:

npm start or yarn start

Executa o aplicativo no modo de desenvolvimento. Abra http://localhost:3000 para visualizá-lo no navegador.

Após explorar este guia sobre o desenvolvimento com React, esperamos que você tenha adquirido uma compreensão sólida dos fundamentos dessa biblioteca JavaScript.

Com instruções claras e exemplos práticos, você foi guiado desde a configuração do ambiente de desenvolvimento até a criação de aplicativos funcionais em React.

Lembre-se, a prática é essencial para aprimorar suas habilidades de desenvolvimento. Continue experimentando, explorando e construindo, e em breve você estará dominando o React com confiança.

Estou ansiosos para ver suas criações!