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,
- 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.
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.
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
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.
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)
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.
Hi Rajesh,
Check this article on how to create series.
dev.to/kallmanation/dev-to-writing...
Thank you I created the series via wizard and it's very simple, here it is dev.to/rajeshkumaryadavdotcom/node...
I'm glad that it's useful. It looks nice 😃