Scribd
Upload
26 views9 pages

6 - JSX

JSX allows us to write HTML elements in JavaScript and place them in the DOM without createElement() and appendChild() methods. It converts HTML tags into React elements. JSX must wrap HTML in a single parent element, properly close all elements, use className instead of class, and put conditional statements outside JSX or use ternary expressions.

Uploaded by

itprabhu.automation
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
26 views9 pages

6 - JSX

JSX allows us to write HTML elements in JavaScript and place them in the DOM without createElement() and appendChild() methods. It converts HTML tags into React elements. JSX must wrap HTML in a single parent element, properly close all elements, use className instead of class, and put conditional statements outside JSX or use ternary expressions.

Uploaded by

itprabhu.automation
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 9

PART-6

WHAT IS JSX ?
WHY WE USE JSX IN
REACT APP ? REACT
PRESENTER: MOHAMMAD ADIL
function Show()
{
document.write(“<h1> Hey Wassup </h1>”);
}

function Show1() function Show2()


{ {
var a = 10; return JSX
var b = 20; <div>
var c = a + b; <h1> Hey Wassup </h1>
return c; <h1> Hey Wassup </h1>
} </div>
}
What is JSX? REACT

• JSX stands for JavaScript XML.


• JSX is an extension of JavaScript Language.
• JSX allows us to write HTML in React.
• JSX makes it easier to write and add HTML in React.
Working With JSX In React REACT

• JSX allows us to write HTML elements in JavaScript and place them


in the DOM without any createElement() and/or appendChild()
methods.
• JSX converts HTML tags into react elements.
• You are not required to use JSX, but JSX makes it easier to write React
applications.
• JSX is an extension of the JavaScript language based on ES6, and is
translated into regular JavaScript at runtime
Expressions in JSX REACT

• With JSX you can write expressions inside curly braces { }.


• The expression can be a React variable, or property, or object or any
other valid JavaScript expression. JSX will execute the expression and
return the result.
One Top Level Element REACT

• The HTML code must be wrapped in ONE top level element.


• So if you like to write two paragraphs, you must put them inside a
parent element, like a “div” element.
• JSX will throw an error if the HTML is not correct, or if the HTML
misses a parent element.
• Alternatively, you can use a "fragment" to wrap multiple lines. This
will prevent unnecessarily adding extra nodes to the DOM.
• A fragment looks like an empty HTML tag: <> </>
Elements Must be Closed REACT

• JSX follows XML rules, and therefore HTML elements must be


properly closed.
• Close empty elements with />
• JSX will throw an error if the HTML is not properly closed.
Attribute class = className REACT

• The class attribute is a much used attribute in HTML, but since JSX
is rendered as JavaScript, and the class keyword is a reserved word
in JavaScript, you are not allowed to use it in JSX.
• Use attribute className instead.
• JSX solved this by using className instead. When JSX is rendered, it
translates className attributes into class attributes.
• For attribute is replace with htmlFor.
Conditions - if statements REACT

• React supports if statements, but not inside JSX.


• To be able to use conditional statements in JSX, you should put the if
statements outside of the JSX, or you could use a ternary expression
instead.
• Use ternary expressions instead.

You might also like