What is JSX and How JSX works????

We can’t talk about React without first explaining JSX. You met your first React component, the App component defined in the default application built by

create-react-app .

This looks like HTML, but it’s not really HTML. It’s a little different. And it’s a bit strange to have this code inside a JavaScript file. This does not look like JavaScript at all!

JSX tells the template compiler how to build an in-memory virtual dom tree Render function() creates virtual DOM tree of reactElements.

when SetState function is called, It compares the two memory exist in the memory and do the changes. It finds the minimum no. of operations needed to do the changes

Using keys helps react just adding that particular child

React dom & JSX

Let’s look at the index.html:-

Notice we have inserted html in JS.

JSX is javascript redition in html that’s why we import react..that’s where we are getting JSX comes from.

It cannot render two JSX elements side by side

Wrap it in a div and it will work fine

React gives us this interface for one reason: it’s easier to build UI interfaces using JSX.

In a React component you can import other React components, and you can embed them and display them. A React component is usually created in its own file, because that’s how we can easily reuse it (by importing it) in other components. But a React component can also be created in the same file of another component,

Embedding JavaScript in JSX:-

One of the best features of React is that we can easily embed JavaScript into JSX. Other frontend frameworks, for example Angular and Vue, have their own specific ways to print JavaScript values in the template, or perform things like loops. React is not adding new things. Instead, it lets us use JavaScript in the JSX, by using curly brackets. The first example of this that I will show you comes directly from the App component we studied so far. We import the logo SVG file using

import logo from ‘./logo.svg’

and then in the JSX we assign this SVG file to the src attribute of an img tag:

<img src={logo} class=”App-logo” alt=”logo” />

Let’s do another example. Suppose the App component has a variable called message :

function App() {

const message = ‘Hello!’

//…

}

We can print this value in the JSX by adding {message} anywhere in the JSX. Inside the curly brackets { } we can add any JavaScript statement, but just one statement for every curly bracket block. And the statement must return something. For example this is a common statement you will find in JSX. We have a ternary operator where we define a condition ( message === ‘Hello!’ ), and we print one value if the condition is true, or another value (the content of message in this case) if the condition is false:

Restrictions:- You can’t use class but use className to add CSS class because class is a keyword in JavaScript.

In fact, the naming convention for all HTML attributes and event references in JSX become camelCase. For example, a click event in JSX is onClick, instead of onclick. Likewise, onchange becomes onChange. While this is a subtle difference, it is an important one to keep in mind moving forward.

React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript. This has several benefits. It lets you use the full programmatic power of JavaScript within HTML, and helps to keep your code readable. For the most part, JSX is similar to the HTML that you have already learned, however there are a few key differences that will be covered throughout these challenges.

For instance, because JSX is a syntactic extension of JavaScript, you can actually write JavaScript directly within JSX. To do this, you simply include the code you want to be treated as JavaScript within curly braces:

{ ‘this is treated as JavaScript code’ }

Valid JSX:

<div>
  <p>Paragraph One</p>
  <p>Paragraph Two</p>
  <p>Paragraph Three</p>
</div>

Invalid JSX:

<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>

Add Comments in JSX

JSX is a syntax that gets compiled into valid JavaScript. Sometimes, for readability, you might need to add comments to your code. Like most programming languages, JSX has its own way to do this.

To put comments inside JSX, you use the syntax {/* */} to wrap around the comment text.

Learn About Self-Closing JSX Tags

Another important way in which JSX differs from HTML is in the idea of the self-closing tag.

In HTML, almost all tags have both an opening and closing tag: <div></div>; the closing tag always has a forward slash before the tag name that you are closing. However, there are special instances in HTML called “self-closing tags”, or tags that don’t require both an opening and closing tag before another tag can start.

For example the line-break tag can be written as <br> or as <br />, but should never be written as <br></br>, since it doesn't contain any content.

In JSX, the rules are a little different. Any JSX element can be written with a self-closing tag, and every element must be closed. The line-break tag, for example, must always be written as <br /> in order to be valid JSX that can be transpiled. A <div>, on the other hand, can be written as <div /> or <div></div>. The difference is that in the first syntax version there is no way to include anything in the <div />.