×
  • React – The Complete Guide (incl. React Router 4 & Redux)

  • 07 – Understanding JSX

    Lesson List

    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.

    src/App.js
    
    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()

    javascript
    React.createElemet('div', null, 'h1', 'inside H1 tag')
    
    Note: the 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.
    src/App.js
    
    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:

    console tab
    
      ...
      <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 …

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

    Now in console the output will be like:

    console tab
    
      ...
      <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:

    src/App.js
    
    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
    JSX
  • We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept