Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.<\/p>\n
For example, we can create an App component that renders Welcome many times:<\/p>\n
function Welcome(props) {<\/p>\n
return <h1>Hello, {props.name}<\/h1>;<\/p>\n
}<\/p>\n
function App() {<\/p>\n
return (<\/p>\n
<div><\/p>\n
<Welcome name=”Sara” \/><\/p>\n
<Welcome name=”Cahal” \/><\/p>\n
<Welcome name=”Edite” \/><\/p>\n
<\/div><\/p>\n
);<\/p>\n
}<\/p>\n
ReactDOM.render(<\/p>\n
<App \/>,<\/p>\n
document.getElementById(‘root’)<\/p>\n
);<\/p>\n
Typically, new React apps have a single App component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like Button and gradually work your way to the top of the view hierarchy.<\/p>\n","protected":false},"excerpt":{"rendered":"
Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components. For example, we can create an App component that renders Welcome many times: function Welcome(props)…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8528],"tags":[8556],"class_list":["post-73428","page","type-page","status-publish","hentry","category-reactjs","tag-composing-components"],"acf":[],"yoast_head":"\n