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 (23)

Collapse
posandu profile image
Posandu |πŸ”₯| • Edited on

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 Author

Great example! πŸ‘

Collapse
jfbrennan profile image
Jordan Brennan

If someone offers you JSX, just say no!

Collapse
hr21don profile image
Helitha Rupasinghe Author

Certainly!

Collapse
matijanovosel profile image
Matija Novosel • Edited on

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 Author

Thank you for sharing!

Collapse
pengeszikra profile image
Peter Vivo • Edited on

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
jonrandy profile image
Jon Randy

An abomination

Collapse
hr21don profile image
Helitha Rupasinghe Author

Very informative! πŸ‘

Collapse
hanufu profile image
Eduardo Ribeiro

lol

Collapse
jonrandy profile image
Jon Randy

πŸ‘

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
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 Author

Thank you for posting this! πŸ‘

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 Author

Love this! πŸ”₯

Collapse
icyjoseph profile image
Joseph

JSX is an extension to the JavaScript language, which aims to give a way to fully represent named objects, with their attributes, and their role in a hierarchy, all in one go.

It is not HTML, strictly speaking, but it does carry a lot of similarities, and, perhaps, even creates certain expectations that are not true.

Since JSX just represents an object, we can use that information to do a variety of things, from CLIs, Word Documents, Videos, Web UI, Mobile UI, etc., I for once have used it to make, albeit useless, forward calculation networks, that then I blend with React to render the results to a web UI.

It is pretty cool what one can achieve with JSX syntax.

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
zhouyg profile image
zhou-yg

JSX is a syntax candy created by React

Collapse
yosipmikecolin profile image
Yosip Mike Colin

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

Collapse
hr21don profile image
Helitha Rupasinghe Author

bien dicho hermano

Collapse
jamescurran profile image
James Curran

JSX takes HTML, a simple straightforward way to describe formatted text, and made it verbose, complex and confusing.

Collapse
wudixer profile image
wudixer • Edited on

JSX or TSX (for TypeScript) can be used in pure Javascript/TypeScript. It works perfectly without React.
It eases the creation of dynamic code e.g. filling a table with new rows

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.