React - Create a Component with Composition

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

Your code so far

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

class ParentComponent extends React.Component {
  constructor(props) {
  render() {
    return (
        <h1>I am the parent</h1>
        { /* Change code below this line */ }

        { /* Change code above this line */ }

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/ Yowser/2.5 Safari/537.36

Challenge: React - Create a Component with Composition

Link to the challenge:

Я не понимаю вопроса что тут нужно сделать?
для чего нужен super() constructor() render()???
что это ?

constructor and super are methods part of the JS class syntax. If you want to know whats happening arround, it would be best to review that concept, otherwise, you can simply learn their use case by heart. To summarize it, constructor is used to defined the props which are passed to your class. super on the other hand is meant to call the parent constructor. The “ParentComponent” in this example, is extending the React.Component, i.e. React.Component would be the parent class of “ParentComponent”. If you are not using the props object, usually it would be fine to omit constructor() and super() calls.
render is method, which is generic to React components. Its called to render the component, to display it on the page. It should return a JSX/html element.
To summ it up:

  • Our Component extends the React Component
  • We call constructor to define the props(so they are accessible within the class methods)
  • We call super in the constructor, so those props pass by the parent properly
  • We need to explicitly define render method on our component, which must return html- like element

а зачем тогда return?
если есть render

return and render are two different things. return is JS keyword, which is used inside functions to quit the function execution and explicitly return a value. That way, if you assign the function call to a variable, it will return that value and not undefined. Example:

function noReturn() {
  1 + 2

console.log(noReturn())  // undefined

function hasReturn() {
  return 1 + 2
  console.log('this line wont be executed')

console.log(hasReturn())  // logs 3

render is a method innate and defined on React class components. Its where you define what your class component would render on the screen. Just like many methods/functions(methods are functions defined on an object), render uses the return keyword, to state what it should return when called. Under the hood React calls the render() method of your component and whatever it returns is rendered on the DOM.

Что то для меня это еще плохо усваивается)

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