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')
createElemet()
takes three arguments:1: The first one is the element that we want to render to the DOM. This could be a
div
also it can be your own component.2: The second argument is the configuraion, and there we would javascript object, that is optional we can also pass null.
3: The thirs argument is any amount of children and we would have multiple arguments seperated by commas. children means whats nested inside thet perticular
div
.
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.