Reputation: 3
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)
.
UniversityList
was invoked in the code above. How can the React element with type "ul"
get returned by UniversityList
?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
Reputation: 203587
I think a good read of the react docs would help your understanding quite a bit.
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'
), aReact component
type (a class or a function), or aReact fragment
type.
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.
There was no where the function
UniversityList
was invoked in the code above. How can the React element with type"ul"
get returned byUniversityList
?
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 useReact.createElement()
. You will not typically invokeReact.createElement()
directly if you are using JSX. SeeReact Without JSX
to learn more.
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