Ateev Duggal

Sep 18, 2021

6 min read

What is JSX in React

Changes made in React JSX fromReact v.17.0

BY Author

Syntax

const element = <h1>Hello World!</h1>;
  1. Writing React code in JSX makes it easy to read and understand.
  2. As discussed above, we can simply write HTML codes inside JS, and it will be called a React code.
  3. Rendering of code is faster when compared to regular JavaScript
  4. Writing code in JSX not only makes it clean and understandable but can even help with error sporting.
Conversion of JSX into simple JS that browser can Read

React code without JSX

Comparison Between React with JSX and without JSX

React.createElement()

React.createElement(“type”, props, “children”)

Rules for writing JSX Code

  1. Every HTML tag must have its closing tag
  2. We can write JS code with the HTML by wrapping it with {}
  3. If we have huge chunks of HTML code, we will have to wrap it inside () & [] /<> </>
  4. It uses camelCase notation for naming HTML attributes like onClick, tabIndex, and many more.
  5. An error will occur in the console if any of the rules are missed or not followed.

Changes made in React JSX from React v.17.0

  1. With new JSX, there is no need to import React at the top every time we create a new component, but when it comes to the state, both React, and state will be imported at the top like — import React, {state} from “React”
  2. There will be a slight change in the size of the bundle depending upon the setup you use.
NEW JSX

Conclusion

  1. JSX is a syntax for writing both HTML and JavaScript codes together with the help of parenthesis in one file.
  2. With the help of JSX, we can write clean code which can be easily understood and edited.
  3. It is not mandatory to write React code in JSX only. We have one more method of writing React code without JSX, but it becomes complex and sometimes lengthy.
  4. And from React 17, it is not necessary to import React every time at the top of your component, but if you have states involved, then it becomes a different story as we have to import both React and the State we are using at the top.