Criando o projeto React com TypeScript
Aprenda a criar o repositório projeto-react, instalar React com TypeScript usando Vite e entender estrutura, componentes, hooks e rotas.
- #Curso de Frontend
- #React com TypeScript
- #React
- #TypeScript
- #Vite
- #Componentes
- #Frontend
O projeto desta etapa
Agora vamos criar um novo repositório chamado projeto-react. Esse projeto será a base para estudar React com TypeScript.
Nele vamos entender instalação do React, estrutura criada pelo Vite, componentes, props, state, hooks, rotas, organização de pastas e diferença entre model, view e components.
Criando o repositório no GitHub
No GitHub, crie um novo repositório com o nome projeto-react, copie o link SSH, clone o projeto e abra no VS Code.
Crie o repositório no GitHub antes de clonar. Depois copie a URL SSH, abra o Git Bash na pasta dos projetos do curso e rode o clone.
cd ~/Desktop/curso-frontend
git clone git@github.com:seu-usuario/projeto-react.git
cd projeto-react
code .Criando o projeto React com Vite
Dentro da pasta projeto-react, rode o comando do Vite com template react-ts. O ponto significa que o projeto será criado na pasta atual.
Lendo o comando do Vite: ele cria a estrutura inicial do React. Depois disso, npm install baixa as dependências e npm run dev inicia o servidor local de desenvolvimento.
npm create vite@latest . -- --template react-ts
npm install
npm run devApp.tsx e main.tsx
App.tsx costuma ser o componente principal da aplicação. main.tsx é o ponto de entrada que pega o componente principal e renderiza dentro do HTML.
Leia main.tsx como o ponto de entrada da aplicação. Ele pega a div root do HTML e renderiza o componente App. Leia App.tsx como o primeiro componente principal da interface.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);Componentes, hooks, state e rotas
Componentes são partes reutilizáveis da interface. Hooks são funções especiais do React que permitem usar recursos como estado e ciclo de vida. State é uma informação que muda e faz a tela atualizar. Rotas permitem mostrar telas diferentes de acordo com o endereço da página.
Componentes são partes reutilizáveis da tela. State guarda valores que mudam. Hooks são funções do React usadas para lidar com recursos como estado, contexto e efeitos.
import { useState } from "react";
function Contador() {
const [contador, setContador] = useState(0);
return (
<button onClick={() => setContador(contador + 1)}>
Cliques: {contador}
</button>
);
}Model, View e Components
Um jeito simples de organizar é pensar em models, views e components. Models guardam tipos e estruturas de dados. Views guardam páginas ou telas completas. Components guardam partes reutilizáveis.
Leia essa organização como separação de responsabilidade: models descrevem formatos de dados, views representam telas e components guardam partes menores reutilizadas pelas telas.
src
components
data
models
views
App.tsx
main.tsx
index.css
