React - Render a Class Component to the DOM

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        {/* Change code below this line */}
<Fruits/>
<Vegetables/>
        {/* Change code above this line */}
      </div>
    );
  }
};

// Change code below this line
document.getElementById('challenge-node')

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.124 YaBrowser/22.9.5.710 Yowser/2.5 Safari/537.36

Challenge: React - Render a Class Component to the DOM

Link to the challenge:

Я не понимаю что тут нужно делать
визуализируйте TypesOfFood в DOM. Существует div с id='challenge-node' доступным для вас, чтобы использовать.?

They are saying that there exists, out in the DOM where you will be building this, a div with that id. Normally, in the real world, you would have an index.html file where you would put that. This is in the FCC playground where they are hiding that from you to make it less confusing, you can just focus on the JSX file.

Я понимаю что он есть и что он скрыт,но а как его вывести,я понимаю по своему и это не правильное решения,а другова я не знаю

I’m still not understanding what you are not understanding.

However, for React components, you need to use the same syntax as if you were rendering a nested component, for example ReactDOM.render(<ComponentToRender />, targetNode) .

That is how you gook into that. You have added:

document.getElementById('challenge-node')

That is part of it, that is how you get the targetNode. You give ReactDOM.render the component and the target and then it will render that root component at that target node.

I think that here not everything is explained in detail to beginners objects, components, nodes, I’m already starting to get confused what it is. I always have a lot of questions and sometimes the same ones))

Right, if we explained everything to the fullest level of detail that anyone might possibly be confused by - the course would be 10x as long. You are expected to do little researches when you encounter something you are not sure about. And that’s a good thing - professional developers do it all day - I am constantly looking things up in documentation, Stack Overflow, MDN, etc.

То есть так проходит обучения для новичков это значит что каждый новичок уделяя время каждый день коду,на учиться программировать в любом случае в течения года на пример?

I don’t understand what you are asking.

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