React JSX vs JS

Tell us what’s happening:
Describe your issue in detail here.
Some example code is provided in explaining this exercise:

class Kitten extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>Hi</h1>
    );
  }
}

Then they state, “This creates an ES6 class Kitten which extends the React.Component class.”

In the first exercise in this course it was stated that to “write JavaScript directly within JSX…you simply include the code you want to be treated as JavaScript within curly braces.”

Since the code above is not wrapped in curly braces, it is not JS, but must be JSX. So how can this be an ES6 class if it is not JS?

  **Your code so far**

class MyComponent extends React.Component {
constructor(props) {
  super(props);
}
render() {
  // Change code below this line
return (
  <div><h1>Hello React!</h1></div>
)


  // Change code above this line
}
};
  **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: Create a React Component

Link to the challenge:

It is JS. The JSX is returned by the render method, that’s where you write JSX. If you want to include JS within JSX, you have to wrap it with curly braces.

Are you saying that the FCC explanation is incorrect - that in JSX we don’t need to wrap JS in curly braces? How do we know what is JS and what is JSX?

No, the explanation is correct.

Everything in your document (it’s a .js file) is JavaScript. Declaring the class MyComponent is JavaScript. Calling the constructor is JavaScript. The only time you write JSX is

  • in the return statement of the .render method of a Class component
  • in the return statement of a Functional component

To switch back to JS within the JSX, you need curly braces. Like this:

const myName = 'Fred';
return (
  <div><h1>Hello {myName}</h1></div>
)

Ok thanks. I don’t quite understand your explanation as I don’t see this explanation anywhere in the exercises. Can you please direct me to where it explains this?

I can’t point to a specific challenge description, I can only highly recommend that you start reading the documentation, React has a particularly excellent one:

In the right panel, you’ll find a list of very beginner-friendly articles about the basic concepts of React. It can’t all be covered by the challenge descriptions, because that would blow them up extremely. At this point in the curriculum, you’re actually expected to do much of the research yourself (it’s usually 20-80% of a developer’s daily work).

Ok thanks. I appreciate the help. The idea that at this point in the curriculum we are expected to do much of the research ourselves does make sense but this is not explained anywhere in the curriculum. I’ve looked at some of the React documentation and it is not making much sense to me but I will continue to try.

The forums are still here to help, but it’s easier to help (and you’ll get better answers) if you can ask more specific questions, not general ones like “difference between class and function component” (because that would require that someone here writes a whole essay). Read a bit, browse through the documentation, search other sources (there’s plenty of great blog articles and YT tutorials out there), and always come back if you don’t understand something.

@jsdisco , I appreciate your suggestion, but most of the time when I ask a question I am not quite sure what to ask - I just know that I am not understanding something, and I am not always sure specifically what I am not understanding. I’ve been doing everything you suggested - reading, browsing through documentation, searching other sources, and watching YouTube tutorials - but the more I read, browse, search and watch, the more confused I become. I am inundated with information, none of which makes much sense to me. I am doing the best I can at this point, and certainly nobody is “required” to answer any of my questions or “write a whole essay.”

Please don’t take this the wrong way, but if you find yourself not certain of what you are not understanding, it may be a sign that you are missing on some important fundamentals.

In such cases my general approach is, when reading some technical descriptions, take note which specific terms I’m having difficulty conceptualise and go back to more basic learning about those terms.

Based on my observation, since you are having difficulty differentiate JSX from regular JS syntax, perhaps go over the JS certificate challenges again? This may sound dauting but sometimes taking a step backwards is the best way to go forward.

I also want to point out that part of learning to program is also to learn how to independently navigate yourself among the sea of technical documentations (you shouldn’t work independently all the time, but you should be able to when the situation requires). Again, if a piece of necessary technical reading makes little sense to you, take note of which terms you don’t understand and go back to more basic learning about them.

Maybe your approach just isn’t working. It looks like you’re trying to understand concepts before you’ve even used them and saw them in action. I’d suggest that you just start writing code in React. It’s so much easier to understand what a render method does if you have used it a few times. You’re trying to get all the theory straight before even starting to practice.

Just write code. You’ll never understand React by only reading about it. It’s a tool, use it. With a little time and experience, everything will fall into place.

@Sharad823 a little step back.
When you hear saying that “React is just JavaScript”, that’s the truth, but how?

As you are seeing it looks familiar but at the same time it isn’t.

Good question, and the answer is that what you see up top, is not what is actually “sent” to the browser.
There is an intermediate step, done under the hood, that pre-process your JS file and convert it to “real” javascript.
The preprocessor is called babel.

For example the class you have above, once compiled becomes:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    // Change code below this line
    return React.createElement("div", null, React.createElement("h1", null, "Hello React!")); // Change code above this line
  }

}

As you can see, the Class stay the same as it is standard JavaScript syntax, what is changing is the return statement as that’s not valid JS:

// clearly not JS
// if it were it would have probably been a string like:
// " <div><h1>Hello React!</h1></div>"
// as JS doesn't really know what a div or h1 are
return (
  <div><h1>Hello React!</h1></div>
)

Babel is configured to get all the JSX and convert it in pure JS:

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

Which as you can see it is regular JS.

If you want to know more have a read at this: Add react to a website and maybe introducing JSX.

Hope this helps. :slight_smile:

@gaac510 , thank you for the feedback. I am absolutely sure I am missing some important fundamentals. When I find a concept I don’t understand, I go and read documentation and review the concept and do some more practice coding…but it’s like going into a worm hole…there are more concepts that I don’t understand, then I go into reading and reviewing those concepts and I find more that I don’t understand. Or maybe I think I am understanding things that I really don’t understand and I am not aware of what those things are.

I do agree that I need to go back and review some fundamentals of JS before proceeding with React. Thanks again for your input.

@jsdisco, I think you are right. I need to try a different approach. In fact I think I need to go back and review and practice coding some JS fundamentals including ES6 (I had a lot of trouble with the ES part of FCC) and then maybe come back to React later. Thanks for your input.

@Marmiz thanks for this, it’s very helpful.

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