31:T4d6,{ const doc = md` Babel compiles JSX down to \`React.createElement()\` calls. These two examples are identical: \`\`\`js const element = (

Hello, world!

); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); \`\`\` \`React.createElement()\` performs a few checks to help you write bug-free code but essentially it creates an object like this: \`\`\`js // Note: this structure is simplified const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } }; \`\`\` These objects are called “React elements”. You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date. We will explore rendering React elements to the DOM in the next section. > **Tip:** > > We recommend using the [“Babel” language definition](https://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.`; return hide_display(option8, doc); }32:[] 2f:{"title":"React Main Concepts: hello world and JSX","cells":[{"id":18,"value":"md`# React Main Concepts: hello world and JSX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`## Hello World React \nhttps://reactjs.org/docs/hello-world.html\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof option1 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"{\n const doc = md`\n\\`\\`\\`js\nReactDOM.render(\n

Hello, world!

,\n document.getElementById('root')\n);\n\n\\`\\`\\`\n\n`;\n return hide_display(option1, doc);\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"{\n const root = html`

`;\n \n const display = htm`

Hello, world!

`;\n \n ReactDOM.render(display, root);\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"md `---\n## Introducing JSX\nhttps://reactjs.org/docs/introducing-jsx.html`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"viewof option2 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"{\n const doc = md`\n### Embedding Expression in JSX\nhttps://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx\n\n\\`\\`\\`js\nconst name = 'Josh Perez';\nconst element =

Hello, {name}

;\n\nReactDOM.render(\n element,\n document.getElementById('root')\n);\n\\`\\`\\`\n`;\n return hide_display(option2, doc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"{\n const root = html`

`;\n \n const name = \"深度碎片\";\n \n const elementDisplay = htm`

Hello, ${name}

`;\n \n ReactDOM.render(elementDisplay, root);\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"viewof option3 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"{\n const doc = md`\n### Embedding the result of a function in JSX\n\n\\`\\`\\`js\nfunction formatName(user) {\n return user.firstName + ' ' + user.lastName;\n}\n\nconst user = {\n firstName: 'Harper',\n lastName: 'Perez'\n};\n\nconst element = (\n

\n Hello, {formatName(user)}!\n

\n);\n\nReactDOM.render(\n element,\n document.getElementById('root')\n);\n\\`\\`\\`\n`;\n return hide_display(option3, doc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"{\n const root = html`

`;\n \n function formatName(user) {\n return user.firstName + ' ' + user.lastName;\n }\n\n const user = {\n firstName: 'Daniel',\n lastName: '深度碎片'\n };\n\n const element = htm`\n

\n Hello, ${formatName(user)}!\n

\n `;\n\n ReactDOM.render(\n element,\n root\n );\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`\n### JSX is an Expression Too\nhttps://reactjs.org/docs/introducing-jsx.html#jsx-is-an-expression-too\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"viewof option4 = DOM.select(none_doc)","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"{\n const doc = md`\nAfter compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.\n\nThis means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:\n\n\\`\\`\\`js\nfunction getGreeting(user) {\n if (user) {\n return

Hello, {formatName(user)}!

;\n }\n return

Hello, Stranger.

;\n}\n\\`\\`\\`\n\n`;\n return hide_display(option4, doc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"{\n const root = html`

`;\n \n function formatName(user) {\n return user.firstName + ' ' + user.lastName;\n }\n \n function getGreeting(user) {\n if (user) {\n return htm`

Hello, ${formatName(user)}!

`;\n }\n return htm`

Hello, Stranger.

`;\n }\n\n const user = {\n firstName: 'Daniel',\n lastName: '深度碎片'\n };\n\n // const element = htm`\n //

\n // Hello, ${formatName(user)}!\n //

\n // `;\n const element = getGreeting(user);\n\n ReactDOM.render(\n element,\n root\n );\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`### Specifying Attributes with JSX\nhttps://reactjs.org/docs/introducing-jsx.html#specifying-attributes-with-jsx\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"viewof option5 = DOM.select(none_doc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"{\n const doc = md`\n\n\nYou may use quotes to specify string literals as attributes:\n\n\\`\\`\\`js\nconst element =

;\n\\`\\`\\`\n\nYou may also use curly braces to embed a JavaScript expression in an attribute:\n\n\\`\\`\\`js\nconst element =

;\n\\`\\`\\`\n\nDon’t put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.\n\n> **Warning:**\n>\n> Since JSX is closer to JavaScript than to HTML, React DOM uses \\`camelCase\\` property naming convention instead of HTML attribute names.\n>\n> For example, \\`class\\` becomes [\\`className\\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) in JSX, and \\`tabindex\\` becomes [\\`tabIndex\\`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex).\n`;\n return hide_display(option5, doc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"{\n const root = html`

`;\n \n function formatName(user) {\n return user.firstName + ' ' + user.lastName;\n }\n \n function getGreeting(user) {\n if (user) {\n return htm`\n

Hello, ${formatName(user)}!

\n`; // add a focus on h1, and add src and width to an image\n }\n return htm`

Hello, Stranger.

`;\n }\n\n const user = {\n firstName: 'Daniel',\n lastName: '深度碎片',\n avatarUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576175657854&di=afd4fa75732860dcb8edec256957c4da&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201605%2F19%2F20160519221924_RuxQZ.thumb.700_0.jpeg'\n };\n\n const element = getGreeting(user);\n\n ReactDOM.render(\n element,\n root\n );\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`### Specifying Children with JSX\nhttps://reactjs.org/docs/introducing-jsx.html#specifying-children-with-jsx\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"viewof option6 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"{\n const doc = md`\n\n\nIf a tag is empty, you may close it immediately with \\`/>\\`, like XML:\n\n\\`\\`\\`js\nconst element =

;\n\\`\\`\\`\n\nJSX tags may contain children:\n\n\\`\\`\\`js\nconst element = (\n

Hello!

Good to see you here.

\n);\n\\`\\`\\`\n`;\n return hide_display(option6, doc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"{\n const root = html`

`;\n \n function formatName(user) {\n return user.firstName + ' ' + user.lastName;\n }\n \n function getGreeting(user) {\n if (user) {\n return htm`\n

Hello, ${formatName(user)}!

\n`; // add a focus on h1, and add src and width to an image\n }\n return htm`

Hello, Stranger.

`;\n }\n\n const user = {\n firstName: 'Daniel',\n lastName: '深度碎片',\n avatarUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576175657854&di=afd4fa75732860dcb8edec256957c4da&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201605%2F19%2F20160519221924_RuxQZ.thumb.700_0.jpeg'\n };\n\n const element = getGreeting(user);\n\n ReactDOM.render(\n element,\n root\n );\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`### JSX Prevents Injection Attacks\nhttps://reactjs.org/docs/introducing-jsx.html#jsx-prevents-injection-attacks\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"viewof option7 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"{\n const doc = md`\n\n\nIt is safe to embed user input in JSX:\n\n\\`\\`\\`js\nconst title = response.potentiallyMaliciousInput;\n// This is safe:\nconst element =

{title}

;\n\\`\\`\\`\n\nBy default, React DOM [escapes](https://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.\n`;\n return hide_display(option7, doc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"md `### JSX Represents Objects\nhttps://reactjs.org/docs/introducing-jsx.html#jsx-represents-objects\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"viewof option8 = DOM.select(none_doc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"{\n const root = html`

`;\n \n const element1 = htm`\n

\n Hello, world!\n

\n `;\n \n const element2 = React.createElement(\n 'h1',\n {className: 'greeting'},\n 'Hello, world!'\n );\n \n const display = htm`\n

\n ${element1}\n ${element2}\n

\n `\n \n ReactDOM.render(display, root);\n return root\n \n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"import { React, ReactDOM, htm, none_doc, hide_display } from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}