How to Set Up React Project: The Correct Way
All React developers can confirm that React has made the process of setting up a web project easy and painless.
There is also an easy way to set up your React project. Check out this article.
Prerequisite
- Knowledge of HTML and JavaScript (ES6)
- Node.js and NPM are installed on your computer. If not, follow the steps here
- Visual Studio Code Editor Installed or get it here
- Familiarity with the Command-line Interface
- Good internet connection
What you will learn.
- create-react-app vs vite
- How to create a React project with Vite
- Running your project locally on the Browser
- Pros and Cons
If you remember from the previous approach (How to Set Up React Project: The Easy Way) where you have to create project starter files all by yourself. That process could be described as a “Traditional or manual approach”. Unlike that traditional approach, in this approach of doing things “The correct way”, you do not have to manually create project starter files; all you need is a command or command-line tool and you will be giving the project starter files or boiler-plate or mostly referred to as a template to start your project with.
This approach to setting up React project is very declarative. This is because you don’t have to manually set up your project. You’re given a project boilerplate (template) from webpack, and downloaded dependencies from npm.
Create-react-app vs vite
Create-react-app and Vite are commands or command-line tools used in the command-line Interface (command prompt) to instruct npm to give us the new project starter files or template. They could also be called scripts.
The create-react-app has been the most used command-line tool for starting a new React project, and as one of the great, it’s still in use to date. It was created by the React team. On the command-line Interface, create-react-app is always used alongside a prefix command/tool known as npx. To successfully start a new React project with create-react-app one is expected to write the order like this: npx create-react-app your-project-name
Example:
Let’s say we wanted to create a project named e-commerce-store.
The full command should be this order: npx create-react-app e-commerce-store
Note: When naming your React project you should always go with lowercase characters, also remember to keep it simple.
Vite! on the other hand, is a next-generation front-end tooling for starting a new React project. Most React developers now utilize vite for creating projects. This is because of its ability to provide a faster and leaner development experience for modern web projects that the create-react-app doesn’t have. Vite is more lightweight than create-react-app.
Both create-react-app and vite consist of two major parts: 1. A development server to locally start and keep track of saved changes made to your code while working on a project. 2. A build command that bundles your code and ready for production.
How to create a React project with Vite
At this step, I will be utilizing some UNIX-like commands to get our mini-project started. So, on my machine that has a windows operating system I will be switching to a different command-line interface called Windows PowerShell. This will enable me to run Unix commands. Windows PowerShell comes preinstalled by default in Windows 8, and 10 systems, all you need is to search for it and click on it to get it started.
You should have a similar screen to the one below once it’s successfully started.
Type the command pwd and hit the enter key — this command will print your current working directory to the terminal. See the screenshot below for a comparison.
With the result printed to the terminal, you can see that I’m my home directory. This is where I will initialize the project for this article.
Note: We will maintain the same project from our previous article - the burger ingredient list website.
STEPS:
- In your command-line Interface, type the command npm create vite@latest burger-ingredients and hit the enter key. You should have a similar screen to the one below.
At this stage, hit the enter key to proceed with the installations.
2. Select a framework: You should have a screen similar to the one below.
Part of the unique abilities of vite is its support for multiple templates for JavaScript front-end frameworks. Use the Navigation keys on your keyboard to navigate down and choose React, hit the enter key to proceed.
3. Select a variant: At this step, are asked to select a variant language (programming language) you want to work with, for this project we’re using JavaScript, so, navigate down and choose JavaScript, hitting the enter key after that. See the screenshot below.
4. Installing the required packages: See the screenshot below for comparisons.
At this step, you can notice that we are provided with instructions: First, use the command cd burger-ingredients to change our current working directory to that of our just newly created project. Second, is to use the command npm install to install the additional packages required by vite. Carefully follow all that instructions. If you did it well, in seconds you should have a success screen similar to the one below.
Great! Our project starter files or template is ready.
5. Open the project with Visual Studio Code or any other editor of your choice. Here is a shortcut to do that on the terminal code . in words it is written code dot. When Vscode opens you should have a similar screen to the one below.
From the screenshot above you can notice on the left we have several files marked with a red square. Inside this red square lives:
- node_modules:- used for saving all downloaded packages from npm.
- public:- A folder that serves as a container for assets or static files of our project, e.g images.
- src:- This folder contains all the working files of your project both the project starter files and the custom ones that you will later create as your project grows. Inside this src folder lives a file main.jsx which serves as the entry point to your application. This main.jsx file handles your app startup, routing, react import, DOM import, etc.
- package.json:- This file register and contain all pieces of information about your app or project, e.g (App name, React version, downloaded dependencies etc).
6. Expand the src folder and open the App.jsx file, and replace the lines of code in it with the following lines of code.
Below is how your App.jsx file should be.
Note: If you made use of the create-react-app command your files would be ending with the .js extension and the file main.jsx would instead be index.js
Sharp Point: Inside the src folder, open the main.jsx file and carefully take a look at the lines of code in it. See the screenshot below for a comparison.
On line 1, React is imported — and this gives us access to start writing React. On line 2, a global variable ReactDOM has also been imported. Also, on line 3, our App.jsx file is being imported as App. At line 6 the global variable ReactDOM is being called to create a root to display our React component <App /> inside a browser DOM node using our unique id of root. When our app goes live on the browser, all the content in the App.jsx file is going to be rendered on the browser. And the App.jsx will serve as a parent component to other components that you may need to create as your project becomes bigger.
The point I want you to draw out is, unlike The traditional or “Easy way” of setting up React projects where you have to manually create and configure this main.jsx/index.js file, the “Correct way” of setting up React projects doesn’t require you to do that, instead the main.jsx/index.js file is being created and configured automatically and this is because “The correct way” of setting up React project is declarative.
Running your project locally on the Browser
You have done well reaching this far. At this point in time, we need to view our project output on the Browser. Unlike “The Easy way” where you will need to install a third-party Live Server, instead, “The correct way” of setting up React projects provides you with an in-built development server to locally run your project on the browser.
To preview our project on the browser, use the command npm run dev. To start a React project created with create-react-app use the command npm start. Make sure to do this inside the project directory to avoid getting errors. See the screenshot below.
Once the server has successfully started you should have a similar screen to the one below.
Our development server is now running, to view the page open your browser copy the local URL http://localhost:5173/ and paste it into your browser address bar. Don’t forget to hit the enter key so your browser can travel to this port number. When the page loads up you should have a similar screen to the one below.
Looking at the screenshot above, you will notice that Our Burger Ingredient list website has some default CSS styles applied to it. It is because “The correct way” of setting up React projects always comes with default CSS files index.css and App.css and they both have some CSS styles already written in them. Conventionally, when working on a serious project, you will not want to keep the CSS styles in those files to avoid your UI being messed up with CSS styles you never wrote. 😀
Pros
- You don’t need to manually create project starter files or template.
- No CDN links are needed to start writing React.
- You don’t need third-party software to run your project on the browser. By default, you’re provided with a development server to do this.
- When a code break happens or a bug; you can utilize the command-line Interface to know where the errors occurred from.
Cons
- This approach is best suited for larger projects with the intention of deploying it to the cloud.
- A stronger internet connection is needed to download npm packages.
- This approach requires that you understand how to use the command-line Interface.
Conclusion
Great reading this far! We were able to create our project without manually creating the project starter files, instead, we were given a template to start with. That’s cool! isn’t it?😀. Thanks for reading my article I’m delighted you spend that much time digesting my content. Thanks once again.👏👏👏
