DEV Community


Posted on

What exactly is JSX?

I just started learning React. Oddly, it took a while to wrap my head around JSX and where it fits in the programming terminology I've been studying over the past few weeks.

JSX seems to be one of those things that experienced developers get, but can't explain struggle to explain to others. But for us newbies for whom everything in programming is completely new, I hope this short post will provide some clarity.

The short version:

JSX is an XML-like syntax extension of JavaScript.

In English:

JSX is essentially a way to write HTML code in your JavaScript file. This makes it easy to create React elements (or components

Where that fits:

React is a JavaScript library for creating user interfaces quickly. React is built completely out of JavaScript code. It creates small sections of reusable code, called components.

This lets you split the completed user interface into independent, reusable pieces, that are each saved in their own .js file.

What it looks like:

  • Each .js file in your React app will have a render() method that returns one JSX element
class randomComponent extends ReactComponent {

  render() {

    return (
      <div> </div>
export default randomComponent 
Enter fullscreen mode Exit fullscreen mode

Meanwhile your App.js file will include something like this:

class App extends React.Component {


    <div className="App">
Enter fullscreen mode Exit fullscreen mode

Fortunately has a React great tutorial that covers the JSX syntax. Check it out!

Discussion (2)

nickytonline profile image
Nick Taylor (he/him)

@_developit , the creator of Preact has an old but still good post about this, WTF is JSX.

jasterix profile image
Jasterix Author

Nice! I'll check it out