O que é React?

React é uma biblioteca JavaScript para construção de interfaces de usuário. Criado pelo Facebook, ele utiliza um conceito de componentes para facilitar o desenvolvimento, manutenção e escalabilidade de aplicações.

Arquitetura do React

A arquitetura do React é baseada no conceito de componentes reutilizáveis. Uma aplicação React geralmente segue a seguinte estrutura de pastas:

Estrutura de Pastas

my-react-app/
├── public/           # Arquivos estáticos
├── src/              # Código fonte da aplicação
│   ├── components/   # Componentes reutilizáveis
│   ├── pages/        # Páginas da aplicação
│   ├── assets/       # Arquivos de mídia e estilos
│   ├── App.jsx       # Componente principal
│   └── index.jsx     # Ponto de entrada da aplicação
├── package.json      # Configuração do projeto
└── vite.config.js    # Configuração do Vite

        

Exemplo de Componente

import React from 'react';

const Welcome = ({ name }) => (
  

    
Bem-vindo, {name}!
  
);

export default Welcome;

        

Configurando o Ambiente com Vite

O Vite é uma ferramenta moderna para construção de aplicações web. Ele oferece uma experiência de desenvolvimento rápida e simples.

Passo a Passo

1. Instale o Node.js: Certifique-se de que o Node.js está instalado em sua máquina.
2. Crie o projeto:

   
   npm create vite@latest my-react-app --template react
   
               

3. Acesse a pasta do projeto:

   
   cd my-react-app
   
               

4. Instale as dependências:

   
   npm install
   
               

5. Inicie o servidor de desenvolvimento:

   
   npm run dev
   
               

Após seguir esses passos, você poderá acessar sua aplicação no navegador pelo endereço exibido no terminal (geralmente http://localhost:5173).