Chapter 3. ReactJS-JSX

In the previous chapter, we went through the process of building responsive themes with the help of React-Bootstrap and React. We saw examples for it and the difference between Twitter Bootstrap and React-Bootstrap.

I'm very excited now as we are going to look into the core of ReactJS, which is JSX. So, are you ready folks? Let's dive deep into learning about ReactJS-JSX.

What is JSX in React

JSX is an extension of JavaScript syntax, and if you observe the syntax or structure of JSX, you will find it similar to XML coding.

With JSX, you can carry out preprocessor footsteps that add XML syntax to JavaScript. Though you can certainly use React without JSX, JSX makes React a lot more neat and elegant. Similar to XML, JSX tags have tag names, attributes, and children, and in that, if an attribute value is enclosed in quotes, that value becomes a string.

XML works with balanced opening and closing tags. JSX works similarly, and it also helps to read and understand a huge amount of structures easily than JavaScript functions and objects.

Advantages of using JSX in React

Here is a list of a few advantages:

  • JSX is very simple to understand and think about, as compared to JavaScript functions
  • Markup of JSX would be more familiar to non-programmers
  • By using JSX, your markup becomes more semantic, organized, and significant

How to make your code neat and clean

As I said earlier, the structure/syntax is so easy to visualize/notice, which is intended for more clean and understandable code in JSX format when we compare it with JavaScript syntax.

The following are simple code snippets that will give you a clear idea. Let's see the code snippets in the following example of JavaScript syntax while rendering:

render: function () {
    return React.DOM.div({className:"divider"},
        "Label Text",
        React.DOM.hr()
    );
}

Observe the following JSX syntax:

render: function () { 
    return <div className="divider"> 
    Label Text<hr /> 
</div>; 
}

I'm assuming that it is clear now that JSX is really easy to understand for programmers who are generally not used to dealing with coding, and they can learn and execute it as if they are executing HTML language.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset