Alright, in this article we are going to learn all about JSX, JSX is probably the word you're going to see and hear a lot in the world of reactjs. So it's really important that you understand, what is JSX and why is it used?

Alright let's begin,

JavaScript XML or JSX is an extension to the JavaScript language syntax, with the react library, it's an extension to write XML-like code, for elements and components,  and just like XML, JSX tags have tag names, attributes, and children.


Why do we need JSX, well the truth is JSX is not a necessity to write react applications, you can definitely use react without JSX, but JSX makes, your react code simpler and elegant, as you might have already seen it provides a syntax which is familiar to many developers.

JSX ultimately translates to pure JavaScript, which is understood by the browsers. 

So, we talked about what is JSX and why do we use it. But, how does it work behind the scenes, what does the code look like without JSX.

Let's take a look at that,

let me create a react component using JSX, and without using JSX, so that you not only understand how JSX translates to regular javascript but also appreciate how it brings out simplicity in your code.

now I'm going to start by creating a new file called hello dot J's within the components folder.

this is going to be a simple functional component that renders hello world in the browser, so the first step is always to import react, and the second step is to create the function that returns what appears to be HTML, but in fact, JSX.

Hello.js

import React from 'react'

const Hello = () => {
  return (
    <div id="hello1" className="color1">
      <h1>Hello, World</h1>
    </div>
  )
}

export default Hello

Const hello is equal to an arrow function, empty parentheses and within the curly braces, we are going to return HTML which is in fact JSX, hello world. So a div tag within the div tag and h1 tag, and the text hello world, finally make sure to export it as the default export

Now in App.js I can import the component and include the tag in the render method. so import hello from components slash hello.

import Hello from './components/Hello'

function App() {
  return (
    <div className="App">
      <Hello />

    </div>
  );
}

export default App;

If you save the files and take a look at the browser you should be able to see "hello world" so this is the JSX version of the hello component.

Now, let's rewrite the component without using JSX, to help us to do that, the react library provides a create element method. So within the function, the code now changes to return react.createElement and this method at minimum accept three parameters.

The first parameter is a string that specifies the HTML tag to be rendered, for our example, we need a

div tag to be rendered, so react.createElement with the first parameter a string called div.

In the second parameter, we get to pass any optional properties, in this example, we don't need any additional properties so we can simply pass in a value of null.

The third parameter is the children for the HTML element, that is children for the div tag,  again for our example we simply have the text hello world,  which we will pass as the third parameter.

import React from 'react'

const Hello = () => {

  return React.createElement('div', null, 'Hello, World')
}

export default Hello

If we now take a look at the browser you should be able to see the text hello world, 


But this is slightly different from what we had before, the h1 tag is missing. So let's include that h1 one and a closing h1,  if you now take a look at the browser the output is not what we were looking for. 

Below is the code for your reference and the output how it looks like

import React from 'react'

const Hello = () => {

  return React.createElement('div', null, '<h1>Hello, World</h1>')
}

export default Hello


What we have to do is, call the create element method for the second time, the third parameter now is going to again react.createElement the first parameter is the tag so h1 we have no additional properties so null, and finally the text hello world. If you save this and take a look at the browser, the output is finally what we were looking for hello world an h1 tag 

import React from 'react'

const Hello = () => {

  return React.createElement('div', null,
    React.createElement('h1', null, 'Hello, World'))
}

export default Hello


Now, let's go back and take a look at the second parameter we have been ignoring, the second parameter basically is an object of key-value pairs that will be applied to the element. For example, let's say we need an ID attribute on this div tag, we can specify an object key is an ID , and the value is hello, if you now take a look at the browser and inspect the element you

import React from 'react'

const Hello = () => {

  return React.createElement('div', { id: 'hello1', class: 'color1' },
    React.createElement('h1', null, 'Hello, World'))
}

export default Hello

can see the ID attribute with a value of hello1 similarly let's say we need to add a class to the div tag so within the object class of value color1 class if you take a look at the browser and inspect the element you can see the class attribute is applied. 



But if you take a look at the console, you're going to find a warning invalid Dom property class. Did you mean class name?



In JavaScript class is a reserved word, we did see the class keyword is used to create react components in the last article, so in react a CSS class has to be specified using the className attribute.

So, instead of class, it has to be className camel-cased take a look at the browser there is no warning in the console, and if you inspect the element you can see that we still have the class attribute being applied as color1 class.

import React from 'react'

const Hello = () => {

  return React.createElement('div', { id: 'hello1', className: 'color1' },
    React.createElement('h1', null, 'Hello, World'))
}

export default Hello


We have seen a react component with and without using JSX, and by now it must be clearly evident which is the simpler approach, basically each JSX element is just syntactic sugar for calling react.createElement and that is why you have to import the react library when you use JSX.

if you take a look at Welcom.js, you probably wonder why is react being imported. I don't even notice it being used anywhere but the fact is JSX translates into react.createElement, which in turn uses the react library. Our example just has two elements but imagine a component with ten or a hundred elements, it starts to become really clumsy.  JSX on the other hand will keep the code elegant, simple, and readable.  

 Let understand some of the differences you are going to see in JSX compared to regular HTML.

The first one, which we have already seen is class being replaced by className,

similarly, we also have "for" being replaced by htmlFor 

Again for is a keyword in JavaScript, you are also going to see camel case property naming convention instead of HTML attribute names. For example, on click and tab index will become onClick and tabIndex that is camel casing.

we will see these differences as we progress through the series so don't worry about having to memorize them.


All right, that is pretty much what I wanted to discuss about JSX. Thank you guys for an article and see you guys in the next article