How to Set Up React Project: The Easy Way

With the ReactJS introduction in 2013, setting up web projects has become even more effortless than anyone could think of. Happy are the React developers.

This article is targeted at anyone just starting out with ReactJS. In this post, I will teach the quickest way to start a ReactJS project or how to quickly add ReactJS to your existing HTML project. What we will be building? We will build a burger ingredient website that lists the favorite ingredients used for making burgers.

Prerequisite

• Knowledge of HTML/CSS/JavaScript (ES6)
• Internet connection
• Visual Studio Code or Atom

This a comprehensive guide to one of the two best approaches to “How to set up React projects.” The other approach, “How to Set Up React Project The Correct Way”, will be discussed in another post. You can get the link below, in the conclusion section.

Note: This is going to be quite a long read, but I promise you will gain practical knowledge if you read to the end especially, as someone just starting with React.

In this article, you will learn:

1. What React is
2. How to Set Up React Project The Easy Way

• CDN
• Babel
• Running your project locally on the Browser
• Pros and Cons

What is React?

React is a declarative, efficient, and composable JavaScript library for building reusable user interfaces (UI) or Client-side. Jordan Walke created it, it was released in the year 2013, and has now been maintained by Facebook. React has over 100k stars on GitHub and is powering thousands of enterprise apps, including mobile apps.

Setting up React project the easy way

This approach or method of setting up a React project requires little effort, and no tooling is required. With a few lines of code, this approach is achieved. All you need is an internet connection and a little bit of your time. With this approach, you can easily add Reactjs to your existing HTML projects.

Okay! enough of the small talk, grab your coffee and let’s become a doer. 😃

STEPS:

In this article, we will be building a Burger Ingredient list website.

Step 1: Add initial project files

1. Create a project folder titled React, and open the folder with the Vscode editor.
2. Add the following files to the created folder.

• index.html
• index.css
• index.js

3. Open the index.html file and paste the following lines of code into it.

That’s all for now.

If you carefully study the code above you will notice that it is just plain HTML not React. This is because we’re yet to add all that we need to enable us to write React.

Albeit, we will be doing this in the next steps, before we do that we need to understand what is CDN.

What is CDN?

A content delivery network (CDN) is a group of geographically distributed servers that speed up the delivery of web content by bringing it closer to where users are. See full definition

What does this mean? 👇

Companies or individuals can decide to host web development toolkits on the cloud and share the link to that toolkit for people to access and use in their projects. A typical example is using the Bootstrap toolkit in your project. Maybe you don’t want to write some functionality in your website project from scratch, but you then decided to use Bootstrap. The only way you can add Bootstrap to your project is through CDN.

Likewise, in this approach of “Setting up React Project The Easy Way”, React has also provided CDN links to enable you to write or add React to our projects. These CDN links are called (React, and ReactDOM). Check this discussion about React and ReactDOM.

Step 2: Adding React and ReactDOM CDN links

1. Open the index.html file we created earlier and add the following CDN links in the head tag.

<!-- Load React -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

Your index.html file should now look like this.

On lines 8 and 9 we have successfully linked the React and ReactDOM CDN into our project. And from the CDN links, you can notice that we’re using React 18 — At the time of publishing this article, this was the latest version of React.

React and ReactDOM is global variables. React will give access to start using React. While ReactDOM on the other hand will enable us to render our website contents on the browser.

Theoretically, this is all that we need to start writing some basic React codes but we have some limitations. To surpass this limitation we need to enable the React syntax known as JSX, and to do so we will be adding Babel to our code, but before we do that let us briefly discuss Babel in the next headline.

What is Babel?

According to Wikipedia — Babel is a free and open-source JavaScript transcompiler that is mainly used to convert next-generation JavaScript a.k.a ECMAScript 2015+ (ES6) code into backwards-compatible JavaScript code that can be run by older JavaScript engines.

Babel allows web developers to take advantage of the newest features of JavaScript that are yet to be compatible with the JavaScript engines, and convert them to support the JavaScript engines. See the official Babel website.

Step 3: Adding Babel CDN Link

On the head tag of the index.html file add the following script tag.

<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Your index.html file should now look like the one below.

On line 11 we successfully added Babel using its CDN link and JSX is now enabled. We will need to link our index.js file with our index.html file to start writing JSX.

Refactor the lines of code in the body tag of the index.html file to be like the one below.

On line 18 you can notice we’ve replaced our unordered burger list with an empty div which has an id of root. This div will serve as a DOM container which ReactDOM will use to communicate with the DOM and render our website contents on the browser. On line 21 we have a script tag with the source attribute set to the index.js file that we created earlier. Inside this index.js file is where we will define our Burger Component and give it to the global variable ReactDOM to render the contents of the Burger component on the browser.

In the same line 21 of the index.js file, our script tag has a type attribute with the value set to text/babel, this means we’re using the Babel transcompiler.

Step 4: Defining our Burger Component

Add the following lines of code to the index.js file.

At line 1 our component is a JavaScript arrow function named Burger; returning our Burger Ingredient list. Writing HTML inside a JavaScript function is among the uniqueness of React and this syntax is known as JSX. In React functions of this kind are called Functional Components.

Step 5: Running your project locally on the Browser

So far, we have been busy trying to understand some concepts along with our project set-up without actually getting to see how the contents of our website may appear on the browser. What about viewing our website on the browser? Okay! It’s fine, let’s do that right away.

This approach of viewing a React project on the browser using the ‘’Easy Way’’ requires installing a third-party software — extension from a text editor like Vscode, Atom, or others.

• Inside Vscode, click on the Extension tab on the top left sidebar, or use the shortcut keys Ctrl + Shift + X. See the screenshot below.

When the Extension tab opens type the keywords “live server” into the search tab and when the search result shows you will have a similar screen to the one below. Click on the first result Live Server circled with a red square.

• Next click on the install button to download and install the Live Server. See the screen below for a comparison.

After the installation has been successful, close and reopen Visual Studio Code so that the installation can take effect.

• On the bottom, right side of Vscode, you will see a Go Live button, click on it to run your project on the browser. See the screenshot below.

In seconds, you should be notified inside Vscode that your Server is Started at port: 5500. Your project should be live on the browser at the local URL: 127.0.0.1:5500. See the screenshot below.

Our Burger Ingredient list website is live on the browser. But our website is just plain black text without CSS styles applied. I will encourage you to spend more time yourself to style the h1 and li items to give a better and more appealing look to our website. Remember to do this inside the index.css file.

Pros

• This is the quickest way to start a React project or add React to your existing HTML project.
• With this approach, starting a React project doesn’t require complicated tools like a Command-line Interface, package manager, bundler, or development server.
• It doesn’t require a stronger Network to start your React project

Cons

• Using this approach will best suit when you want to experiment with a project or concept for learning’s sake, and you don’t plan to deploy it to the cloud.
• This approach will best suit you when you don’t have plans for a larger project.
• This approach is imperative; meaning you have to manually set up project starter files.
• Third-party libraries are being added to the project through CDN links in the head tag, and this can make your project to become cumbersome and messy.
• To run your project on the browser you need to manually install a third-party extension; as no development server is provided by default.

Conclusion

Congratulations!!! We’ve successfully set up a React project using The Easy Way. Also check out The Correct Way to Set Up a React Project. Don’t forget to like or drop comment. Thanks, once again.