academind · Anasalsalhi99 · Mar 23, 2021 · Mar 23, 2021 · Mar 23, 2021 · Mar 23, 2021
diff --git a/code/edited-first-app/package.json b/code/edited-first-app/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "first-react-app",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "src/index.js",
+  "dependencies": {
+    "loader-utils": "3.2.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-scripts": "5.0.1"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/code/edited-first-app/public/index.html b/code/edited-first-app/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/code/edited-first-app/public/react-logo-xs.png b/code/edited-first-app/public/react-logo-xs.png
diff --git a/code/edited-first-app/src/App.js b/code/edited-first-app/src/App.js
@@ -0,0 +1,80 @@
+import { useState } from "react";
+import "./styles.css";
+
+const content = [
+  [
+    "React is extremely popular",
+    "It makes building complex, interactive UIs a breeze",
+    "It's powerful & flexible",
+    "It has a very active and versatile ecosystem"
+  ],
+  [
+    "Components, JSX & Props",
+    "State",
+    "Hooks (e.g., useEffect())",
+    "Dynamic rendering"
+  ],
+  [
+    "Official web page (react.dev)",
+    "Next.js (Fullstack framework)",
+    "React Native (build native mobile apps with React)"
+  ],
+  [
+    "Vanilla JavaScript requires imperative programming",
+    "Imperative Programming: You define all the steps needed to achieve a result",
+    "React on the other hand embraces declarative programming",
+    "With React, you define the goal and React figures out how to get there"
+  ]
+];
+
+export default function App() {
+  const [activeContentIndex, setActiveContentIndex] = useState(0);
+
+  return (
+    <div>
+      <header>
+        <img src="react-logo-xs.png" alt="React logo" />
+        <div>
+          <h1>React.js</h1>
+          <p>i.e., using the React library for rendering the UI</p>
+        </div>
+      </header>
+
+      <div id="tabs">
+        <menu>
+          <button
+            className={activeContentIndex === 0 ? "active" : ""}
+            onClick={() => setActiveContentIndex(0)}
+          >
+            Why React?
+          </button>
+          <button
+            className={activeContentIndex === 1 ? "active" : ""}
+            onClick={() => setActiveContentIndex(1)}
+          >
+            Core Features
+          </button>
+          <button
+            className={activeContentIndex === 2 ? "active" : ""}
+            onClick={() => setActiveContentIndex(2)}
+          >
+            Related Resources
+          </button>
+          <button
+            className={activeContentIndex === 3 ? "active" : ""}
+            onClick={() => setActiveContentIndex(3)}
+          >
+            React vs JS
+          </button>
+        </menu>
+        <div id="tab-content">
+          <ul>
+            {content[activeContentIndex].map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/code/edited-first-app/src/index.js b/code/edited-first-app/src/index.js
@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
diff --git a/code/edited-first-app/src/styles.css b/code/edited-first-app/src/styles.css
@@ -0,0 +1,74 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  background-color: #181c1f;
+  color: #bdd1d4;
+  margin: 2rem;
+}
+
+header {
+  margin: 2rem 0;
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+}
+
+header img {
+  width: 3rem;
+  object-fit: contain;
+}
+
+header h1 {
+  margin: 0;
+  color: #48d9f3;
+}
+
+header p {
+  margin: 0;
+  color: #82c2ce;
+}
+
+#tabs {
+  max-width: 32rem;
+  margin: 2rem 0;
+  overflow: hidden;
+}
+
+#tabs menu {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 0.25rem;
+}
+
+#tabs button {
+  font: inherit;
+  font-size: 0.85rem;
+  background-color: #282f33;
+  border: none;
+  border-bottom-color: #48d9f3;
+  color: #e0eff1;
+  border-radius: 4px 4px 0 0;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease-out;
+}
+
+#tabs button:hover,
+#tabs button.active {
+  background-color: #48d9f3;
+  color: #273133;
+}
+
+#tab-content {
+  background-color: #2d3942;
+  border-radius: 0 4px 4px 4px;
+  padding: 1rem;
+}
+
+#tab-content li {
+  margin: 0.75rem 0;
+}
diff --git a/code/react-vs-vanilla-js-example/just-js/index.html b/code/react-vs-vanilla-js-example/just-js/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Vanilla JavaScript</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="index.js" defer></script>
+  </head>
+
+  <body>
+    <header>
+      <img src="js-logo-xs.png" alt="JavaScript logo" />
+      <div>
+        <h1>Vanilla JavaScript</h1>
+        <p>i.e., JavaScript without any (UI) framework or library</p>
+      </div>
+    </header>
+
+    <div id="tabs">
+      <menu>
+        <button id="btn-why-react" class="active">Why React?</button>
+        <button id="btn-core-features">Core Features</button>
+        <button id="btn-resources">Related Resources</button>
+      </menu>
+      <div id="tab-content"></div>
+    </div>
+  </body>
+</html>
diff --git a/code/react-vs-vanilla-js-example/just-js/index.js b/code/react-vs-vanilla-js-example/just-js/index.js
@@ -0,0 +1,61 @@
+const content = [
+  [
+    "React is extremely popular",
+    "It makes building complex, interactive UIs a breeze",
+    "It's powerful & flexible",
+    "It has a very active and versatile ecosystem"
+  ],
+  [
+    "Components, JSX & Props",
+    "State",
+    "Hooks (e.g., useEffect())",
+    "Dynamic rendering"
+  ],
+  [
+    "Official web page (react.dev)",
+    "Next.js (Fullstack framework)",
+    "React Native (build native mobile apps with React)"
+  ]
+];
+
+const btnWhyReact = document.getElementById("btn-why-react");
+const btnCoreFeature = document.getElementById("btn-core-features");
+const btnResources = document.getElementById("btn-resources");
+const tabContent = document.getElementById("tab-content");
+
+function displayContent(items) {
+  let listContent = "";
+  for (const item of items) {
+    listContent += `<li>${item}</li>`;
+  }
+  const list = document.createElement("ul");
+  tabContent.innerHTML = ""; // clear existing content
+  list.innerHTML = listContent; // insert new content
+  tabContent.append(list);
+}
+
+function highlightButton(btn) {
+  // Clear all existing styling / highlights
+  btnWhyReact.className = "";
+  btnCoreFeature.className = "";
+  btnResources.className = "";
+  btn.className = "active"; // set new style / highlight
+}
+
+function handleClick(event) {
+  const btnId = event.target.id;
+  highlightButton(event.target);
+  if (btnId === "btn-why-react") {
+    displayContent(content[0]);
+  } else if (btnId === "btn-core-features") {
+    displayContent(content[1]);
+  } else {
+    displayContent(content[2]);
+  }
+}
+
+displayContent(content[0]); // initially show this content
+
+btnWhyReact.addEventListener("click", handleClick);
+btnCoreFeature.addEventListener("click", handleClick);
+btnResources.addEventListener("click", handleClick);
diff --git a/code/react-vs-vanilla-js-example/just-js/js-logo-xs.png b/code/react-vs-vanilla-js-example/just-js/js-logo-xs.png