JSX class vs html class vs CSS class vs JS class

Tell us what’s happening:
Describe your issue in detail here.
Hello, can anyone explain the differences between JSX class vs html class vs CSS class vs JS class.

  **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/91.0.4472.114 Safari/537.36

Challenge: Define an HTML Class in JSX

Link to the challenge:

Classes in HTML, CSS and in JSX syntax are all referring to the same thing

JSX is basically just a way of writing JavaScript functions so that they look like HTML. Because class is an actual (completely different) thing in JavaScript, to avoid any potential issues [edit: specifically with React and for historical reasons] when it’s converted from JSX to JS, it uses the word className instead so it’s unambiguous.

Classes in a programming language are a specific feature. A class is effectively a set of programming instructions detailing how to create a new type of object.

Sorry, I don’t understand your explanation.

What don’t you understand

I’m not quite sure but I’ll give it a try here.

"JSX is basically just a way of writing JavaScript functions so that they look like HTML. "
-I don’t understand what you mean by the above. JSX doesn’t look like HTML to me. I see some HTML in it, but there is a lot of other stuff that doesn’t look anything like HTML. It looks kind of like JS and then I see things that don’t look like JS or HTML.

You stated, “Classes in HTML, CSS and in JSX syntax are all referring to the same thing”
What is this “same thing” that they are referring to? Why would we need CSS, HTML, CSS and JSX (four different things) if there is only one thing?

“Classes in a programming language are a specific feature. A class is effectively a set of programming instructions detailing how to create a new type of object.”
In writing classes in HTML and CSS, what is the “set of instructions” creating the new type of object?

I mean, it looks a lot like HTML: the syntax is exactly the same except you can add arbitrary attributes & put JS values inside curly brackets.

You can’t write an application in CSS, you can’t write styling in HTML, you can’t write programming logic in either, and if you want to use JSX to template things in a React application you can’t use HTML to do that, because you are using JSX.

“same thing” as in a class, like <div class="some-class" />, which you can use CSS to style like .my-class { color: pink; }. Not sure I can really explain this much further without understanding whether you’ve looked at CSS at all? When writing CSS, classes are the primary ways styling is added. You add the class names to the elements in the HTML if you are writing HTML, you add the class names to the components in the JSX if you are writing JSX, you define styling in the CSS.

JSX uses the word className because JSX is written in JavaScript files, and converts to JavaScript, and JavaScript already has a thing called class. So to remove ambiguity the word className is used instead.

HTML and CSS aren’t programming languages, so they don’t create a new object or anything like that, they just do what I described above. HTML is a markup language: a way of adding meaning to bits of text so that a computer program (eg a browser), can be programmed to do certain things when it finds certain tags. CSS is a way of instructing the browser to style those tags in whatever way is defined.

JSX is not a programming language, it’s an extension to JavaScript using the same style of markup as HTML. It’s used so that, in a library like React where the purpose is to render HTML in the browser, you can write code that looks like the end result in your JavaScript files. There are programs that will read files with JSX code in and convert it to JavaScript.

JavaScript is a programming language, so that’s the only thing where class is a way of creating objects.

1 Like

Sorry, I’m more confused than ever now! Other than what’s inside the return statement, this is not HTML:

const ChildComponent = () => {
  return (
    <div>
      <p>I am the child</p>
    </div>
  );
};

Also, other than what’s inside the return statement, the below is not HTML:

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>I am the parent</h1>
       
          <ChildComponent />

       
      </div>
    );
  }
};

This code is taken directly from the React exercises, and it doesn’t state otherwise, so it must be JSX.

What are “arbitrary attributes?”

I don’t really understand the rest of your explanation. To answer your your question, I spent over 50 hours on Codecademy working on HTML and CSS; then I completed the Responsive Web Design and JS Algorithms and Data Structures on FCC. I also took a 16 week 96 hour “Full Stack Web Development” course via CUNY in NYC - it really wasn’t full stack, it was mostly HTML and CSS with some other stuff like Bootstrap, with very little JS and PHP.

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 (’).

I think you have the wrong understanding of what JSX is. In your examples it is exactly the code inside the return statement that is JSX, not the other code. The part that looks like HTML inside JavaScript is JSX.

1 Like

What’s inside the return statement is JSX, that’s what JSX is. Nothing else in there is JSX, it’s just JS, in a JS file.

HTML has specific attributes:

<button type="button">
<input type="email" disabled>

JSX lets you effectively define arbitrary attributes:

<MyButton foo="something" bar="something else">

It is similar to a templating language. It’s very similar to PHP. PHP, originally, was for adding dynamic things to HTML, so you can put programming code in HTML – PHP works on the server instead of in the browser like React + JSX, but the principle is the same.

You asked what the difference is.

JSX is a syntax that looks like HTML that you can use in JS files.

The UI of a web app normally has to be constructed in HTML, because that’s what browsers understand. You can create that HTML using JavaScript, just as you can with PHP or any other language: it’s just text <with> some tags </around it>

React (well, ReactDOM, but for simplification) is a JS library for doing that. With React you can use an extension to JS called JSX that lets you write bits of your JS files in code that looks exactly like HTML.

JavaScript, like many, many other programming languages, has a way of creating objects using classes. So in JavaScript, you can use the keyword class when you write the code for a class.

HTML and CSS are not programming languages but also use something called class, this has nothing to do with JS classes. You add some classes in your HTML, and then in your CSS you refer to those class names when you’re styling things.

JSX is also not a programming language, t is just something you use in JS files. So the authors of React used the property className instead of class to remove ambiguity, so it is obvious it is referring to the HTML/CSS idea of class rather than the JS class

1 Like

@BenGitter - have the “wrong understanding” of what JSX is, because I am taking this info from the exercises, so the exercises are the reason for my wrong understanding. I don’t see anything in the exercises mentioning that JSX is only inside the return statement.

@BenGitter - here is an example of why I might have the wrong understanding -

In the example, we are apparently creating a JSX element - but there is no return statement to be seen anywhere.

According to the creators of React and JSX:

And my understandings has been that:

The practical takeaway is this:
JSX is its own syntax rules; it’s created to look like HTML but isn’t real HTML, and the nuances need to be acknowledged and learned.

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