Como criar projeto com React 19 e TypeScript

---

Publicado 06 de dezembro de 2024

Neste tutorial, será explicado como criar um projeto com React e TypeScript.

Primeiramente, será explicado o que é React.

Em seguida, será apresentado como criar um projeto com React.

Por fim, será demonstrado como executar o projeto criado com React e TypeScript.

Download do código fonte desenvolvido na aula: Download

Lista completa de aulas sobre React: Acessar

Como instalar Node.js: Acessar

Curso Full Stack de React e Node.js: Mais detalhes

Para criar o projeto com React é necessário ter o Node.js instalado.

Para criar o projeto com React e Next.js, utilize o seguinte comando. O ponto "." indica que o projeto será criado no diretório atual. 

npx create-next-app@latest .

Durante a criação do projeto com React, são apresentadas opções de configuração.

Abaixo está um exemplo das configurações que devem ser selecionadas para criar o projeto com React.

Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like your code inside a `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for `next dev`? No
Would you like to customize the import alias (`@/*` by default)? Yes

Com o projeto criado, o conteúdo da página inicial "src/app/page.tsx" é alterado.

export default function Home() {
  return (
    <div>
      <h2>Bem-vindo Celke!</h2>
    </div>
  );
}

Para rodar o projeto criado com React, utiliza-se o seguinte comando.

npm run dev

Para acessar o projeto criado com React no navegador, use a URL padrão.

http://localhost:3000

Baixar o código-fonte completo do projeto.

Bom, era isso. Espero que o tutorial tenha sido útil!