Very few developers who are dealing with webpack module bundler know about splitting your application code into several files of JavaScript:

require.ensure([],()=>{ 
    const Profile = require('./Profile.js') 
    this.setState({ 
        currentComponent: Profile 
    }) 
}) 

Why this splitting of code is necessary is because each chunk of code is not always useful to each user and it's not necessary to load it on each page; it will overburden the browser. Therefore, to avoid such a situation, we should split our application into several chunks.

Now, you may have the following question: If we have more chunks of code then will we have to have more HTTP requests, which will also affect performance? With the help of HTTP/2 multiplexed  (https://http2.github.io/faq/#why-is-http2-multiplexed), your problem will be resolved. Observe the following diagram:

Visit http://stackoverflow.com/questions/10480122/difference-between-http-pipeling-and-http-multiplexing-with-spdy  for more information.

You can also combine your chunked code with chunk hashing, which will also optimize your browser cache ratio whenever you change your code.

JSX is, in simple words, just an extension of JavaScript syntax. And if you observe the syntax or structure of JSX, you will find it to be similar to XML coding.

JSX performs preprocessor footsteps that add XML syntax to JavaScript. You can certainly use React without JSX but JSX makes React a lot more neat and elegant. Similar to XML, JSX tags have tag names, attributes, and children. JSX is also similar to XML 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 helps make large trees which are easier to read than function calls or object literals.

The advantages of using JSX in React are:

As I said, the structure and syntax are so easy to visualize and notice in JSX. They are intended to be more clear and readable in JSX format compared to JavaScript.

The following simple code snippets will give you a clearer idea. Let's see a plain JavaScript render syntax:

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

Lets look at the following JSX syntax:

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

Hopefully, it's very clear to you that it is much easier for non-programmers already familiar with HTML to work with JSX than with JavaScript.

In the development region, there are many teams such as non-developers, UI developers, and UX designers who are acquainted with HTML, and quality assurance teams who are responsible for thoroughly testing the product.

JSX is a great way to clearly comprehend this structure in a solid and concise way.

Until now, we have seen how JSX syntax is easy to understand and visualize. Behind this there is a big reason for having a semantic syntax structure.

JSX easily converts your JavaScript code into a more semantic, meaningful, and structured mark-up. This gives you the benefit of declaring your component structure and information using an HTML-like syntax, knowing it will transform into simple JavaScript functions.

React outlines all the HTML elements you would expect in the React.DOM namespace. The good part is that it also allows you to use your own written, custom components within the mark-up.

Please check out the following HTML simple mark-up and see how the JSX component helps you have a semantic mark-up:

<div className="divider"> 
    <h2>Questions</h2><hr /> 
</div>

After wrapping this in a divider React composite component, you can use it like you would use any other HTML element with ease, and with the added benefit of a mark-up with better semantics:

<Divider> Questions </Divider> 

Observe the following code snippet:

classHelloMessage extends React.Component{
    render(){ 
        return<div>Hello {this.props.name}</div> 
    } 
}

You may have observed that in the preceding code, the React.Component is being used in place of creatClass. There is nothing problematic if you use either of these, but many developers do not have a clear understanding about this and they mistakenly use both.

Knowledge of properties is a must; it will give you more flexibility to extend your component and save you time. Please refer to the following code snippet:

MyComponent.propTypes={ 
    isLoading:PropTypes.bool.isRequired, 
    items:ImmutablePropTypes.listOf( 
        ImmutablePropTypes.contains({ 
            name:PropTypes.string.isRequired, 
        }) 
    ).isRequired 
} 

You can also validate your properties, the way we can validate properties for Immutable.js with React ImmutablePropTypes.

Observe the following code snippet:

PassData({ foo:'bar'})(MyComponent) 

Higher-order components are just extended versions of your original component.

The main benefit of using them is that we can use them in multiple situations, for example in authentication or login validation:

requireAuth({ role: 'admin' })(MyComponent)  

The other benefit is that, with higher-order components, you can fetch data separately and set your logic to have your views in a simple way.

Compared to other frameworks, the Redux architecture has more plus points:

From the aforementioned points, it's very clear that the Redux architecture is very powerful and it has reusability as well.