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)

Note:

• This tutorial requires NodeJS installed in your system. If you haven't installed NodeJS yet you can download and install it from the official website.

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

• If you want to use Typescript in your project use the following command.

npm create vite@latest project-name -- --template react-ts

• Now vite will scaffold your project files.

2. Now run cd project-name to navigate into the project folder.
3. Then you can install all the packages by running npm install.
4. After all the packages are installed you can open the project folder in your favourite code editor to begin developing.

• (If you are a VSCode user you can run code . in the terminal while navigated into the project folder to open it in VSCode)

5. 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.

• Download and install NodeJS from the official website.
• Restart your computer and try following the instructions.

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\

2. 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.

Conclusion

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.