React JSX in Depth

[MauricioAires]

As we have seen in this article React.js (Introduction and Working), how React works, Breaking down our application into smaller reusable parts which we call components. These components are tree-like HTML or Component structure. In that article, we have seen how to create elements using createElement in react. But if we’ve to work with React’s createElement method just to create elements then it would be fine for demo purposes or for a small app but not for a large application. You just should not use it.

React.createElement is fine to create elements for a small app or for demo purposes but not for a large salable app because it would be very hard to maintain or debug. we’ve to call React.createElement method every time for creation of React element even if it just a span tag with no attributes.

You can build whole application using React.createElement method(which I don’t recommend).

Sometimes new developer get confuses JSX with HTML because they look very familiar. JSX is just another way of creating React elements. The react team created JSX to make it more readable like HTML and XML. So that we don’t have to create React elements manually with the createElement method. let say you want to create a button with class btn, btn-primary.

If we shouldn’t use createElement use JSX. It is JavaScript and XML. It is a JavaScript extension that allows us to define React elements using a tag-based style syntax within our JS code. How cool is that?