Project Setup

Welcome to Module 2! In this module, we will dive into Frontend Development using React and TanStack Router.

Learning Objectives

By the end of this module, you will be able to:

• Set up a modern React project with Vite
• Understand React components and props
• Implement client-side routing with TanStack Router

Task Manager

We will be building the frontend for our Task Manager application. We’ll use Vite for a fast development environment and React as our UI library.

Scaffolding the Project

We will create a new React project using Vite.

1. Open your terminal and navigate to your projects folder.

2. Run the create command:

   bun create vite task-manager --template react-ts

3. Navigate into the project directory:

   cd task-manager

4. Install dependencies:

   bun install

5. Start the development server:

   bun run dev

You should now see your React app running at http://localhost:5173!

Project Structure

Here is a quick look at the structure of the project we just created:

• Directorysrc

  • Directoryassets/

    • …
  • App.tsx The main component
  • main.tsx The entry point
  • index.css
  • vite-env.d.ts
• index.html
• package.json
• tsconfig.json
• vite.config.ts

In the next section, we will explore the fundamentals of React.