ironhack-labs · saragarpa · May 23, 2023 · May 23, 2023 · May 23, 2023 · May 23, 2023
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,16 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+    "react/prop-types": "off"
+  },
+}
diff --git a/.gitignore b/.gitignore
@@ -1,23 +1,24 @@
-# 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
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierrc b/.prettierrc
diff --git a/README.md b/README.md
@@ -7,27 +7,27 @@
    <h2>Learning Goals</h2>
   </summary>
 
-  This exercise allows you to practice and apply the concepts and techniques taught in class. 
+This exercise allows you to practice and apply the concepts and techniques taught in class.
 
-  Upon completion of this exercise, you will be able to:
+Upon completion of this exercise, you will be able to:
 
-  - Extract and organize parts of the existing UI into separate new components.
-  - Use the `useState` hook to create state variables and add state to React components.
-  - Use state variable setter functions to update state and trigger component re-render.
-  - Use the `map()` method to render array data as a list of elements.
-  - Create controlled components to manage the form inputs.
-  - Create event handler functions to handle user interactions and browser events.
-  - Apply the "Lifting State Up" approach to share the state between components.
-  - Create a search bar component that allows users to filter items in a list based on a search query.
+- Extract and organize parts of the existing UI into separate new components.
+- Use the `useState` hook to create state variables and add state to React components.
+- Use state variable setter functions to update state and trigger component re-render.
+- Use the `map()` method to render array data as a list of elements.
+- Create controlled components to manage the form inputs.
+- Create event handler functions to handle user interactions and browser events.
+- Apply the "Lifting State Up" approach to share the state between components.
+- Create a search bar component that allows users to filter items in a list based on a search query.
 
   <br>
-  <hr> 
+  <hr>
 
 </details>
 
 ## Introduction
 
-By now you probably know that **in React everything is a component**. A React app is built out of components, usually a lot of them. When used, components are _usually_ nested inside of other components. 
+By now you probably know that **in React everything is a component**. A React app is built out of components, usually a lot of them. When used, components are _usually_ nested inside of other components.
 
 To refresh our memory, **a component is a reusable piece of code, which defines how certain features should look and behave in the UI**.
 
@@ -40,13 +40,11 @@ Now one more time, we will be _thinking and acting_ in that direction. Maybe in
 - Clone this repo
 
   ```bash
-  $ cd lab-thinking-in-react
-  $ npm install
-  $ npm start
+  cd lab-thinking-in-react-vite
+  npm install
+  npm run dev
   ```
 
-
-
 ## Submission
 
 - Upon completion, run the following commands:
@@ -57,56 +55,35 @@ Now one more time, we will be _thinking and acting_ in that direction. Maybe in
   git push origin master
   ```
 
-- Create a Pull Request so that your TAs can review your work.
-
-
+- Create a Pull Request and submit your assignment.
 
-## Getting Started
-
-Clean the `App.js` component so that it has the following structure:
-
-```jsx
-// src/App.js
-import "./App.css";
-
-function App() {
-  return <div className="App"></div>;
-}
-export default App;
-```
 
 
 
 ## Instructions
 
-### Iteration 0 | Introduction 
+### Iteration 0 | Introduction
 
 In the `src/` folder, you will find the `data.json` file containing the data representing products of a random store.
 
 Each product object has the following fields: `category`, `price`, `inStock` and `name`, of which `inStock` is type _boolean_ (this information will be valuable soon). Example:
 
 ```json
 {
-    "category": "Sporting Goods",
-    "price": "$49.99",
-    "inStock": true,
-    "name": "Football"
+  "category": "Sporting Goods",
+  "price": "$49.99",
+  "inStock": true,
+  "name": "Football"
 }
 ```
 
-
-
 You will be dealing with multiple components that depend on each other. To properly reflect the changes in all the components, we'll store the state in the closest common parent component (remember _lift the state up_).
 
 You will be dealing with multiple components that depend on each other. To ensure that components can interact with each other, we'll store the state in the closest common parent component (remember _lifting the state up_).
 
 And remember, this is just an exercise and a part of the learning process. No one expects you to do it perfectly. Think it through, ask questions, be curious and explore all possibilities. Let's do this! :wink:
 
-
-
-----
-
-
+---
 
 ### Iteration 1 | Break The UI Into A Component Hierarchy
 
@@ -118,17 +95,15 @@ A possible approach could be something like this:
 <details>
   <summary>Click here to see the image</summary>
 
-
   <hr>
 
-
 ![](https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/m3/lab-thinking-in-react/thinking-in-react-1.png)
 
 </details>
 
 As you can see here, we have four components in our app:
 
-- **ProductsPage (orange):** contains the entirety of the example (we will render it in the `App.js`)
+- **ProductsPage (orange):** contains the entirety of the example (we will render it in the `App.jsx`)
 - **SearchBar (blue):** having an input that takes the user's search string
 - **ProductTable (green):** displays all the products and also shows the filtered products based on the user's search
 - **ProductRow (red):** displays a row (_table data_) for each product
@@ -140,44 +115,37 @@ Now that we’ve identified the components in our app let’s arrange them into
   - ProductTable
     - ProductRow
 
-
-
-----
-
-
+---
 
 ### Iteration 2 | Products Page
 
-First, let's create a `components/` folder and our first component `ProductsPage.js`. This component will be the _parent_ of the other components.
+First, let's create a `components/` folder and our first component `ProductsPage.jsx`. This component will be the _parent_ of the other components.
 
 We'll give you a starter hint to kick off the project: this component should have a state variable holding the array of products. It should then pass down the products to other components that need them. So to start, you should import the `data.json` file and create a state variable in the following way:
 
 ```jsx
