React JSX And Hooks

This article contains the basics of JSX and Hooks and how JSX and Hooks are used in React.

Introduction

 
In the previous article, we learned about components and their usage in a React application. In this article, we are going to review what JSX is and what are its usages, along with the concept of props and Hooks.
 

What is JSX?

 
JSX is a JavaScript XML used in React applications. JSX is not compulsory to use in React applications but it makes your code more readable, reliable, and easy to modify. JSX is an extension to JavaScript.
 
JSX uses HTML syntax to create elements and components. It is just like a templating syntax. It has the tag name, attributes, and children. JSX compiles the code into pure JavaScript which can be understood by the browser.
 

Example of JSX Code

 
Create a new file in a React demo app, named Product.js. Add code for displaying the product values as text.
 
JSX And Hooks
 
JSX And Hooks
 
After exporting Product.js, import into App.js and define the <Product> tag in App.js.
 
JSX And Hooks
 
The result will be displayed as below.
 
JSX And Hooks
 
Now, the result in console will be displayed as below.
 
JSX And Hooks
 
The above code is as per JSX syntax. Now, we will review how the code looks and rendered by the browser when we don’t use JSX.
 

Another way to create the React application, i.e., without JSX

 
The Non-JSX version of the code which will be used in React.createElement() method is provided by React library. When the code is written using JSX, it is compiled in React.createElement() method.
 
React.createElement() method takes 3 arguments.
  • type - It includes the type of elements we need to create. 
  • props - It includes the key-value pair value for properties and attributes defined for the element provided in type.
  • children - It includes the child element to be created between then DOM element provided.
Example of React app without JSX code
 
Update the code as below by using React.createElement() method. 
 
JSX And Hooks
 
In the current situation, the values are not evaluated as they are by using JSX. Now, we are adding the key-value pair for defining id using createElement() method.
 
JSX And Hooks
 
Let us look at the output in the browser console.
 
JSX And Hooks
 
As per the output, we reviewed that the id is defined to div class.
 
Now, let’s make the text bold in Non-JSX code.
 
JSX And Hooks
 
The output will be shown as below.
 
JSX And Hooks
 
Now, to create a proper output, we need to add a nested React.createElement() method.
 
JSX And Hooks
 
Now, the output will be displayed in the browser as below.
 
JSX And Hooks
 
To display the calculated value using Non-JSX code, we need to remove the curly braces. Then, the calculated values will be displayed in the browser.
 
JSX And Hooks

JSX And Hooks
 

Hooks

 
Hooks are newly added in React 16.8 as a feature which doesn’t need to add classes to maintain a state which was possible in Stateful class component but was not possible in Stateless Functional component.
 
Hooks allow using State and other React features without creating a class.
 
Before going ahead, it is important to know that the Hooks feature doesn't break any previous feature, any component can be modified without breaking any other component. It is backward compatible so no other changes are required to use Hooks. We will go in details of hooks in a further article.
 

props

 
"props" is the short form for properties used in React application. "props" contains a single value or objects in key-value pair having a set of values, that is used, similar to HTML tag attributes, when passing to React Component while creating.
 
Example
 
When passing the attribute from a Component tag in App.js.
 
JSX And Hooks

JSX And Hooks

JSX And Hooks
 
JSX And Hooks
JSX And Hooks

JSX And Hooks
 
Currently, values are displayed the same because "props" is immutable and its value cannot be changed in the component. To achieve this functionality, we have a new feature named State which we will discuss in the next article.
 
Notes
  • JSX uses camel case while using method, tag name, or attributes; just like - createElement() or using attribute for className in createElement() method.
  • While creating a new class component, if we are returning more than 1 element, it should be bound under the main div as it can return only 1 element.
  • props are immutable and their value cannot be changed. If we assign props a new value in component, it will not change though it will return a runtime error.

Summary

 
In this article, we have reviewed what JSX is and how it is used in React and some basic concepts of Hooks and props. In the next article, we will learn about State and setState provided in React and also how props are different from State.
 
Next in this series >> State management in React.js