DEV Community

loading...

What exactly is JSX?

Jasterix
Passionate about building great technology and connecting with people to create positive change. Happy to answer questions about transitioning to tech. Find me on Twitter @lounecl
・1 min read

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 {

   render(){ 

    return(
    <div className="App">
      <randomComponent></randomComponent>
    </div>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (2)

Collapse
nickytonline profile image
Nick Taylor (he/him)

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

Collapse
jasterix profile image
Jasterix Author

Nice! I'll check it out

Forem Open with the Forem app