DEV Community

Cover image for JSX !
Mayank Kumar
Mayank Kumar

Posted on

JSX !

So first of all let me tell you what actually is a JSX !

A JSX(JavaScript XML) is a syntax extension to JavaScript. It is used with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

Here is an Example :

const element = <h1>Hello, world!</h1>;
Enter fullscreen mode Exit fullscreen mode

It is pretty similar to HTML syntax. 🐱‍👤

image

Why do we need JSX ??

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. ~ React 😎

  • This is what was said by react developers when it was first announced, in my opinion this is a very useful syntax extension to JavaScript, it has made things very easy to configure and manage in a very large code base.

  • It makes it easier for us to create templates.

The main difference between HTML and JSX 🤯

1) HTML is a Hypertext Markup Language, the standard markup language for documents designed to display and view on the web in a web browser.

2) JSX JSX (JavaScript + XML) is an extension of JavaScript that permits you to write down HTML directly within JavaScript

3) HTML elements have attributes where as JSX elements have props.

Attributes in JSX

JSX allows us to use attributes with the HTML elements just like we do with normal HTML. But instead of the normal naming convention of HTML, JSX uses camelCase convention for attributes

THIS WAS A BASIC PREVIEW OF WHAT IS THE MAIN USE OF JSX, IF YOU WANT TO GO IN DEPTH OF THIS TOPIC THEN CHECK OUT THE FOLLOWING BLOG

https://reactjs.org/docs/introducing-jsx.html

Bonus Meme 😂
image

Happy Coding 🚀

Top comments (4)

Collapse
 
khoahuynhdev profile image
Khoa Huỳnh

JSX is syntactic sugar for React.createElement function.

Collapse
 
mayank0508 profile image
Mayank Kumar

this might be the best description for JSX 🔥

Collapse
 
samuelfaure profile image
Samuel-Zacharie FAURE

JSX!

Collapse
 
amanchourasia profile image
Aman Chourasia

Wow!🤯