Setting Up a New React Project in 2023

So you want to create a React project on your local development environment and you are looking for the most straightforward way to accomplish it.

In 2023, due to a lot of new developments that happened in the React ecosystem, everybody seems to have different opinions about what tools should be used to setup a React project.

If you are a beginner or an experienced developer checking out how to setup in a modern way, choosing a way to start a new project might seem daunting. Therefore I am going to outline the best way to start a new React project in 2023. (Source)


Meet ViteJS

React is a javascript library that provides a layer of abstraction over pure Javascript to make front-end development easier. But a browser can only run plain old Javascript. Therefore a dedicated system is needed to convert the React syntax into vanilla Javascript.

In addition to that you might also want a system to see the outcome of the changes you do to your code live.

These can be considered as the minimum requirements to start a new React project.

ViteJS is a tool that enables you to accomplish the above tasks very effortlessly. It also takes care of many other functionalities we would need in a web development project such as importing images, stylesheets etc...

Using ViteJS to setup your new React project.

This process can be listed out in a few easy to follow steps.

  1. Open a terminal in a directory and run the following command. (replace 'project-name' with a project name of your choice)
npm create vite@latest project-name -- --template react
npm create vite@latest project-name -- --template react-ts
  1. Now run cd project-name to navigate into the project folder.
  2. Then you can install all the packages by running npm install.
  3. After all the packages are installed you can open the project folder in your favourite code editor to begin developing.
  1. Finally you can run npm run dev to instantly open a live developement server to see your React project in action.

If you were able to follow all the previous instructions without any errors,

🎉Congratulations🎉 You have a modern React project up & running.

If you didn't face any errors you can stop reading here and have fun or you can checkout the next section.

Potential Errors & Roadblocks

  1. npm is not recognized as an internal or external command operable program or batch file.

This is a common issue that a beginner who is new to the world of Javascript packages will face. npm is a package manger software. This is required to setup our React project. Therefore you have to install NodeJS which will also automatically install npm in your system.

If it still gives the same error even though you have NodeJS installed in your system. This is because you need to add the path to the npm program to windows. In order to do that execute the following command. (becareful when editing the windows path)

setx PATH "%PATH%;C:\Program Files\nodejs\
  1. Vite requires Node.js version 14.18+, 16+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.


This wraps up the guide to Setting Up A New React Project In 2023. I hope you were able to get up and running with React after following this.

Vite is a great tool that has become loved by a large number of developers. If you want to learn more about Vite you can headover to their official website.

If you run into any errors or you want personally clarify any doubts by talking to me you can drop me an email & I'll be happy to help you out.

You can also follow my youtube channel where I talk about exciting things happening in the React world.

A Profile Headshot Of Manupa Samarawickrama

Manupa Samarawickrama

HomeAboutBlogLet's Talk