Dependencies cleanup

kbss-cvut · Oct 1, 2020 · a59ccde · a59ccde
1 parent a54f43c
commit a59ccde
Show file tree

Hide file tree

Showing 9 changed files with 459 additions and 194 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,7 @@
 # production
 /build
 /dist
+public/build
 
 # misc
 .DS_Store

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,38 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.49",
-    "@types/react-dom": "^16.9.8",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "typescript": "^3.7.5"
   },
   "scripts": {
     "build": "webpack",
-    "watch": "webpack -w"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "watch": "webpack -w",
+    "start": "webpack-dev-server -d --content-base ./public"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.0.4",
+    "@testing-library/user-event": "^12.1.6",
+    "@types/jest": "^26.0.14",
+    "@types/node": "^14.11.2",
+    "@types/react": "^16.9.49",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-router-dom": "^5.1.5",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "node-sass": "^4.14.1",
     "sass-loader": "^10.0.2",

diff --git a/index.html → public/index.html b/index.html → public/index.html
@@ -2,10 +2,10 @@
 <html>
     <head>
         <title>Webpack with React and TypeScript</title>
-        <link href="dist/app.bundle.css" rel="stylesheet"/>
+        <link href="./build/app.bundle.css" rel="stylesheet"/>
     </head>
     <body>
 <div id="root"></div>
-    <script src="dist/bundle.js" type="text/javascript"></script>
+    <script src="./build/bundle.js" type="text/javascript"></script>
 </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,35 @@
 import * as React from "react";
+import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
+
 import './styles/App.scss';
+import Home from "./components/Home";
+import Login from "./components/Login"
 
-const App = () => <div>Hello React App!</div>;
+const App = () => {
+    return (
+        <Router>
+            <div>
+                <nav>
+                    <ul>
+                        <li>
+                            <Link to="/">Home</Link>
+                        </li>
+                        <li>
+                            <Link to="/login">Login</Link>
+                        </li>
+                    </ul>
+                </nav>
+                <Switch>
+                    <Route path="/login">
+                        <Login/>
+                    </Route>
+                    <Route path="/">
+                        <Home/>
+                    </Route>
+                </Switch>
+            </div>
+        </Router>
+    );
+}
 
 export default App;
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -0,0 +1,7 @@
+import * as React from "react";
+
+const Home = () => {
+    return (<div>Welcome to home page</div>);
+}
+
+export default Home;
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+const Login = () => {
+    return (
+        <form method="post">
+            <h2>Log in</h2>
+            <input type="text" className="form-control" placeholder="Username"/>
+            <input type="password" placeholder="Password"/>
+            <button type="submit">Log in</button>
+        </form>
+    );
+}
+
+export default Login;
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,18 +1,16 @@
 {
   "compilerOptions": {
-    // No module system, concatenated file
     "module": "none",
-
-    // Set React as the JSX factory
     "jsx": "react",
-
-    // Target ES6 for more modern browsers
     "target": "es6",
 
-    // Include typings from built-in lib declarations
-    "lib": ["es2015", "dom", "dom.iterable"],
+    // Paths mapping and aliasing
+//    "baseUrl": "./",
+//    "paths": {
+//      "@components/*": ["./src/components/*"],
+//      "@styles/*": ["./src/styles/*"]
+//    },
 
-    // Include module source maps for debugging
-    "sourceMap": true
+    "lib": ["es2017", "dom", "dom.iterable"]
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -2,8 +2,6 @@
 
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
-const path = require("path");
-
 module.exports = {
     // Set debugging source maps to be "inline" for
     // simplicity and ease of use
@@ -17,7 +15,8 @@ module.exports = {
     // Where to compile the bundle
     // By default the output directory is `dist`
     output: {
-        filename: "bundle.js"
+        path: __dirname + '/public',
+        filename: "build/bundle.js"
     },
 
     // Supported file loaders
@@ -38,7 +37,9 @@ module.exports = {
     },
 
     plugins: [
-        new ExtractTextPlugin({filename: 'app.bundle.css'}),
+        new ExtractTextPlugin({
+            filename: 'build/app.bundle.css',
+        }),
     ],
 
     // File extensions to support resolving
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,7 @@ @@
     # production
     /build
     /dist
+    public/build
     # misc
     .DS_Store
@@ Expand Down @@