Getting started with React: how to create a basic React application
Tags: react, frontend, tutorial, beginners
Published: 2023-08-12 10:19:26

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](https://nodesource.com/blog/an-absolute-beginners-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.

![create a project name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4i239p58e8l7rdayotl5.png)

**Step 2:** Choose React

![select a framework](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2vb5csnio7551kp76y4.png)

**Step 3:** Select JavaScript

![select a variant](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eut62mpn9q9ikj0k1lnw.png)

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:

![React Application folder struture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocj6z8hwgz4iwilv0c2l.png)

**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:

![Application launched successfully](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fg5qs5olug908kvg4b2t.png)

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:

![React Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ld88jr80zpj014si94ji.png)



## 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:

![App.jsx file code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyvmzrbjm5s9futrw81v.png)


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

You should see something like this:

![React Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rrp8bz69vf5gknyjqbp.png)


_**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](https://scrimba.com/learn/learnreact)