DEV Community

Cover image for Learn React JS - Basic Concepts - Part 1 (Series)
Yuvaraj
Yuvaraj

Posted on

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

#webdev #react #javascript #html

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.

const element = <h1>Hello, world!</h1>;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

const result = <h1>Total is {4+5}</h1>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

The output after Babel compilation,

React.createElement("h1", null, "Hello DEV")
Enter fullscreen mode Exit fullscreen mode

Then React.createElement produces the following code,

{
  "type": "h1",
  "props": {
    "children": "Hello DEV"
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
const welcomeMessage = <h1>Hello DEV</h1>
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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 
<!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>
Enter fullscreen mode Exit fullscreen mode

index.js

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

Here's the live demo & output in CodeSandbox

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 logo yuvgeek / learn-react

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!

Top comments (4)

Collapse
 
rajeshkumaryadavdotcom profile image
Rajesh Kumar Yadav •

May I ask a question about at bottom of this article you have crayons series switcher, which liquid code did you use to create this. I will use this trick to bind up my articles. Sorry if this question seems silly to you but I am new on dev.to and that's why asking. Thanks in advance.

Collapse
 
yuvgeek profile image
Yuvaraj •

Hi Rajesh,

Check this article on how to create series.
dev.to/kallmanation/dev-to-writing...

Collapse
 
rajeshkumaryadavdotcom profile image
Rajesh Kumar Yadav •

Thank you I created the series via wizard and it's very simple, here it is dev.to/rajeshkumaryadavdotcom/node...

Thread Thread
 
yuvgeek profile image
Yuvaraj •

I'm glad that it's useful. It looks nice šŸ˜ƒ

Read next

keploy profile image

AI-Powered Code Generation: Revolutionizing Development

keploy -

madsstoumann profile image

Any web developers or designers in Lanzarote? Iā€™m up for a chat and a coffee next week (PDC or Arrecife) ā˜•ļø

Mads Stoumann -

sharathchandark profile image

Build Live Code Editor Clone with HTML, CSS and JavaScript

sharathchandark -

ricardocaselati profile image

Types: char and boolean

Ricardo Caselati -