Tutorial sobre como criar uma aplicação web usando React.js

React.js é uma biblioteca popular de desenvolvimento front-end usada para criar interfaces de usuário (UIs) interativas. Desenvolvida pelo Facebook, a React.js tem sido usada por muitas grandes empresas, incluindo Instagram, Airbnb e WhatsApp. Se você busca criar aplicações web eficientes, rápidas e responsivas, a React.js pode ser a escolha certa.

Introdução

Antes de começarmos, certifique-se de ter o Node.js e o npm (Node Package Manager) instalados em seu computador. O Node.js e o npm são essenciais porque fornecem o ambiente e as ferramentas necessárias para desenvolver aplicações web usando React.js.

Passo 1: Inicializando o Projeto React

Para criar uma nova aplicação React.js, podemos usar o Create React App, uma ferramenta de criação de aplicações que minimiza a configuração inicial. Execute o seguinte comando no seu terminal ou prompt de comando:

“`bash
npx create-react-app meu-aplicativo
cd meu-aplicativo
início npm
""

Este comando criará um novo diretório chamado `my-app`, baixará e instalará todas as dependências necessárias e iniciará o servidor de desenvolvimento. Agora você pode abrir um navegador e acessar `http://localhost:3000` para ver o aplicativo React.js padrão.

Etapa 2: Estrutura de pastas

Vamos dar uma olhada na estrutura de pastas que o Create React App criou:

""
meu-aplicativo/
├── módulos_de_nó/
├── público/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
""

– `node_modules/`: Contém todas as dependências do seu projeto.
– `public/`: Contém arquivos estáticos, incluindo `index.html`, que é o ponto de entrada do aplicativo.
– `src/`: Onde você passará a maior parte do tempo. Contém componentes React, arquivos CSS e outros recursos.

Etapa 3: Excluindo arquivos desnecessários

Para começar do zero, vamos excluir alguns arquivos desnecessários. Exclua os arquivos `logo.svg` e `App.test.js` dentro da pasta `src/`. Em seguida, abra os arquivos `App.css` e `index.css`, apagando todo o código CSS contido neles para começar com uma folha de estilo limpa.

Etapa 4: Criando seu primeiro componente

React.js é baseado em componentes. Componentes são os blocos de construção da sua aplicação web. Vamos modificar o arquivo `App.js` para criar nosso primeiro componente.

Abra o arquivo `src/App.js` e substitua o conteúdo pelo seguinte código:

“` JSX
importe React de 'react';
importar './App.css';

função App() {
Retorna (

);
}

exportar aplicativo padrão;
""

Inicialize o código React dentro de `App.js` usando JSX (JavaScript XML), que permite escrever sintaxe semelhante a HTML dentro do JavaScript. Salve as alterações e visualize os resultados no seu navegador.

Etapa 5: Adicionando novos componentes

Agora vamos adicionar alguns novos componentes. Crie uma nova pasta chamada `components` dentro da pasta `src`. Em seguida, crie um novo arquivo chamado `HelloWorld.js` na pasta `components`.

“` JSX
importe React de 'react';

função HelloWorld() {
Retorna (

);
}

exportar padrão HelloWorld;
""

Abra o arquivo `App.js` e importe o componente `HelloWorld` que acabamos de criar:

“` JSX
importe React de 'react';
importar './App.css';
import HelloWorld from './components/HelloWorld';

função App() {
Retorna (

);
}

exportar aplicativo padrão;
""

Agora, o arquivo `App.js` renderiza o componente `HelloWorld` na página principal.

Etapa 6: Adicionando gerenciamento de estado com useState

O React possui hooks muito poderosos para gerenciar o estado. Vamos adicionar algum estado à nossa aplicação. Por exemplo, vamos adicionar um contador que incrementa cada vez que um botão é clicado.

Abra o arquivo `HelloWorld.js` e adicione o estado e o gancho `useState`:

“` JSX
importar React, {useState} de 'react';

função HelloWorld() {
const [contagem, setCount] = useState(0);

const incrementCount = () => {
setContagem(contagem + 1);
}

Retorna (

);
}

exportar padrão HelloWorld;
""

O estado `count` é inicializado com o valor 0 e, cada vez que o botão é clicado, a função `incrementCount` incrementa esse valor.

Passo 7: Adicionando Estilo

Para adicionar estilo, podemos usar CSS no arquivo `App.css` ou uma biblioteca CSS-in-JS como o styled-components. Vamos usar CSS padrão por enquanto.

Abra o arquivo `App.css` e adicione alguns estilos:

“`css
.Aplicativo {
text-align: center;
}

.App-header {
cor de fundo: 282c34;
altura mínima: 100vh;
exibição: flex;
direção flexível: coluna;
alinhar-itens: centro;
justificar o conteúdo: centro;
tamanho-da-fonte: calc(10px + 2vmin);
cor branca;
}

botão {
padding: 10px 20px;
margin-top: 20px;
font-size: 16px;
}
""

Passo 8: Adicionando rotas com React Router

Para adicionar navegação entre diferentes páginas em nossa aplicação, podemos usar o React Router. Instale o React Router executando o seguinte comando:

“`bash
npm instalar react-router-dom
""

Em seguida, crie dois novos componentes: `Home.js` e `About.js` na pasta `components`.

`Home.js`:
“` JSX
importe React de 'react';

função Início() {
Retorna (

);
}

padrão de exportação Início;
""

`About.js`:
“` JSX
importe React de 'react';

função Sobre() {
Retorna (

);
}

exportar padrão Sobre;
""

Em seguida, abra o arquivo `App.js` e configure o roteamento:

“` JSX
importe React de 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
importar './App.css';
import HelloWorld from './components/HelloWorld';
importar Home de './components/Home';
importar Sobre de './components/About';

função App() {
Retorna (

);
}

exportar aplicativo padrão;
""

Com isso, adicionamos navegação básica entre as diferentes páginas do nosso aplicativo.

Fechando

Este é um tutorial básico para criar uma aplicação web usando React.js. Abordamos a configuração do projeto, a criação de componentes, o gerenciamento de estado, a estilização e o roteamento. O React.js possui um rico ecossistema com diversas bibliotecas e ferramentas que podem ajudar você a construir aplicações web mais complexas.

Boa sorte, e espero que este tutorial ajude você a começar sua jornada com React.js!