Note: With this series, I don't pretend to be the best or the most accurate. What I aim to do is make the language more understandable and allow more people to learn it, especially those who are busy or new to the subject. So, let's break things down in simple terms and make learning a little bit more fun! 😄

Do you remember the times when it took ages to set up a simple project? If you are old enough (as myself) you surely remember, those days when configuring everything was like solving a Rubik’s cube - frustrating and time-consuming. Well, those days are long gone! With modern tools like Create React App (CRA) and Vite, setting up a React project with TypeScript is now faster, easier, and a lot more fun.

This tutorial is part of a series of bite-sized chunks designed (I really do sound like I know what I am talking about, don't I?) for busy parents, students, professionals, or anyone with a packed schedule who wants to learn React and TypeScript. The goal is to give you digestible, actionable steps that you can fit into your daily routine, without feeling overwhelmed.

And hey, I’ll keep it light! After all, who says learning can’t be fun?

Table of contents

1. Why TypeScript with React?
2. Setting up with Create React App
3. Setting up with Vite
4. Which one should you choose?
5. Conclusion

1. Why TypeScript with React?

TypeScript is like a trusty pair of glasses for your code. Suddenly everything is clearer, and you can spot potential errors before they become bugs. When paired with React, it offers better code quality, enhanced tooling, and more confidence when building large applications. But fear not! Setting up TypeScript with React has never been easier, thanks to tools like Create React App (CRA) and Vite.

Whether you’re a busy professional who only has time for 20-30 minute learning sessions or a student juggling multiple projects, this guide is here to help you get up and running with React and TypeScript.

But what is a great series of tutorials without good old dad's joe?

• Why did the React component break up with its state?
• It just couldn’t handle the relationship anymore!

2. Setting Up with Create React App

What is Create React App?
Create React App (CRA) is an official and simple way to set up React projects. It takes care of most of the configuration for you, so you can focus on writing code rather than setting up Webpack, Babel, or other tools. Think of it as a ready to go coffee machine, just press a button and you’re good to go!

How to set up a project with CRA?
1.Install Create React App (no need for global installation):
Open your terminal and run this command to create a new React project with TypeScript:
npx create-react-app nik-is-great --template typescript

This command will:

• Download and install Create React App.
• Set up a new project folder called "nik-is-great".
• Pre-configure the project to use TypeScript.

2.Navigate into the project directory:
After running the command, go to your new project folder:
cd nik-is-great

3.Start the development server:
To launch your app in the browser, just type:
npm start

Your app will be live at http://localhost:3000 and it’ll be ready to rock and roll!

Why choose CRA?

• Beginner-friendly: Easy to set up with minimal effort.
• Pre-configured for you: CRA does the hard work of setting up Webpack, Babel, and other tools.
• Widely adopted: A great option if you want to stick with something reliable and well-documented.

However, just like that one friend who takes forever to get ready, CRA can be a bit slow with larger projects!

3. Setting up with Vite

What is Vite?
Vite is the modern, high-performance tool that’s like a fast sports car compared to CRA’s family sedan. Vite uses esbuild under the hood for super fast development builds and Rollup for optimised production builds. If you value speed and flexibility, Vite is the way to go.

How to set up a project with Vite?
1.Install Vite using npm:
npm create vite@latest

Need to install the following packages:
create-vite@6.0.1
Ok to proceed? (y) y
✔ Project name: … nik-is-great
✔ Select a framework: › React
✔ Select a variant: › TypeScript

2.Navigate into the project directory:
After running the command, go to your new project folder:
cd nik-is-great

3.Install dependencies:
Next, install all required dependencies:
npm install

4.Start the development server:
To get the development server up and running, type:
npm run dev
Your app will now be live at http://localhost:5173!

Why choose Vite?

• Ultra-fast performance: Vite shines when it comes to build times and hot module replacement (HMR).
• Modern and minimalistic: It’s a lean setup that gives you more control with less overhead.
• Growing ecosystem: Vite’s popularity is soaring, and it’s a great option for modern web development.

However, like a new puppy, Vite is still growing, and you might run into the occasional hiccup when using newer tools. I say that but you find it most of the time quite stable.

4. Which one should you choose?

So, which tool should you pick? It really depends on your needs!

Choose Create React App if:

• You’re just starting out and prefer an easy, guided setup.
• You’re working on smaller projects or don’t mind slower build times.

Choose Vite if:

• You value speed, performance, and flexibility in your tooling.
• You’re working on larger projects or need near-instant build updates.
• You want to dive into a more modern setup with minimal configuration.

Both are awesome, but one might be more suited for your specific needs!

5. Conclusion

Setting up React with TypeScript is now faster and easier than ever, thanks to Create React App and Vite. Whether you’re a busy parent, a student trying to squeeze in learning between classes, or a professional developer with a packed schedule, you can get started with minimal effort.

Remember: Learning doesn’t have to be overwhelming. Start small, learn at your own pace, and enjoy the process!

So, what are you waiting for? Pick your tool, follow the steps, and start building your React and TypeScript apps today. And stay tuned for more bite-sized tutorials in the series!

Ps: If you have followed it to here you can find the repo I've set up with both examples - https://github.com/nikdyankov/react-from-zero-to-hero/tree/main/lesson-1