adding a proposed solution for lab 6

polito-webapp1 · May 7, 2024 · 8b9cd07 · 8b9cd07
1 parent c46590d
commit 8b9cd07
Show file tree

Hide file tree

Showing 17 changed files with 4,988 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ Laboratories solutions (under development) for the course of _Web Applications I
 - Lab 03: [APIs with Express](https://github.com/polito-webapp1/lab-2024/tree/main/lab03-express)
 - Lab 04: [Getting started with HTML and CSS](https://github.com/polito-webapp1/lab-2024/tree/main/lab04-html-css)
 - Lab 05: [JavaScript in the Browser](https://github.com/polito-webapp1/lab-2024/tree/main/lab05-js-browser)
-- Lab 06:
+- Lab 06: [Getting started with React](https://github.com/polito-webapp1/lab-2024/tree/main/lab06-react)
 - Lab 07:
 - Lab 08:
 - Lab 09:

diff --git a/lab06-react/FilmLibrary.PNG b/lab06-react/FilmLibrary.PNG
diff --git a/lab06-react/README.md b/lab06-react/README.md
@@ -0,0 +1,10 @@
+# Lab 06: Getting started with React
+
+The files in this folder are structured as follows:
+
+- `index.html`: the HTML page on which the React application will be mounted at run-time;
+- `src` folder: the file related to the React application.
+
+The desired layout should be similar to the following picture:
+
+![This picture shows a possible layout for the applicaiton](./FilmLibrary.PNG)
diff --git a/lab06-react/lab06-getting-started-react.pdf b/lab06-react/lab06-getting-started-react.pdf
diff --git a/lab06-react/solution/.eslintrc.cjs b/lab06-react/solution/.eslintrc.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/lab06-react/solution/index.html b/lab06-react/solution/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Film Library</title>
+</head>
+<body>
+<div id="root" class="w-100"></div>
+<script type="module" src="/src/main.jsx"></script>
+</body>
+</html>