31:T65c,{ const doc = md` Previously, we only encountered React elements that represent DOM tags: \`\`\`js const element =

; \`\`\` However, elements can also represent user-defined components: \`\`\`js const element = ; \`\`\` 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 “props”. For example, this code renders “Hello, Sara” on the page: \`\`\`js function Welcome(props) { return

Hello, {props.name}

; } const element = ; ReactDOM.render( element, document.getElementById('root') ); \`\`\` [**Try it on CodePen**](https://reactjs.org/redirect-to-codepen/components-and-props/rendering-a-component) Let’s recap what happens in this example: 1. We call \`ReactDOM.render()\` with the \` \` element. 2. React calls the \`Welcome\` component with \`{name: 'Sara'}\` as the props. 3. Our \`Welcome\` component returns a \`Hello, Sara\` element as the result. 4. React DOM efficiently updates the DOM to match \`Hello, Sara\`. > **Note:** Always start component names with a capital letter. > > React treats components starting with lowercase letters as DOM tags. For example, \`

\` represents an HTML div tag, but \`\` represents a component and requires \`Welcome\` to be in scope. > > To learn more about the reasoning behind this convention, please read [JSX In Depth](https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized). `; return hide_display(option3, doc); } 32:T414,{ const doc = md` 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: \`\`\`js function Welcome(props) { return

Hello, {props.name}

; } function App() { return (

); } ReactDOM.render( , document.getElementById('root') ); \`\`\` [**Try it on CodePen**](https://reactjs.org/redirect-to-codepen/components-and-props/composing-components) 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.`; return hide_display(option4, doc); }33:Tc77,{ const doc = md` Don’t be afraid to split components into smaller components. For example, consider this \`Comment\` component: \`\`\`js function Comment(props) { return (

{props.author.name}

{props.text}

{formatDate(props.date)}

); } \`\`\` [**Try it on CodePen**](https://reactjs.org/redirect-to-codepen/components-and-props/extracting-components) It accepts \`author\` (an object), \`text\` (a string), and \`date\` (a date) as props, and describes a comment on a social media website. This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let’s extract a few components from it. First, we will extract \`Avatar\`: \`\`\`js function Avatar(props) { return ( {props.user.name}

); } \`\`\` The \`Avatar\` doesn’t need to know that it is being rendered inside a \`Comment\`. This is why we have given its prop a more generic name: \`user\` rather than \`author\`. We recommend naming props from the component’s own point of view rather than the context in which it is being used. We can now simplify \`Comment\` a tiny bit: \`\`\`js function Comment(props) { return (

{props.author.name}

{props.text}

{formatDate(props.date)}

); } \`\`\` Next, we will extract a \`UserInfo\` component that renders an \`Avatar\` next to the user’s name: \`\`\`js function UserInfo(props) { return (

{props.user.name}

); } \`\`\` This lets us simplify \`Comment\` even further: \`\`\`js function Comment(props) { return (

{props.text}

{formatDate(props.date)}

); } \`\`\` [**Try it on CodePen**](https://reactjs.org/redirect-to-codepen/components-and-props/extracting-components-continued) Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (\`Button\`, \`Panel\`, \`Avatar\`), or is complex enough on its own (\`App\`, \`FeedStory\`, \`Comment\`), it is a good candidate to be a reusable component. `; return hide_display(option5, doc); }34:T474,{ const root = html`

`; function Comment(props) { return htm`

${props.author.name}

${props.text}

${props.date}

`; } const args = { author: { avatarUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576322534005&di=936c748c2c002016040e161504f92ec4&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Fcrop.0.48.1059.595.1000%2F6ed8a358gy1fe5r3oy6r0j20tf0jqtak.jpg", name: "google" }, text: "do no evil", date: "2007" } const element = htm`<${Comment} author=${args.author} text=${args.text} date=${args.date} />`// must not forget /> // note the multiple props ReactDOM.render(element, root); return root; }35:T635,{ const root = html`

`; const args = { author: { avatarUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576322534005&di=936c748c2c002016040e161504f92ec4&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Fcrop.0.48.1059.595.1000%2F6ed8a358gy1fe5r3oy6r0j20tf0jqtak.jpg", name: "google" }, text: "do no evil", date: "2007" } function CommentImg(props) { return htm`

` } function CommentUserInfo(props) { return htm`

${props.author.name}

`; } function CommentText(props) { return htm`

${props.text}

`; } function CommentDate(props) { return htm`

${props.date}

`; } function Comment(props) { return htm`

<${CommentImg} author=${args.author} /> <${CommentUserInfo} author=${args.author} />

<${CommentText} text=${args.text} /> <${CommentDate} date=${args.date} />

`; } const element = htm`<${Comment} author=${args.author} text=${args.text} date=${args.date} />`// must not forget /> // note the multiple props ReactDOM.render(element, root); return root; }36:T48b,{ const doc = md` Whether you declare a component [as a function or a class](https://reactjs.org/docs/components-and-props.html#function-and-class-components), it must never modify its own props. Consider this \`sum\` function: \`\`\`js function sum(a, b) { return a + b; } \`\`\` Such functions are called [“pure”](https://en.wikipedia.org/wiki/Pure_function) because they do not attempt to change their inputs, and always return the same result for the same inputs. In contrast, this function is impure because it changes its own input: \`\`\`js function withdraw(account, amount) { account.total -= amount; } \`\`\` React is pretty flexible but it has a single strict rule: **All React components must act like pure functions with respect to their props.** Of course, application UIs are dynamic and change over time. In the [next section](https://reactjs.org/docs/state-and-lifecycle.html), we will introduce a new concept of “state”. State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.`; return hide_display(option7, doc); }37:[] 2f:{"title":"Components and Props","cells":[{"id":0,"value":"md`# Components and Props`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof option1 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"{ \n const doc = md`\n\nComponents let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a [detailed component API reference here](https://reactjs.org/docs/react-component.html).\n\nConceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.`;\n return hide_display(option1, doc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`## Function and Class Components\nhttps://reactjs.org/docs/components-and-props.html#function-and-class-components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"viewof option2 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"{\n const doc = md`\n\nThe simplest way to define a component is to write a JavaScript function:\n\n\\`\\`\\`js\nfunction Welcome(props) {\n return

Hello, {props.name}

;\n}\n\\`\\`\\`\n\nThis function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.\n\nYou can also use an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) to define a component:\n\n\\`\\`\\`js\nclass Welcome extends React.Component {\n render() {\n return

Hello, {this.props.name}

;\n }\n}\n\\`\\`\\`\n\nThe above two components are equivalent from React’s point of view.\n\nClasses have some additional features that we will discuss in the [next sections](https://reactjs.org/docs/state-and-lifecycle.html). Until then, we will use function components for their conciseness.\n `;\n return hide_display(option2, doc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"{\n const root = html`

`;\n \n function Welcome(props) { // props as func inputs\n return htm`

Hello, ${props.name}

`; // element as function output\n }\n \n const element = htm`<${Welcome} name=\"深度碎片\" />`;\n \n ReactDOM.render(element, root);\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"{\n const root = html`

`;\n \n class Welcome extends React.Component { // use class instead of function\n render() {\n return htm`

Hello, ${this.props.name}

`; // ${} \n }\n }\n \n const element = htm`<${Welcome} name=\"深度碎片\" />`; // ${}\n \n ReactDOM.render(element, root);\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`## Rendering a Component\n\nhttps://reactjs.org/docs/components-and-props.html#rendering-a-component`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof option3 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"{\n const root = html`

`;\n \n function Welcome(props) {\n return htm`

Hello, ${props.name}

`;\n }\n\n const element = htm`<${Welcome} name=\"Daniel\" />`; // make sure custom tag starts with Capital letter\n ReactDOM.render(\n element,\n root\n );\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`## Composing Components\nhttps://reactjs.org/docs/components-and-props.html#composing-components\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"viewof option4 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"{\n const root = html`

`;\n \n function Welcome(props) { // why function? => for passing props\n return htm`

Hello, ${props.name}

`;\n }\n\n function App() { // no props here\n return htm`\n

\n <${Welcome} name=\"Sara\" />\n <${Welcome} name=\"Cahal\" />\n <${Welcome} name=\"Edite\" />\n

\n `;\n }\n \n const element = htm`<${App} />`; // assignment provides no props\n\n ReactDOM.render(\n element,\n root\n );\n\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`## Extracting Components\nhttps://reactjs.org/docs/components-and-props.html#extracting-components\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"viewof option5 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`## Props are Read-Only\nhttps://reactjs.org/docs/components-and-props.html#props-are-read-only\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"viewof option7 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`---\n## Utils\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { React, ReactDOM, htm, none_doc, hide_display } from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}