Learn React Concept and Create your first app with React
Tags: javascript, webdev, react, beginners
Published: 2022-07-31 02:04:29

In this article, we will learn what and why React. We will also create our first React application.

## What is React?

React is a JavaScript library created by Facebook and released in the May of 2003 for front-end development. 
Front-end development consists of HTML, CSS, and JavaScript. As a front-end developer, you will easily find it is very difficult for the front-end with HTML, CSS, and JavaScript when a website or web app is more interactive (have a lot of different moving parts). Eventually, Facebook developers decided there must have a better way to manage these difficulties and that was when **React** was created as a JavaScript library to make front-end development easier and faster.

## Why React?

Interactive websites need to update the DOM(Document Object Model) whenever a change happens. Compared to other libraries that manipulate the DOM, React uses a Virtual DOM (a lightweight copy of the actual DOM) that allow updating the part of the website that has changed and this increases the speed of updates. 

## How to use React

You can use react in two ways **Adding react to your website** or **Creating react app**.

## Adding React to a website

>React can be added to a website without any special tools and installations. But before that, we have to include the React library as **two script tags** to the head of the HTML Document
>```html
><script src="https://unpkg.com/react@16/umd/react.development.js" >crossorigin></script>
>
><script src="https://unpkg.com/react-dom@16/umd/react->dom.development.js" crossorigin></script> 
>``` 
>Next, we need to add another script, to enable the use of JSX.
JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.

>```html
><script src="https://unpkg.com/babel-standalone@6/babel.min.js"</script> 
>```

## Creating react app

>Facebook has created a tool called [Create React App](https://create-react-app.dev/) that makes it easy to set up a React project with a command!
>
> - Now, we will be creating our first react app called `my-app`.
>
> - To get started, make sure you have a recent version of [Node](https://nodejs.org/en/) installed on your machine.
>
> - After the installation of the node, Run the command below in your terminal with the path you want to create the app.
>
>```PowerShell
>npx create-react-app my-app
>```
>
> - After the execution of this command, this will install all the required dependencies and a directory name `my-app` will be created in the path you run the command. Change the directory to the `my-app` by running the command below in the terminal.
>
>```powershell
>cd my-app
>```
> - Run the app with this command.
>
>```powershell
>npm start
>```
>
> - Start the app on **localhost:3000** in any browser. This is the default output of our project in the browser:
>
>![Create react app default output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4evlstu5nbzbainc7yvt.png)

## React Project Structure

Let's explore the structure of our project by opening it using a code editor.

_Now, this is the project structure after creating react app. By default, it contains two directories `public` and `src`, a `ReadMe.md` file that contains how the app can be run, and other information about the app. It also contains a `package,json`, and `package-lock.json` file which contains the dependencies installed._

![Create react app default structure ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anfp1fa8l5oczhaf6zm6.PNG) 

_The `public` folder contains files related to how the application will display on the client, the most important of those being `index.html`, which is the HTML template of our page:_

![React app public directory structure ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjlrzwzs0hxggk8393c8.PNG)

_The `src` folder contains all of the JavaScript, CSS, and image files that will be compiled into a bundle file and injected into `index.html`_

![React app src directory structure ] (https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5rai61zu3mydtwlerwd.PNG)
 
Although there are other files in the src folder that comes with Create React App when it is generated, the two files below are the only critical files:

- **index.js**: This file is the entry point into our application. In the index.js file, a method called `ReactDOM.render()` is used to find an element with `id="root"` in the HTML and add our React application inside of that element.

- **App.js**: This file is the main component that will be rendered to the DOM, which currently includes the React logo image and the default text, that we see in the output.

## How is React App compiled?

React uses a `file loader`. In the case of Create React App, Webpack is used to set up.
Webpack creates a "bundle" file containing the content of multiple files that need to be "bundled" together and it is all added together into a single file and injected into the `index.html` file for compilation.

**Note** : _Webpack search for all CSS, JavaScript, and images in the `src` directory and create a bundle for them so they should always be in your `src` folder in case of Create React App_.



## Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on 
[LinkedIn](https://www.linkedin.com/in/desmond-owusu-ansah-09274a223/)
[GitHub ](https://github.com/Owusu-Desmond)
[Twitter] (https://twitter.com/DesmondOwusuDev)