DEV Community

Jasterix
Jasterix

Posted on

2

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 {

   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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (2)

Collapse
 
nickytonline profile image
Nick Taylor

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

Collapse
 
jasterix profile image
Jasterix

Nice! I'll check it out

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up