JSX Introduction

By: Stephen Patrick | 18 Aug 2016 | Category: ReactJs Introduction

Related Contents

JSX Introduction

JSX is an extension of JavaScript that provides an XML like syntax that resembles HTML. JSX is used by Reactjs to reduce the amount of code required to create elements. JSX provides a concise syntax, for example compare the two below code snippets.

render: function(){
   return(React.createElement("div", null,
       "Hello World! Components."));
}

Above we create a div element using the Reactjs top level API.

render: function(){
   return <div>Hello World, Components With JSX !</div>;
}

Above we use JSK syntax. If we compare the two approaches we can see that the JSX syntax, is more succinct and provides syntactic sugar on top of the Reactjs API. Another advantage of the JSX syntax is that it makes the code more readable. This becomes more evident when creating a tree of DOM elements.

Using JSX With Reactjs

To use JSX with Reactjs the JSX code must be transformed into its equivalent JavaScript form. There are editors that will do this transformation for you that can aid with development. However, for production code, JSX is not meant to be compiled / transformed at runtime, in this case we need to add a step to our build process, to convert the JSX to it’s equivalent Reactjs code.

Babel provides a JSX command line tool to perform this transformation off-line. More details regarding this can be found here