diff --git a/parts/2/phoneBook/.gitignore b/parts/2/phoneBook/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/parts/2/phoneBook/.gitignore @@ -0,0 +1,24 @@ +# 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/parts/2/phoneBook/README.md b/parts/2/phoneBook/README.md new file mode 100644 index 0000000..7059a96 --- /dev/null +++ b/parts/2/phoneBook/README.md @@ -0,0 +1,12 @@ +# React + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh + +## Expanding the ESLint configuration + +If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. diff --git a/parts/2/phoneBook/eslint.config.js b/parts/2/phoneBook/eslint.config.js new file mode 100644 index 0000000..ec2b712 --- /dev/null +++ b/parts/2/phoneBook/eslint.config.js @@ -0,0 +1,33 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' + +export default [ + { ignores: ['dist'] }, + { + files: ['**/*.{js,jsx}'], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + parserOptions: { + ecmaVersion: 'latest', + ecmaFeatures: { jsx: true }, + sourceType: 'module', + }, + }, + plugins: { + 'react-hooks': reactHooks, + 'react-refresh': reactRefresh, + }, + rules: { + ...js.configs.recommended.rules, + ...reactHooks.configs.recommended.rules, + 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, + }, +] diff --git a/parts/2/phoneBook/index.html b/parts/2/phoneBook/index.html new file mode 100644 index 0000000..0c589ec --- /dev/null +++ b/parts/2/phoneBook/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/parts/2/phoneBook/package.json b/parts/2/phoneBook/package.json new file mode 100644 index 0000000..e52628a --- /dev/null +++ b/parts/2/phoneBook/package.json @@ -0,0 +1,27 @@ +{ + "name": "phonebook", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "react": "^19.1.0", + "react-dom": "^19.1.0" + }, + "devDependencies": { + "@eslint/js": "^9.25.0", + "@types/react": "^19.1.2", + "@types/react-dom": "^19.1.2", + "@vitejs/plugin-react": "^4.4.1", + "eslint": "^9.25.0", + "eslint-plugin-react-hooks": "^5.2.0", + "eslint-plugin-react-refresh": "^0.4.19", + "globals": "^16.0.0", + "vite": "^6.3.5" + } +} diff --git a/parts/2/phoneBook/public/vite.svg b/parts/2/phoneBook/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/parts/2/phoneBook/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/parts/2/phoneBook/src/App.jsx b/parts/2/phoneBook/src/App.jsx new file mode 100644 index 0000000..9f0cf50 --- /dev/null +++ b/parts/2/phoneBook/src/App.jsx @@ -0,0 +1,24 @@ +import { useState } from "react"; + +const App = () => { + const [persons, setPersons] = useState([{ name: "Arto Hellas" }]); + const [newName, setNewName] = useState(""); + + return ( +
+

Phonebook

+
+
+ name: +
+
+ +
+
+

Numbers

+ ... +
+ ); +}; + +export default App; diff --git a/parts/2/phoneBook/src/assets/react.svg b/parts/2/phoneBook/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/parts/2/phoneBook/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/parts/2/phoneBook/src/main.jsx b/parts/2/phoneBook/src/main.jsx new file mode 100644 index 0000000..8381216 --- /dev/null +++ b/parts/2/phoneBook/src/main.jsx @@ -0,0 +1,5 @@ +import ReactDOM from "react-dom/client"; + +import App from "./App.jsx"; + +ReactDOM.createRoot(document.getElementById("root")).render(); diff --git a/parts/2/phoneBook/vite.config.js b/parts/2/phoneBook/vite.config.js new file mode 100644 index 0000000..8b0f57b --- /dev/null +++ b/parts/2/phoneBook/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +})