Why JSX ?

What is JSX ?

JSX stands for JavaScript XML. JSX is basically a syntax extension of JavaScript....

Why JSX ?

It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript. It makes it easier for us to create templates. Instead of separating the markup and logic in separate files, React uses components for this purpose. We will learn about components in detail in further articles. As JSX is an expression, we can use it inside of if statements and for loops, assign it to variables, accept it as arguments, or return it from functions....

Expressions in JSX

In React we are allowed to use normal JavaScript expressions with JSX. To embed any JavaScript expression in a piece of code written in JSX we will have to wrap that expression in curly braces {}. The below example specifies a basic use of JavaScript Expression in React....

Attributes in JSX

...

Specifying attribute values :

...

Wrapping elements or Children 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 the camelcase convention for attributes.&...

Comments in JSX :

...

Converting HTML to JSX

JSX allows us to specify attribute values in two ways:...

Rules to Write JSX

Consider a situation where you want to render multiple tags at a time. To do this we need to wrap all of these tags under a parent tag and then render this parent element to the HTML. All the subtags are called child tags or children of this parent element....