Getting Started With React
Tags: react, javascript, tutorial, webdev
Published: 2023-02-23 18:20:06

## Introduction

This article intends to provide you with all you need to know to get started with React. Here, you will understand the power of a front-end framework, and the concepts needed to assist you to begin building scalable applications with React.

## What is React

React is a JavaScript _library_ for building user interfaces.

It is popular for being declarative, efficient, and flexible. It lets you build complex user interfaces from small, isolated code called **components**.

## Why React

The [2022 Stack Overflow Developer Survey](https://survey.stackoverflow.co/2022/#section-most-popular-technologies-web-frameworks-and-technologies) shows React to be one of the most effective and popular web frontend frameworks.
This is a result of the following React features:

- **Declarative:** React allows you to define the final state of your desired user interface.

- **Component reusability:** React allows you, as a developer, to create components only once and reuse them throughout your application. This reduces code duplication and shortens the development process guaranteeing uniformity across the entire application.

- **SEO friendly:** React has a positive impact on SEO (Search Engine Optimization) since it creates SPAs (Single Page Applications) that need JavaScript to display content so that it gets rendered.

- **Open-source support:** due to its popularity, React is well supported and maintained by the open-source community.

- **Design flexibility:** React is not opinionated, so it won't compel you to adhere to any particular design patterns, project organizational framework, or logical reasoning. Everything of it is up to you.

- **Smaller learning curve:** Compared to other Frontend libraries and frameworks, React is easier to learn, especially when familiar with JavaScript and HTML fundamentals.

## Getting started

To get started with React, you need to understand one of the major pillars of React, **Components**.

### Components

React makes use of reusable components in building its applications. A simple React application is divided into several independent and reusable pieces.

React provides two types of components:

- **Function components:** Components defined using JavaScript functions

```JSX

function App() {
   return <div className="App">Hello World!</div>;
}

```

- **Class components:** Components defined using JavaScript classes

```JSX

class App extends Component {
   constructor() {
       super()
   }

   render() {
       return (
           <div className="App">
               Hello World!
           </div>
       )
   }
}

```

> Read [this](https://dev.to/colocodes/react-class-components-vs-function-components-23m6) article for more about React Components

Now, let's get to a more practical approach to learning React.

### **Installation**

`create-react-app` is the official way to create single-page applications with React.

To create a React application,

- Run the command below on a terminal.

`npx create-react-app my-first-react-app`


![Application installed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9h6jcx2301u6r5oe46a.jpg)

The above signifies that the application has been created successfully under the directory **my-first-react-app**

- Navigate into the applications directory using the command below.

`cd my-first-react-app`

The directory looks like this:


![app directory structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y71ofn3n9h8odgmen7sa.jpg)

Let's discuss each folder in detail:

- **node_modules:** This folder contains all installed dependencies and packages the React application needs. In essence, the packages you wish to import into your application are stored here.

- **public:** This folder contains a variety of files but the major ones to consider are the `index.html` and the `manifest.json` files. Here,

  - the `index.html` file serves as a template for generating the main file which gets rendered on the browser.
  - the `manifest.json` file contains metadata which determines the icons, names and branding colours to use when a user adds the applications to their home screen.

Visit this [web app manifest guide](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/) to get a better understanding of how this file affects the user experience.

- **src:** This folder serves as the heart of the application's interface, containing all major components and styles created to run the application. It includes major components like:

  - `index.js`, which serves as the entry point to the React application. It contains some syntax including the `<App>` component as a React element and the DOM element, `root`, as the supplied container.
    This `root` DOM element is referenced from the `index.html`.

  - `App.js` which serves as the root component of the application. A typical React application structure would be to build React components and use this `App` component as a host to render them to the browser.

- **package.json** This file includes a list of the packages your project can use and the versions of those packages on which it depends. Together with the package-lock.json, it makes your build repeatable and simpler to share with other developers.

## Run The Application

To run your application

- Ensure you are in the application's directory in your terminal

> That is `C:\users\...\my-first-react-app>`

- Run the command `npm start`

- Open the `http://localhost:3000` local server to view the application.


![React App Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8az2g7mpdnjf8vom5n8.jpg)

Congratulations! You have created your first React application.

## Conclusion

This article has given you a rundown of the React frontend web library and its basic setup and structure. Now get creative and begin creating applications with React.

Visit the [React Documentation](https://beta.reactjs.org/) to get more tutorials and content on React