Learn React JS - Basic Concepts

Hello everyone!👋

I hope everybody having a great weekend. Let's learn the new technology starting from this week. 😃

This series is for beginners who want to learn React JS. 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,

What is React JS?
JSX
Expressions in JSX
JSX -> React Elements
Rendering Elements
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.

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.

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

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

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

Then React Elements creates the DOM and update it accordingly.

Example:

This is a JSX code,

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

The output after Babel compilation,

React.createElement("h1", null, "Hello DEV")

Then React.createElement produces the following code,

{
  "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

<div id="root"></div>

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

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

A div with id as root. This will be used for domRef.
Include React & React DOM <script> section.
Include index.js

<!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

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

Here's the live demo & output in CodeSandbox

https://codesandbox.io/s/vigilant-flower-qg742?from-embed

Here's is the link of 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.

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!

Learn React JS - Basic Concepts - Part 1 (Series)