2a:null 2b:["$","title",null,{"children":"Exercises: React.js | Steve Oney | Observable"}] 30:T793,md` ## Why React.JS? There are tons of MV* frameworks in JavaScript (including [one that I implemented in grad school](https://soney.github.io/constraintjs/)). What is the right one to use (and why did I go with React.JS)? Considering how quickly things move in the world of JavaScript frameworks, the answer might change next year but for now, I considered using the three most popular frameworks: - [AngularJS](https://angularjs.org/) - [ReactJS](https://reactjs.org/) - [VueJS](https://vuejs.org/) I see the following advantages: 1. It is backed by Facebook so unlikely to fall into disrepair 2. It has achieved widespread usage 3. It's well designed (but so are most MV* frameworks) 4. There are offshoots of React like [React Native](https://reactnative.dev/) for iOS/Android and [React 360](https://github.com/facebookarchive/react-360) for VR (now defunct) 5. React makes it [a *little* easier to use for only part of your site](https://reactjs.org/docs/add-react-to-a-website.html); you don't necessarily need to architect your whole site around React (but in practice, you often do) I see the following disadvantages: 1. It can be difficult to customize. React is a "heavyweight" library and learning to configure a React project (and change the build process) is like learning a new programming language 2. React is reasonably large [though not compared to many of its peers](https://gist.github.com/Restuta/cda69e50a853aa64912d#file-framework-sizes-md) 3. There are some things that are non-standardm, like [(optionally)](https://reactjs.org/docs/react-without-jsx.html) [JSX](https://reactjs.org/docs/introducing-jsx.html), which allows you to write HTML code inline with JavaScript Ultimately, I was between [VueJS](https://vuejs.org/) and [ReactJS](https://reactjs.org/) and chose React. [Other people would disagree](https://blog.sourcerer.io/why-you-should-leave-react-for-vue-and-never-use-it-again-5e274bef27c2). `31:Tb0c,md` ## ✏️ Exercise: Getting Started with React We could slowly integrate React.js but I'm going to instead dive right in. We're going to use [create-react-app](https://github.com/facebook/create-react-app) to create a new React application and configure the build process. 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. Take a look at the following files (yes, actually take some time to open and look at them): - \`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 Now, open the terminal in the \`first-react-app\` directory and run: \`\`\` npm start \`\`\` This will start the "development server", which will start a local web server. You can navigate to it by visiting [http://localhost:3000/](http://localhost:3000/) in your browser (though your browser should automatically open as soon as you run \`npm start\`. Leave it open and edit \`src/app.js\` to add (right after the \`

\` element: \`\`\`html

Hello React!

\`\`\` Save and look at the rendered page; it should update automatically(!) Also, note that [you're writing HTML tags directly in a JavaScript file](https://reactjs.org/docs/introducing-jsx.html)(!!!) Finally, in your terminal, hit \`CTRL+C\` to stop the execution of \`npm start\`. Now, run: \`\`\` npm run build \`\`\` This will build a deployable application into the \`build/\` directory. Look at the file \`build/index.html\`. It's the "rendered" and minified \`public/index.html\` file. If you want to deploy your application, you can just use the files inside of this directory; these are your "built" files. Packages like [gh-pages](https://github.com/tschaub/gh-pages) can make it easy to deploy this directory to GitHub automatically. `32:T428,md` ## ✏️ Exercise: Mixing in Other CSS Libraries Note in \`App.js\` how we can just import a CSS file and even an image(!): \`\`\`JavaScript import './App.css'; \`\`\` Try to see if you can do this with [Bootstrap](https://getbootstrap.com/) as well. First, install bootstrap with \`npm\`: \`\`\` npm install bootstrap \`\`\` Then, find the correct CSS file to include and add an \`import\` to your code. Replace the HTML in \`App.js\` with some basic Bootstrap code like [(Credit: W3Schools for the example)](https://www.w3schools.com/bootstrap/bootstrap_examples.asp): \`\`\`HTML

Button Group

The .btn-group class creates a button group:

\`\`\` Note that in the above example, we had to replace the \`class\` attribute with \`className\`. `33:T435,md` If you want a solution for what you can put in \`App.js\`, expand this cell. Note that it uses [effect hooks](https://reactjs.org/docs/hooks-overview.html) and [refs](https://reactjs.org/docs/refs-and-the-dom.html), which we will cover in more detail next lecture. ` /*md` \`\`\`JavaScript import './App.css'; import { useState, createRef } from 'react'; const todos = []; function App() { const textInput = createRef(); const [todoDisplays, setTodoDisplays] = useState([]); function updateTodoDisplays() { setTodoDisplays(todos.map((todo, i) =>

{todo.text}

)); } function removeTodo(idx) { todos.splice(idx, 1); updateTodoDisplays(); } function addTodo() { todos.push({text: textInput.current.value}); updateTodoDisplays(); textInput.current.value = ""; } return (

{todoDisplays}

); } export default App; \`\`\` `*/34:[] 2e:{"id":"4c92728af035625d","slug":"si-579-lecture-16","title":"Exercises: React.js","thumbnail":"a5c0b6d444e9b166e64fca34f4d79b3e44ddf9583eccea0b476ed76c1ff3d0b8","access_level":"public","create_time":"$D2021-03-17T05:58:09.271Z","update_time":"$D2023-10-02T17:55:22.573Z","view_time":null,"first_public_time":"$D2021-03-17T14:38:10.445Z","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":97,"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":"Exercises: React.js","cells":[{"id":0,"value":"md`# Exercises: React.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"md`\n## Cool JavaScript Thing(s) of the Day\n\nThere are several JavaScript features that are **super useful** but not completely necessary. Let's talk about them!\n\n\n### [Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)\n\nTemplate literals are like F-Strings in Python (a better version of \\`.format()\\`). They allow us to build strings and easily embed expression values. We create a template literal with backticks (\\` \\`), the character right below the tilde (~) on most of your keyboards. We can then put JavaScript expressions inside of \\` \\${} \\`:\n\nFor example:\n\\`\\`\\`JavaScript\nconst x = 1;\nconst y = 2;\n\n\\`x plus y is \\${x + y}\\`; // value: \"x plus y is 3\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"md`\n### [Object Property/Value Shorthand](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#new_notations_in_ecmascript_2015)\n\n[Credit: Alligator.io](https://alligator.io/js/object-property-shorthand-es6/)\n\nWe often run into situations where we want to take multiple variables and turn them into an object:\n\\`\\`\\`JavaScript\nconst cat = 'Miaow';\nconst dog = 'Woof';\nconst bird = 'Peet peet';\n\nconst someObject = {\n cat: cat,\n dog: dog,\n bird: bird\n}\n\\`\\`\\`\n\nHowever, when the variable name is the same as the key name, our code can get a little repetitive (\\`cat: cat\\`). In this situation, we can use:\n\n\\`\\`\\`JavaScript\nconst cat = 'Miaow';\nconst dog = 'Woof';\nconst bird = 'Peet peet';\n\nconst someObject = {\n cat,\n dog,\n bird\n};\n\n//{\n// cat: \"Miaow\",\n// dog: \"Woof\",\n// bird: \"Peet peet\"\n//}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"md`\n### [Conditional Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)\n\n\\`\\`\\`JavaScript\nlet c;\nif(x > 40) {\n c = \"greater\";\n} else {\n c = \"less\";\n}\n\\`\\`\\`\n\ncan be expressed with:\n\n\\`\\`\\`JavaScript\nconst c = (x > 40) ? \"greater\" : \"less\";\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`\n## [Libraries vs. Frameworks](https://observablehq.com/@soney/si-579-understanding-libraries-vs-frameworks)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"md`\n## [React.JS Basics](https://observablehq.com/@soney/building-interactivity-with-reactjs)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"md`\n## ✏️ Exercise: Implementing a \"todo\" application with React\n\nTry implementing the basic \"todo\" application [from last lecture](https://umich.instructure.com/courses/445374/files/folder/Lecture%20Files/Lecture%2015) using React. Note that you won't be able to do this *just* yet but it's important to note the challenges that you face while trying to do this.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"