JSX In ReactJS | ReactJS Tutorial #51 min read

In this Post, We Will be Learning About What is JSX In React, How to Use JSX In ReactJS. In the Previous Parts, We Learned About React Render, and ES6 In React, And We Created Our React App. If You Have Missed Those Parts You can Access Them Here:

ReactJS Tutorial

What is JSX?

JSX Stands For JavaScript XML It Allows Us to Write HTML In React, There Are Other Methods Also to Write HTML In React But Using JSX Makes It Easier To Write HTML Into React.

How Does JSX Work?

JSX Allows Us to Write HTML Elements In JavaScript And Then Put It Into React DOM. React JSX Converts HTML Tag Into React Elements.

This Code Is With JSX:

const jsxElement = <h4>This is JSX Element</h4>;

const ReactDiv = ReactDOM.createRoot(document.getElementById('ReactDiv'));
root.render(jsxElement );

This Code Is Without the Use of JSX:

const react_element = React.createElement('h4', {}, 'This is Without JSX!');

const root = ReactDOM.createRoot(document.getElementById('ReactDiv'));
root.render(react_element );

What are Expressions In JSX?

React Expression Can Be Variable, Property, or a JavaScript Expression, JSX Executes the Expression And Return the Result. We Use ‘{ }‘ Curly Braces to Write Expressions In React.

const new_Element = <h4>React is {90 + 10} This Expression Will Return the Value 100</h4>;

So this Was It For This Blog See You In The Next One Till Then Keep Coding Keep Exploring!