CODEWITHSUNDEEP
javascriptreactjs
Chad
Chad

Reputation: 3

What does the first argument of ReactDOM.render take?

I am recently learning React on my own, but I find a confusing usage of ReactDOM.render

function UniversityList(){
    return React.createElement(
        "ul",
        {id: "universities"}, 
        React.createElement("li", 
                            {id: "Waterloo", 
                             className: "University"}, 
                            "University of Waterloo"),
        React.createElement("li",
                            {id: "Laurier",
                             className: "University"},
                            "Laurier University"
                           ));
};

ReactDOM.render(React.createElement(UniversityList, null, null),
                document.getElementById("root"));

In the code above, why do we pass the UniversityList, the function string as the first parameter to React.createElement(UniversityList, null, null).

  1. Don't we always pass the type of the html tag we want as the first parameter? (I just started to learn components, but I still do not get the idea)
  2. There was no where the function UniversityList was invoked in the code above. How can the React element with type "ul" get returned by UniversityList?
  3. The function UniversityList was not invoked, but how did the ReactDOM.render successfully rendered the page? The React.createElement(UniversityList, null, null) returned a React object like:
{
    $$typeof: Symbol(react.element)
    key: null
    props: { children: null }
    __proto__: Object
    ref: null
    type: UniversityList()
    _owner: null
    _store: {validated: false}
}

Where are the list items I want to rendered in this React object?

Upvotes: 0

Views: 681

Answers (1)

Drew Reese
Drew Reese

Reputation: 203587

I think a good read of the react docs would help your understanding quite a bit.

React.createElement

React.createElement(
  type,
  [props],
  [...children]
)

Create and return a new React element of the given type. The type argument can be either a tag name string (such as 'div' or 'span'), a React component type (a class or a function), or a React fragment type.

Question 1

Don't we always pass the type of the html tag we want as the first parameter? (I just started to learn components, but I still do not get the idea)

You can specify html elements or other react components.

Question 2

There was no where the function UniversityList was invoked in the code above. How can the React element with type "ul" get returned by UniversityList?

This is typical in react, you don't invoke the functions directly, but instead are passing them off to the React framework to render and handle all the component lifecycle functions, like mounting, updating, and unmounting.

For example, a functional component may be written as such:

const MyComponent = ({ count }) => <div>{count}</div>;

But you won't ever actually invoke the function like MyComponent({ count: 3 }), but rather write it in JSX as <MyComponent count={3} />.

The second text block explains this a bit:

Code written with JSX will be converted to use React.createElement(). You will not typically invoke React.createElement() directly if you are using JSX. See React Without JSX to learn more.

Question 3

The function UniversityList was not invoked, but how did the ReactDOM.render successfully rendered the page?

Same reason as for question 2, the component is passed to the React framework to handle the rendering and lifecycle of it. React.createElement(UniversityList, null, null) creates a new element/component, UniversityList, to render into the DOM, and passes no props nor children. If you look at the UniversityList function definition it passes {id: "universities"} as a prop and creates two li elements as children.

Upvotes: 1

Related Questions