DEV Community

Cover image for Explain JSX like I'm five.
Helitha Rupasinghe
Helitha Rupasinghe

Posted on

Explain JSX like I'm five.

Top comments (28)

Collapse
 
posandu profile image
Posandu • Edited

JSX is just fancy HTML (With some rules) that compiles to pure JavaScript. So if you write something like this:

 <div>
    <h1>Hello World</h1>
 </div>
Enter fullscreen mode Exit fullscreen mode

It will compile to something like this:

React.createElement("div", null, React.createElement("h1", null, "Hello World"));
Enter fullscreen mode Exit fullscreen mode

So now you can generate HTML with JavaScript. This is the basic idea behind JSX.

Collapse
 
hr21don profile image
Helitha Rupasinghe

Great example! 👏

Collapse
 
codesimple profile image
code-simple

👏Welldone

Collapse
 
pengeszikra profile image
Peter Vivo • Edited

Fo me JSX is a first selling pont of react (and nextjs). Because I can create any HTML releated stuffs at no time with simple js (ts) function, without need to know any template language syntax. I can use any js controll sequence for put together the view.

JSX also give good abstraction for view declaration.

// nextjs also can declare head elements

const FooGameFrame = () => {
  const [state, dispatch] = useSagaReducer(mainSaga, gameReducer, initialState);
  const army = getDispatchedActions(getActionsLookup(), dispatch);
  const {game, hero} = state;

  return (
    <section className='portal-root m-2'>
      <MobilFrame>
        <Head>
          <title>Foo Game</title>
          <meta name="viewport" content="initial-scale=1.0, width=device-width" />
          <link rel="manifest" href="manifest.json"></link>
        </Head>

        {game === GameMode.ROLL_CHARACTER && <CreateHero state={state} army={army} />}
        {game === GameMode.ADVENTURE_ON_MAP && <SingleAdventure state={state} army={army} />}
        {game === GameMode.BLOG && <Blog name={hero?.name} avatar={hero?.avatar} />}
      </MobilFrame>
      {game === GameMode.ADVENTURE_ON_MAP && <CombatZone state={state} army={army} />}
    </section>
  );
}; 
Enter fullscreen mode Exit fullscreen mode
Collapse
 
andrewbaisden profile image
Andrew Baisden

Some of these answers are too complex for a five year old to understand 😂

My attempt... JSX is like the instructions you get inside a box of lego that shows you how to build stuff. The lego box is your container and the blocks are you being creative and building something with it.

Collapse
 
hr21don profile image
Helitha Rupasinghe

Thank you for posting this! 👍

Collapse
 
matijanovosel profile image
Matija Novosel • Edited

JSX is a combination of HTML and Javascript to put it simply, or as the official React site says: "a syntax extension of Javascript". It offers the functionality of writing Javascript expressions inside HTML elements which is then processed to create the UI.

e.g. this...

const navBar = (<nav className="bg-yellow"> Home </nav>);
Enter fullscreen mode Exit fullscreen mode

... gets converted into:

const navBar = React.createElement("nav", { className: "bg-yellow" },  "Home");
Enter fullscreen mode Exit fullscreen mode
Collapse
 
hr21don profile image
Helitha Rupasinghe

Thank you for sharing!

Collapse
 
lexlohr profile image
Alex Lohr

JS is a language describing logic and interaction. HTML is a language describing content, based on XML, which is meant to describe arbitrary data.

JSX, a shorthand for JS+XML, is these two languages put together into one. In JS, you can use numbers, strings, etc, but HTML code would cause errors. In JSX, HTML Code becomes a valid value that represents the actual HTML.

Collapse
 
jahid6597 profile image
MD. JAHID HOSSAIN

Imagine you're playing with your building blocks. You have different blocks of different colors and shapes, and you can use them to build anything you want.

Now, imagine you want to build a house. You can use your blocks to create the walls, the roof, the door, and the windows.

In the same way, when people want to build a web page, they use HTML to create the different parts of the page, like the headings, paragraphs, images, and links. But sometimes, they also want to add more dynamic and interactive elements, like a button that changes color when you click on it.

That's where JSX comes in. JSX is like a special type of building block that helps people create these dynamic elements. It looks a lot like HTML, but it also allows people to add JavaScript code to create more complex and interactive elements.

So, just like you use your building blocks to create a house, people use HTML and JSX to create web pages with all kinds of different elements that work together to create a fun and interactive experience.

Collapse
 
ben profile image
Ben Halpern

Nice reply

Collapse
 
jonrandy profile image
Jon Randy 🎖️

An abomination

Collapse
 
hr21don profile image
Helitha Rupasinghe

Very informative! 👍

Collapse
 
hanufu profile image
Eduardo Ribeiro

lol

Collapse
 
jonrandy profile image
Jon Randy 🎖️

👍

Collapse
 
dylanwatsonsoftware profile image
Dylan Watson

To a 5 year old? That's tough! Ok here goes:

JSX helps us tell the computer where all parts of a web page should go and what they will look like. It also lets us easily give the computer the information we want to show on the web page.

Collapse
 
hr21don profile image
Helitha Rupasinghe

Amazing!

Collapse
 
codingjlu profile image
codingjlu

JSX allows you to write HTML in JavaScript and is treated as a value, which is then compiled to JavaScript in which a function is called to represent the element specified. This code is usually then used in the browser to create virtual DOMs.

Collapse
 
allisongarner profile image
AllisonGarner

JSX stands for JavaScript XML. It is mostly used with React to describe what the UI should look like.

Collapse
 
hr21don profile image
Helitha Rupasinghe

Love this! 🔥