[React.js] - Part 1. Create a ReactJS Project with Vite, Yarn, and TypeScript + SWC for Optimal Performance

Kickstart your ReactJS project with Vite, Yarn, and TypeScript + SWC for lightning-fast builds and type-safe code. This setup ensures a smooth development experience, faster compilation, and better maintainability—perfect for both small and large-scale applications!

Step 1: Install Node.js and Yarn

1. Install Node.js
   Make sure you have Node.js version 14.18 or higher installed. You can download it from Node.js Official Website.

2. Install Yarn
   Run the following command to install Yarn globally:

3. Verify the installation
   To ensure Yarn is installed correctly, check the version:

Step 2: Create a new ReactJS project with Vite

1. Open your terminal and run the following command:

2. You will be prompted to enter a project name. Enter your desired name (e.g., my-react-app) and press Enter.

3. Next, you will be asked to choose a framework. Use the arrow keys to select React and press Enter.

4. When prompted to choose a variant, select TypeScript + SWC. This is highly recommended for several reasons:

   Why choose TypeScript + SWC?

   • TypeScript adds static typing to your project, helping you catch errors during development and improving code maintainability, especially in large projects.

   • SWC (Speedy Web Compiler) is a super-fast JavaScript and TypeScript compiler that significantly reduces build time compared to the default TypeScript compiler.

   • By combining TypeScript with SWC, you get the benefits of type safety and faster builds, resulting in a smoother and more efficient development experience.

Step 3: Navigate to the project folder

Once the project is created, navigate to the project directory using:

Step 4: Install dependencies

Run the following command to install all necessary dependencies:

Step 5: Start the development server

After installing the dependencies, start the Vite development server by running:

You’ll see an output similar to:

Open your browser and go to http://localhost:5173/ to see your React application running.

Step 6: Open the project in a code editor

Use Visual Studio Code or your favorite editor to open the project folder. You can start editing the files in the src directory:

• src/main.tsx: The entry point of your React application.

• src/App.tsx: The main component where you can start building your application.

Step 7: Build for production

When your application is ready for deployment, you can build it for production by running:

This will create an optimized build in the dist folder.

Step 8: Preview the production build

To preview the production build locally, run:

This will start a local server that serves the built files.

Why Use Vite with TypeScript + SWC and Yarn?

1. Fast Development:
   Vite is known for its lightning-fast development server, thanks to its efficient module handling system.

2. TypeScript + SWC for Better Performance:

   • TypeScript improves code quality and makes your project easier to maintain by adding static type checking.

   • SWC compiles TypeScript much faster than the default TypeScript compiler, especially in large projects.

3. Yarn for Dependency Management:
   Yarn is faster and more reliable than npm in handling dependencies, especially in monorepos or projects with complex dependencies.

Conclusion

By following this guide and choosing TypeScript + SWC, you’re setting up a modern ReactJS project with fast build times and better code reliability. This setup is ideal for both small and large-scale applications, ensuring a smoother development workflow and easier future maintenance.

If you need further assistance, feel free to reach out!

Source Code

The complete source code for this project is available on GitHub