Helitha Rupasinghe

Posted on Sep 20, 2022

Explain JSX like I'm five.

#discuss #explainlikeimfive #javascript #beginners

Oldest comments (28)

Jon Randy 🎖️ • Sep 20 '22

An abomination

Helitha Rupasinghe • Sep 20 '22

Very informative! 👍

Jon Randy 🎖️ • Sep 20 '22

👍

Eduardo Ribeiro • Sep 20 '22

lol

Posandu • Sep 20 '22 • 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>

It will compile to something like this:

React.createElement("div", null, React.createElement("h1", null, "Hello World"));

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

Helitha Rupasinghe • Sep 20 '22

Great example! 👏

code-simple • Mar 5 '23

👏Welldone

AllisonGarner • Sep 20 '22

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

Helitha Rupasinghe • Sep 20 '22

Love this! 🔥

Alex Lohr • Sep 20 '22

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.

Matija Novosel • Sep 20 '22 • 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>);

... gets converted into:

const navBar = React.createElement("nav", { className: "bg-yellow" },  "Home");

Helitha Rupasinghe • Sep 20 '22

Thank you for sharing!

Yosip Mike Colin • Sep 21 '22

Se denomina JSX a la combinación de HTML y JS para dar lugar a un código mucho mas compacto y elegante.

Helitha Rupasinghe • Sep 21 '22

bien dicho hermano

Peter Vivo • Sep 21 '22 • 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>
  );
};