JSX In ReactJS | ReactJS Tutorial #5

JSX In ReactJS | ReactJS Tutorial #51 min read

JavaScript, Programming

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
Latest posts by Tanmay Sinha (see all)

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.

Related posts:

Getting Started With ReactJS | ReactJS Tutorial #1Getting Started With ReactJS | ReactJS Tutorial #11 min read Introduction to ReactJSIntroduction to ReactJS | ReactJS Tutorial #22 min read React Render HTMLReact Render HTML | ReactJS Tutorial #41 min read Random Quote GeneratorRandom Quote Generator JavaScript3 min read Password ValidationPassword Validation Using JavaScript3 min read Most Popular Programming Language 2022Most Popular Programming Language 20223 min read Typing AnimationTyping Animation Using HTML & CSS3 min read Python Qr Code ThumbnailQR Code Generator In Python1 min read