Learn React JS - Basic Concepts - Part 1 (Series)
Tags: webdev, react, javascript, html
Published: 2021-05-23 18:33:35

Hello everyone!👋

I hope everybody having/had(depends on timezone) a great weekend. 

Let's learn the new technology starting from this week. 😃

In this series,we will cover the main concepts of **React JS** with multiple parts & this is the first part in the **React JS series**.

In this first part, we are going to learn the basics of React JS. 

The below are the topics to be covered in this part,

1. What is React JS?
2. JSX
3. Expressions in JSX
4. JSX -> React Elements
5. Rendering Elements
6. DEMO


### 1. What is React JS?

> A JavaScript library for building user interfaces.

React JS provides the user to create reusable UI with web components.

### 2. JSX

React JS utilizes `JSX`. JSX is the syntax extension to Javascript. You can use the HTML in the Javascript.

Consider the below example. The syntax are neither `html` nor `string`, it is `JSX`. 
```javascript
const element = <h1>Hello, world!</h1>;
```

### 3. Expressions in JSX

One can embed the JavaScript expression inside JSX. If you see the example below, variable `name` is used in the `welcomeMessage`.

```javascript
const name = 'DEV';
const welcomeMessage = <h1>Hello {name}</h1>
```

Here is an another example. The code produces the output as `Total is 9`.

```javascript
const result = <h1>Total is {4+5}</h1>
```

### 4. JSX -> React Elements

Since browser doesn't understand `JSX`, Babel first compile `JSX` to `React.createElement` & then `React.createElement` converts the code into an Object, that is called **React Elements**.

![JSX to React Elements](https://i.ibb.co/2Prr9w9/jsx-react-elements.png)

Then React Elements creates the DOM and update it accordingly.

**Example:**

This is a JSX code,

```javascript
const welcomeMessage = <h1>Hello DEV</h1>
```

The output after Babel compilation,
```javascript
React.createElement("h1", null, "Hello DEV")
```

Then React.createElement produces the following code,

```json
{
  "type": "h1",
  "props": {
    "children": "Hello DEV"
  }
}
```
### 5. Rendering Elements

Let's look how to render React elements to view with React DOM.

React provides a package called **react-dom** which provides DOM-specific methods.

Assume, we have the following code in `index.html` & `app.js`
```html
<div id="root"></div>
```

```javascript
const welcomeMessage = <h1>Hello DEV</h1>
```

In order to render the react element, **ReactDOM.render()** method to be used.

ReactDOM.render takes two parameters. 1st is the React Element & the 2nd is the DOM reference.

![React DOM](https://i.ibb.co/rHcq3RH/react-dom.png)


```javascript
const welcomeMessage = <h1>Hello DEV</h1>
const domRef = document.getElementById('root');
ReactDOM.render(welcomeMessage, domRef);
```
The React DOM renders the React Element in the mentioned DOM reference.

### 6. DEMO

To understand the above concepts, lets create a sample react app. In this example, we will not utilize jsx, instead plain JavaScript will be used to demonstrate.

Here, we have 2 files - `index.html` & `index.js`.

`index.html` has 
1. A div with id as root. This will be used for domRef.
2. Include React & React DOM `<script>` section.
3. Include `index.js`

```html
<!DOCTYPE html>
<html>

<head>
  <title>Learn React - Part 1</title>
</head>

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="index.js"></script>
</body>

</html>

```




`index.js`

```javascript
const domRef = document.getElementById('root');
const welcomeMessage = 'Hello DEV';
ReactDOM.render(welcomeMessage, domRef);

```
Here's the live demo & output in **CodeSandbox**

{% codesandbox qg742 %}

Here's my github repo where you can find the files in the **part-1** branch. We will keep updating this repo for every part. So, please bookmark it.

 {% github yuvgeek/learn-react no-readme %} 


If you have looked the 2nd line, we are not using `JSX`. We are using the string. The reason is, with this simple react setup it is difficult to write the React App. 

Let's discuss it in the upcoming parts where we will learn more React concepts!

Thanks for reading the article!