JSX in React

JSX means JavaScript XML and it is a templating syntax. JSX in react looks like HTML markup in JavaScript. JSX allow developers to use HTML syntax to compose JavaScript components. JSX expression begin with an HTML-like open tag, and terminations with the corresponding closing tag. JSX tags support the XML self-close syntax so you can optionally leave the closing tag off. It’s a make application robust and boosts performance. Since JSX is not a regular JavaScript object. Thus to enable a browser to read JSX, it still needs to transform JSX file into a JavaScript object using JSX transformers like Babel.

Important note: – JSX is optional and not required to use React.

JSX extends the PrimaryExpression in the ECMAScript 6th Edition (ECMA-262).

PrimaryExpression :

  • JSXElement
  • JSXFragment

JSXElement :

  • JSXSelfClosingElement
  • JSXOpeningElement and JSXClosingElement (names of JSXOpeningElement and JSXClosingElement must be match)

JSXSelfClosingElement :

  • JSXElementName (JSX attributes are optional)

JSXOpeningElement :

  • JSXElementName (JSX attributes are optional)

JSXClosingElement :

  •  JSXElementName (JSX attribute is not available)

JSXFragment :

  • JSXChildrenopt  (JSX children are optional)

JSX removes whitespace at the start and end of a line. It is also ignore blank lines. In new lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space. So these all render to the same thing:

JSX Children

you can provide more JSX elements as the children. it is useful for displaying nested components and mix together different types of children, so you can use string literals together with JSX children. it is different way in which JSX is like HTML, so that this is both valid JSX and valid HTML.

In JSX Booleans, Null, and Undefined Are Ignored

false, null, undefined, and true are correct children. These don’t render. These JSX expressions will all render to the same thing:

JavaScript Expressions as Children:

You need write any JavaScript expression as children, by using enclosing it within {} as like below.


Categories: React

Leave a Reply

2 Comments on "JSX in React"

newest oldest most voted
Notify of

It should be mention where I need start coding on which page like index.js I tried to write code what u have provided in the beginning in index.js but failed

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.