In the last lesson we have covered the Component structure in which we were returning the HTML elements which is nothing but JSX. So lets Dive deep into it.

JSX

let’s set the previous lesson example the App component in which we were returning the HTML elements i.e.

import React, { Component } from 'react';
import './App.css';
class App extends Component {
  // JSX Content
	render() {
    return (
      <div className="App">
  			{/* Other Component can be nested here  */}
  			<h1>Root Of Application</h1>
  		</div>
    )
	}
}
export default App;

Now let me comment out the JSX syntex in render() method so it will not be used any more and we will return something else, We can use the React Object which we are importing in App.js and will call a method on it createElemet()

React.createElemet('div', null, 'h1', 'inside H1 tag')

import React, { Component } from 'react';
import './App.css';
class App extends Component {
	render() {
      // return (
      //  <div className="App">
      //   <h1>Root Of Application</h1>
      //  </div>
      // )

      /* JSX is converted to Below mention code */
      return React.createElement('div', null, React.createElement('h1', null, 'inside H1 tag'));
	}
}
export default App;

Now in console the output will be like:

  ...
  <div>
    <h1>inside H1 tag</h1>
  </div>
  ...

The CSS class name

In the React html elements we add class by className not by class attribute. will cover that why we use className in next point. Now will see how its converted by JSX.
So in our createElemet() method in second parameter instead of null configuration we will pass an javascript object there we can define class name like …

React.createElemet('div', {className:'App'}, 'h1', 'inside H1 tag');

Now in console the output will be like:

  ...
  <div class="App">
    <h1>inside H1 tag</h1>
  </div>
  ...

JSX Restrictions

Now let’s us point some restrictions we face for example className thing.

className

We cannot use class attribute in the JSX because javascript it self reserve the word(class). In application we already use to create the class this is why we have to use className.
All the HTML elements we are using in the render() method are managed by the React Library. We are not using the real HTML text, React is converting the behind the scene. react finds the attributes in quotation marks we can define on all these elements.

Same Elements

We cant return the same elements for example:

import React, { Component } from 'react';
import './App.css';
class App extends Component {
  // JSX Content
	render() {
    return (
      <div className="App">
  			<h1>Root Of Application</h1>
  		</div>
    <h1>Root Of Application</h1> {/* Cannot add same element twice */}
    )
	}
}
export default App;

Our JSX expression must have one root element. We can actually return adjacent elements and we will see in this course in the end.
it is a typical thing and typical best practice to wrap everything into the one root element per component.

Conclusion

our HTML elements are compiled by JSX and are converted into React.createElemet() by one of the many built tool, we get out of the box in this project. it is the reason why we need to import React even though we are not using it at all. Because behind the scene we will use it once it is compiled.
Of course writing code using React.createElemet() for creating the elements is really cumbersome especially as you add and nest more and more elements.
that’s the reason we don’t use React.createElemet() instead of that, we are using JSX. But it is important to understand the internals and understand what this compiles to.
And also most important of all, we understand that JSX looks like HTML but it isn’t, It is javascript at the end which gets compiled.

React introduction
React Component