-// src/components/ProductsPage.js
+// src/components/ProductsPage.jsx
 
-import { useState } from 'react';
-import jsonData from './../../data.json';
+import { useState } from "react";
+import jsonData from "./../../data.json";
 
-function ProductsPage () {
+function ProductsPage() {
   const [products, setProducts] = useState(jsonData);
-  
-  return(
-      <div>
-        <h1>IronStore</h1>
-      </div>    
-  )
+
+  return (
+    <div>
+      <h1>IronStore</h1>
+    </div>
+  );
 }
 ```
 
-
-
-Next, let's import and render the `ProductsPage` component in the `App.js`:
+Next, let's import and render the `ProductsPage` component in the `App.jsx`:
 
 ```jsx
-// App.js
-import './App.css';
-import ProductsPage from './components/ProductsPage';
-
+// App.jsx
+import "./App.css";
+import ProductsPage from "./components/ProductsPage";
 
 function App() {
   return (
@@ -190,62 +158,44 @@ function App() {
 export default App;
 ```
 
-
-
 Okay, now it's your turn. Create the `<SearchBar />` and the `<ProductTable />` components to display the search bar and the list of products. You should render both components inside the `ProductsPage` (see the sketch above 😉).
 
-
-----
-
+---
 
 ### Iteration 3 | Product Row
 
-Next, create a `<ProductRow />` component and use it to display each product in the list. This component should be rendered inside of the `ProductTable`. 
+Next, create a `<ProductRow />` component and use it to display each product in the list. This component should be rendered inside of the `ProductTable`.
 
 The products that are out of stock should be colored in **red**. _Hint:_ Each product object has a property `inStock` which you can use to change the text color conditionally.
 
 <details>
   <summary>Click here to see the image</summary>
 
-
   <hr>
 
-
 ![](https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/m3/lab-thinking-in-react/thinking-in-react-4.png)
 
 </details>
 
 <!-- ![image](https://user-images.githubusercontent.com/23629340/42808421-95a78a66-89b3-11e8-85c1-3246127a7f1a.png) -->
 
-
-
-----
-
-
+---
 
 ### Iteration 4 | Filter the Products
 
 In this iteration, we'll add the list filtering functionality. Every time someone types a letter in the search input, the list should update based on the user's input.
-_Hint:_  Search functionality can be easily implemented using an `input` with the `onChange` handler, which will update the state on every keystroke.
+_Hint:_ Search functionality can be easily implemented using an `input` with the `onChange` handler, which will update the state on every keystroke.
 
 <details>
   <summary>Click here to see the image</summary>
 
-
-
   <hr>
 
-
-
 ![](https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/m3/lab-thinking-in-react/thinking-in-react-2.gif)
 
 </details>
 
-
-
-----
-
-
+---
 
 ### Iteration 5 | The Checkbox Filter (Bonus)
 
@@ -256,24 +206,16 @@ We know that setting the search and checkbox will probably be the biggest challe
 <details>
   <summary>Click here to see the image</summary>
 
-
   <hr>
 
-
 ![](https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/m3/lab-thinking-in-react/thinking-in-react-3.png)
 
 </details>
 
-
-
-----
-
-
+---
 
 ### Iteration 6 | Styling your app (Bonus)
 
 Feel free to style the app in any way you would like. :art:
 
-
-
 Happy coding! :heart:
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>