Create a React project from scratch

I want to share the steps I do when I create a new React project from scratch.

First, I choose Next js as React framework because nowadays is the best practice recommended by React team in the new documentation released recently. Moreover, it is better than starting a new React project with Create React App because Next js provides you with many tools and features integrated out of the box, and it is the best approach if you want good SEO for your website.

We will cover the steps for creating a Next js project on the local machine and uploading the project to GitHub.

Steps

Placed in the folder where you want to create the project, execute the following command:

npx create-next-app@latest --typescript

I like adding 'typescript' in my projects because of better bug detection prematurely and self-code documentation.

I like to make a file named '.npmrc' in the root of the project with the following content:

save-exact=true

It helps install packages in the future with a specific version set in the package.json. Thanks to that, we control the versions we install on our project.

If you are using the src folder and you want to use Tailwind CSS for styles (per default with Next.js installation), you must put this on the 'tailwind.config.js' file for proper installation of Tailwind CSS:

content: ["./src/*/.{js,ts,jsx,tsx,mdx}"],

You can add the '.npmrc' file and 'tailwind.config.js' file with the modification to the git stage and do a git commit on the main branch to save these initial configurations.

Go to https://github.com/new. We log in to GitHub.

Fill the Repository name with the same word we have named the project in our local machine to keep consistency.

If you want to create a project without sharing the code online, mark the 'Private' option.

Click 'Create repository'

We come back to the project on the local machine and run the following command:

git remote add origin https://github.com/github_username/project_name

We execute this command to upload our main git branch to GitHub remote repository:

git push -u origin main

Following these steps, we get a React project initial setup ready to build excellent applications.

I hope you enjoyed the article.

Join my weekly newsletter, where I share articles to help you become a better front-end developer. You'll receive them directly to your inbox.

See you in the next post.

Have a great day!