JSX In ReactJS | ReactJS Tutorial #5

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!

Tanmay Sinha

Author

  • Tanmay Sinha

    Founder & CEO of MrProgrammer.in | I help Learning Freaks to Step into the World of Programming and Our Mission is to Provide High Quality and Valuable Content to Our Users! We believe that everyone has the potential to learn to code, and we are committed to making that happen. Our courses are designed to be engaging and interactive, and we offer a variety of learning paths to meet the needs of all learners. We are also committed to providing our learners with the support they need to succeed, and we offer a variety of resources to help learners learn at their own pace. If you are interested in learning to code, we encourage you to check out our courses. We are confident that you will find our content to be high-quality, valuable, and makes sense.