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 elementsconstFooGameFrame=()=>{const[state,dispatch]=useSagaReducer(mainSaga,gameReducer,initialState);constarmy=getDispatchedActions(getActionsLookup(),dispatch);const{game,hero}=state;return(<sectionclassName='portal-root m-2'><MobilFrame><Head><title>Foo Game</title><metaname="viewport"content="initial-scale=1.0, width=device-width"/><linkrel="manifest"href="manifest.json"></link></Head>{game===GameMode.ROLL_CHARACTER&&<CreateHerostate={state}army={army}/>}{game===GameMode.ADVENTURE_ON_MAP&&<SingleAdventurestate={state}army={army}/>}{game===GameMode.BLOG&&<Blogname={hero?.name}avatar={hero?.avatar}/>}</MobilFrame>{game===GameMode.ADVENTURE_ON_MAP&&<CombatZonestate={state}army={army}/>}</section>);};
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.
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...
constnavBar=(<navclassName="bg-yellow"> Home </nav>);
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.
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.
Just another developer trying to get his tests fast, his features to add value and his bloody code to compile! Lately I've been enjoying writing about the best way to release software!
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.
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.
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.
35+ years as a developer: Assembly, C, C++ & C# (in that order) with sidelines in ASP/VBScript, ASP.Net, JavaScript, Perl, VisualBasic, plus a few others.
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
To create a website we use HTML to code a web structure, here in react.js we use JSX to create this web structures like "Headings, Paragraph, Images, etc."
Though we write code that looks like HTML, behind the seen react.js compiles our HTML(JSX version)
eg:
<div><h1>Hello World</h1></div>
to JavaScript code(Which web browser can understand)
JSX is just fancy HTML (With some rules) that compiles to
pureJavaScript. So if you write something like this:It will compile to something like this:
So now you can generate HTML with JavaScript. This is the basic idea behind JSX.
Great example! 👏
👏Welldone
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.
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.
Thank you for posting this! 👍
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...
... gets converted into:
Thank you for sharing!
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.
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.
Nice reply
An abomination
Very informative! 👍
lol
👍
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.
Amazing!
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.
JSX stands for JavaScript XML. It is mostly used with React to describe what the UI should look like.
Love this! 🔥
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.
JSX is a syntax candy created by React
Se denomina JSX a la combinación de HTML y JS para dar lugar a un código mucho mas compacto y elegante.
bien dicho hermano
JSX takes HTML, a simple straightforward way to describe formatted text, and made it verbose, complex and confusing.
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
Certainly!
To create a website we use HTML to code a web structure, here in react.js we use JSX to create this web structures like "Headings, Paragraph, Images, etc."
Though we write code that looks like HTML, behind the seen react.js compiles our HTML(JSX version)
eg:
to JavaScript code(Which web browser can understand)
, and this JavaScript code Help in displaying web structure(Components) in the browser.
Benefits of using React JSX: