{"id":73424,"date":"2020-01-15T17:44:59","date_gmt":"2020-01-15T12:14:59","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=73424"},"modified":"2024-04-12T14:23:12","modified_gmt":"2024-04-12T08:53:12","slug":"rendering-a-component","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/rendering-a-component\/","title":{"rendered":"Rendering a Component"},"content":{"rendered":"

Previously, we only encountered React elements that represent DOM tags:<\/p>\n

const element = <div \/>;<\/p>\n

However, elements can also represent user-defined components:<\/p>\n

const element = <Welcome name=”Sara” \/>;<\/p>\n

When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object \u201cprops\u201d.<\/p>\n

For example, this code renders \u201cHello, Sara\u201d on the page:<\/p>\n

function Welcome(props) {<\/p>\n

return <h1>Hello, {props.name}<\/h1>;<\/p>\n

}<\/p>\n

const element = <Welcome name=”Sara” \/>;<\/p>\n

ReactDOM.render(<\/p>\n

element,<\/p>\n

document.getElementById(‘root’)<\/p>\n

);<\/p>\n

Let\u2019s recap what happens in this example:<\/p>\n