Getting started with React: how to create a basic React application

React is a JavaScript front-end library created by Meta (formerly known as Facebook). React is a free and open-source front-end library used for creating interactive websites and mobile user interfaces (UI for short). In this article, you will learn how to set-up and create a basic react application. This article will not go in-depth about react features.

To get the most out of this article, you should have some basic knowledge of Node Package Manager(NPM). Take some time to familiarize yourself with it: Beginner's Guide to using NPM

Before we get started, let's discuss some benefits of React

Benefits of using React

React offers tons of benefits, which makes it stand out from other Front-end frameworks like Angular, Vue, Svelte etc.

Some of the benefits React offers include the following:

• React code is simple and easy to maintain due to its modular structure, therefore saving huge amount of time and money to businesses compared to other front-end frameworks.

• Components in React are declarative, making it easy to build interactive UIs. you only need to describe how you want your UI to be and React will take care of the rendering.

• With React, you can build reusable components which can be used in multiple parts/sections of your application, therefore making it easy to maintain and develop your application over time.

• When it comes to relevant resources and support, React has a large and active developer community which you can rely on.

Now with that out of the way, let's get started!

Installing React Application

We will be using visual studio code to install and create our React application but you can use any of your preferred code editor.

Step 1: Launch your code editor, toggle the terminal and then run the command below to install React:

npm create vite@latest

After running the above command, you will be prompted to perform the following steps:

1. Create a project name

2. Choose a framework

3. Select a variant

Step 1: We will name our project new-project, but you can name it whatever you wish.

Step 2: Choose React

Step 3: Select JavaScript

Next, run the following commands to start the installation process:

cd new-project
npm install

The installation process will take some few minutes. so just exercise some patience till it is completed.

The folder structure should look like this:

Step 2: Use the command below to run your React application

npm run dev

When the process is done, you should see something like this:

Hover over http://127.0.0.1:5173/ and click it to open and view the React application in your browser or you can just copy and paste it to your browser.

You should see something like this:

Creating React Application

For this example, we'll be creating the classic "Hello World".

Use the following steps to create your React application:

1. Open App.jsx, index.css and App.css files in your React Application folder

2. Delete all the default template code

3. Write the code below in your App.jsx file
   

const App = () => {
  return (
    <h1>Hello World</h1>
  )
}

export default App

Your App.jsx file should look like this:

Save the changes you made in you App.jsx file and check your React application in the browser.

You should see something like this:

Congratulations, you have created your first React Application

Conclusion

In this article, you have gotten an overview of React, learned its benefits and how to create a basic React application.

If you are interested in learning the in-depth features of React, you can check out this free online React course by Bob Zirol here: Learn React

Comments

[Ekemini Samuel]

Clear and concise article @luwadev

Keep up the good work.

[Umar Yusuf]

Thanks