JSX JS and HTML

Hello, I’m new to JSX ans JS

I just want to ask if someone can share a really simple example of “hello world” by using JSX, transformed into JS and used in Html, i can’t understand how to use jsx to html.

Thank you

  **Your code so far**

const JSX = (
<div className="myDiv">
  <h1>Add a class to this div</h1>
</div>
);
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36

Challenge: Define an HTML Class in JSX

Link to the challenge:

you dont actually write JSX in the html code, you write JSX in JS. JSX lets you write html code(not literally, but close resemblence) inside JS. JS code(file where code is written) is imported inside the html document. So instead of having to write your page in html and manipulate it via js, you can simply write the whole content in the js file(s) and have more direct and complete control over it.
A h1 element saying hello world in JSX would look like this:

<h1>Hello World</h1>

As you can see there is no difference with html. The difference comes from the fact, when you write it inside JS, there are some words and syntax, which is reserved for JS, so you must use slightly different syntax, to distinguish it. For example the word class is reserved and has a special meaning in JS, so we use className instead.

For things to make more sense, you must see the bigger picture, so for now stick to the lessons and the more you unfold, the better idea you will have what its all about.

Hi,
I really confuse the jsx with js.
Here is my jsx.jsx file

const JSX = (
  <div>
  <h1>Hello World</h1>
  </div>
);

and when i transform it into jsx.js file. It gives me this

"use strict";

var JSX = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Hello World"));

and how im gonna use this in a html file

<html>
<head>
<script type = "text/javascript" src="jsx.js"></script>
</head>
<body>

<script>
....................... ?
</script>

</body>
</html>

Thank you

ive never used a jsx file and i didnt even know such exist. What i do is, i directly write JSX inside my js files. You do know JSX is used to be included in React components? To represent their html content. Here is a simple React component, written in js, including jsx.

const MyHeading=()=>{
  
  return (
    <h2>Hello World</h2>
  )
}

You can see, the React component is simply a js function(i used an arrow function) and it must return an element. We can use JSX to represent the element with html syntax. But to use this element in the html there is lot more stuff to happen. You need to export the element from the file. You need to import it in the App file, mount it on an actual html node(element existing in the html), which is used as an anchor for the React app to be rendered. You also want React to be included in the dependencies, you need an additional compiler which will translate JSX into valid JS…load the JS file into the HTML. Im not even certain how the process actually goes so im describing it chaotically. The main thing is, you need to be aware of a lot more and placing JSX code in html is like the last branch of the tree :slight_smile: and its not a main feature you are given for use, its an utility for react developers.

Its like asking how can you load your table in Excel, but you havent even installed your Windows, or the office packet to begin with.

Thank you Sylvant! i think i found a simple example of jsx which is included in a html, and i think you are right. i have to learn and practice more “window” instead of focusing on “excel” at the begining.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>REACT</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<style>
.textcolor{
	color:red;
}
</style>
</head>
<body>
	<div id="test"></div>
	<script type="text/babel">
	const element = <h1 className="textcolor">Hello, world</h1>;
	ReactDOM.render(element, document.getElementById('test'));
	</script>
</body>
</html>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

JSX isn’t a templating language per se: it’s not really just a way to write HTML. It’s an extension to JavaScript, a way of writing JS code in a different form.

You use a program that can convert it to JavaScript. That program can be told what the JSX should be converted to. This can be anything, but for React, it will be a set of functions that React understands. And in that case, you pass all those functions to the ReactDOM.render function, which runs can run them and produce HTML.

I would suggest you read the React docs on JSX.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.