2a:null 2b:["$","title",null,{"children":"React.JS Basics | Steve Oney | Observable"}] 30:T70a,md` ## Creating a new React.JS Application Create a new directory for this lecture and once you have, in your terminal, run: \`\`\` npx create-react-app first-react-app \`\`\` Then, open the \`first-react-app\` directory in VS Code. You will notice that \`create-react-app\` already created many files for us, including \`package.json\` and more. Some important files: - \`public/index.html\` - This is the HTML that will serve as the "root" of the page. Note that it is templated (you will see placeholders like \`%PUBLIC_URL%\` that will be filled in during the build process - \`public/manifest.json\` - Some smartphones allow you to add apps to the homescreen. This file specifies information about how your app should be presented [(more information here)](https://developer.mozilla.org/en-US/docs/Web/Manifest) - \`public/robots.txt\` - Tells web crawlers (used by sites like Google to map the web) what they can and can't do on your site (of course not every crawler will necessarily listen). [(more information here)](https://www.robotstxt.org/) - \`src/index.js\` - Adds the React content to our DOM, using [\`ReactDOM.render()\`](https://reactjs.org/docs/react-dom.html#render) - \`src/App.js\` - Referenced by \`index.js\`, contains most of the body of the application right now To start a "development server", run: \`\`\` npm start \`\`\` Then, visit [http://localhost:3000/](http://localhost:3000/) in your browser (though your browser should automatically open as soon as you run \`npm start\`. As you edit files in \`src/\`, the rendered page will update immediately. *Note: to stop the command, type \`CTRL+C\` in your terminal*. To build a deployable application, run: \`\`\` npm run build \`\`\` This will build a deployable application into the \`build/\` directory. `31:T4ed,md` ## JSX: Who put HTML in my JavaScript?! React (optionally) uses a syntactic extension to Javascript that enables you to use an HTML-like syntax directly in your JavaScript files. This is called [JSX](https://reactjs.org/docs/introducing-jsx.html). It's [optional](https://reactjs.org/docs/react-without-jsx.html) but can be very convenient. When we write something like: \`\`\`JavaScript const elem = School of Information; \`\`\` it gets translated to a call to [\`React.createElement()\`](https://reactjs.org/docs/react-api.html#createelement): \`\`\`JavaScript const elem = React.createElement('a', {href: 'https://www.si.umich.edu/'}, 'School of Information'); \`\`\` You could call \`createElement()\` yourself but it can be much more convenient to write the elements directly (particularly when you're working with nested elements). We can insert JavaScript values into our elements using curly braces (\`{}\`): \`\`\`JavaScript const name = "April"; const elem =

{name}'s Homepage

; \`\`\` There are some minor differences. One important difference is that we are supposed to use the \`className\` attribute in JSX instead of \`class\` (because \`class\` is a reserved keyword in JavaScript). `32:T434,md` ## Creating Basic Function Components We can write our own custom components in React and use them as if they were "standard" HTML elements (such as \`\`, \`\`, etc.). In React, these are called ["components"](https://reactjs.org/docs/components-and-props.html) and there are two types of components: function components and class components. We are going to focus on function components for now and will cover class components later. [(Credit: React)](https://reactjs.org/docs/components-and-props.html) Creating a function component is simple: we create a function that accepts one argument: a list of properties (like HTML properties). For example, the following code creates a \`Greeting\` component that expects a \`name\` property: \`\`\`JavaScript function Greeting(props) { return Hello, {props.name} } \`\`\` Now, we can reference this \`Greeting\` object with: \`\`\`JavaScript const elem = ; \`\`\` ...and we can add it to the DOM: \`\`\`JavaScript ReactDOM.render(elem, document.body); \`\`\` `33:[] 2e:{"id":"e957e6330175d7e3","slug":"building-interactivity-with-reactjs","title":"React.JS Basics","thumbnail":"4ffb016a64746b8ee682e9a0be8d8994ca585987a8505a66a2a573f2da04e61e","access_level":"public","create_time":"$D2020-12-31T13:56:59.947Z","update_time":"$D2023-10-02T17:43:46.007Z","view_time":null,"first_public_time":"$D2020-12-31T13:57:01.233Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":58,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"React.JS Basics","cells":[{"id":0,"value":"md`# React.JS Basics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"md`\n## Rendering a React Component\n\nThe [\\`ReactDOM.render()\\`](https://reactjs.org/docs/react-dom.html#render) function connects React elements with our DOM. Here is a simple example (using JSX elements):\n\n\\`\\`\\`JavaScript\nReactDOM.render(

Hello!

, document.getElementById('root'));\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"md`\n## Adding Event Listeners\n\n[(Credit: React for the examples)](https://reactjs.org/docs/handling-events.html)\n\nIn React, we can [add event listeners](https://reactjs.org/docs/handling-events.html) by setting JSX Attributes. If \\`activateLasers\\` is a function, we can run:\n\n\\`\\`\\`HTML\n\n\\`\\`\\`\n\nNote that we need to **pass in the function object itself**.\n\nAnother example:\n\n\\`\\`\\`JavaScript\nfunction ActionLink() {\n function handleClick(e) {\n console.log('The link was clicked.');\n }\n return Click me;\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"