Updated

Author: kavyashreeshah

Section 20/.gitignore

@@ -0,0 +1,25 @@
+.DS_Store
+.vscode
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Section 20/code/01-starting-project/package.json

@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.5.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-scripts": "^5.0.1",
-    "web-vitals": "^0.2.4"
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

Section 20/code/01-starting-project/src/App.js

@@ -1,9 +1,5 @@
 function App() {
-  return (
-    <div>
-      <h2>Let's get started!</h2>
-    </div>
-  );
+  return <div></div>;
 }
 
 export default App;

Section 20/code/01-starting-project/src/index.css

@@ -1,15 +1,50 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
-
 * {
   box-sizing: border-box;
 }
 
-html {
-  font-family: 'Noto Sans JP', sans-serif;
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+
+  --color-gray-100: #f4f3f1;
+  --color-gray-200: #dddbd8;
+  --color-gray-300: #ccc9c6;
+  --color-gray-400: #aeaba7;
+  --color-gray-500: #8a8784;
+  --color-gray-600: #656360;
+  --color-gray-700: #4b4a47;
+  --color-gray-800: #31302e;
+  --color-gray-900: #1f1d1b;
+
+  --color-primary-100: #fcf3e1;
+  --color-primary-200: #fceccd;
+  --color-primary-300: #fae1af;
+  --color-primary-400: #fbd997;
+  --color-primary-500: #ffd37c;
+  --color-primary-600: #f9c762;
+  --color-primary-700: #fbc14d;
+  --color-primary-800: #fab833;
+  --color-primary-900: #f6ad1b;
 }
 
 body {
   margin: 0;
-  background-color: #3f3f3f;
 }
 
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

Section 20/code/01-starting-project/src/index.js

@@ -1,7 +1,12 @@
+import React from 'react';
 import ReactDOM from 'react-dom/client';
 
 import './index.css';
 import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<App />);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

Section 20/code/02-defining-and-using-routes/src/App.js

@@ -0,0 +1,13 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+
+import HomePage from './pages/Home';
+
+const router = createBrowserRouter([
+  { path: '/', element: <HomePage /> },
+]);
+
+function App() {
+  return <RouterProvider router={router} />;
+}
+
+export default App;

Section 20/code/02-defining-and-using-routes/src/index.css

@@ -0,0 +1,5 @@
+function HomePage() {
+  return <h1>My Home Page</h1>;
+}
+
+export default HomePage;

Section 20/code/02-defining-and-using-routes/src/pages/Products.js

@@ -0,0 +1,29 @@
+import {
+  createBrowserRouter,
+  // createRoutesFromElements,
+  RouterProvider,
+  // Route,
+} from 'react-router-dom';
+
+import HomePage from './pages/Home';
+import ProductsPage from './pages/Products';
+
+// const routeDefinitions = createRoutesFromElements(
+//   <Route>
+//     <Route path="/" element={<HomePage />} />
+//     <Route path="/products" element={<ProductsPage />} />
+//   </Route>
+// );
+
+const router = createBrowserRouter([
+  { path: '/', element: <HomePage /> },
+  { path: '/products', element: <ProductsPage /> },
+]);
+
+// const router = createBrowserRouter(routeDefinitions);
+
+function App() {
+  return <RouterProvider router={router} />;
+}
+
+export default App;

Section 20/code/02-defining-and-using-routes/src/pages/Welcome.js

@@ -0,0 +1,5 @@
+function HomePage() {
+  return <h1>My Home Page</h1>;
+}
+
+export default HomePage;

Section 21/code/01-starting-project/frontend/package.json Section 20/code/02-route-setup/package.json

@@ -0,0 +1,5 @@
+function ProductsPage() {
+  return <h1>The Products Page</h1>;
+}
+
+export default ProductsPage;