update: promote v4

README.md

@@ -1,42 +1,79 @@
-<img src="https://raw.githubusercontent.com/Nekall/template-react-app/3035507c3f946c17474380f68871d910fd1422f7/src/assets/images/react.svg" alt="react's logo" width="100" height="100">
 
-## This is a basic template of a React application. Basically, there is a page system, the jsconfig, and the gitigniore is completed.
-Basically I made it for me, but feel free to use it, improve it, customize it. Happy development :)  
+<img  src="https://raw.githubusercontent.com/Nekall/template-react-app/3035507c3f946c17474380f68871d910fd1422f7/src/assets/images/react.svg"  alt="react's logo"  width="100"  height="100">
+
+
+
+## This is a <u>light</u> template of a React application. 🧚‍♂️
+
+Basically I made it for me, but feel free to use it, improve it, customize it. Have a nice dev :)
+
+(🧹 *All packages & files for creating tests or checking performance have been removed.*)
+
+
 
 ## Setup ⚙️
 
- - Download .zip **or** `git clone` this repository.
- - Execute `npm install`
- - Execute `npm audit fix` (If necessary)
- - Execute `npm start`, Voilà !
+
+
+- Download .zip **or**  `git clone` this repository.
+
+- Execute `npm install`
 
-You have a navbar component template, a page template, image import, fonts import, and a folder architecture already done. Enjoy ;)  
+- Execute `npm audit fix` (If necessary)
+
+- Execute `npm start`, Voilà !
+
+
+
+You have a navbar component template, a pages templates (*error page in case of wrong url*) , image import, fonts import, and a folder architecture already done. Enjoy ;)
+
+
 
 ## Customization 🎨
 
-Change name & version in **package.json** : 
+
+
+Change name & version in **package.json** :
 
-    "name": "template",
-    "version": "0.0.0",
+
 
+"name": "template",
+
+"version": "0.0.0",
+
+
+
 
 Change the logos in :
 
-    /public/favicon.ico
-    /public/logo192.png
-    /public/logo512.png
+
+
+/public/favicon.ico
+
+/public/logo192.png
+
+/public/logo512.png
+
+
+
+& html in `/public/index.html` :
+
+
+
+<meta name="description" content="Web site created using create-react-app"/>
 
-& html in `/public/index.html`  :
+<title>React App</title>
 
-    <meta name="description" content="Web site created using create-react-app"/>
-    <title>React App</title>
 
 
 ## Dependencies 🧰
- - react
- - react-dom
- - react-router-dom
- - react-scripts
- - web-vitals
- - sass
 
+- [react](https://www.npmjs.com/package/react)
+
+- [react-dom](https://www.npmjs.com/package/react-dom)
+
+- [react-router-dom](https://www.npmjs.com/package/react-router-dom)
+
+- [react-scripts](https://www.npmjs.com/package/react-scripts)
+
+- [node-sass](https://www.npmjs.com/package/node-sass)

package.json

@@ -1,28 +1,21 @@
 {
   "name": "template",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.1.1",
-    "@testing-library/user-event": "^13.5.0",
-    "node-sass": "^7.0.1",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "node-sass": "^7.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.2",
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "build": "react-scripts build"
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "react-app"
     ]
   },
   "browserslist": {

src/components/Navbar/index.jsx

@@ -1,10 +1,12 @@
-import "./style.scss";
 import { Link } from "react-router-dom";
 import reactLogo from "assets/images/react.svg";
 
+// Styles
+import styles from "./styles.module.scss";
+
 const Navbar = () => (
-  <nav className="navbar">
-    <img className="logo-react" src={reactLogo} alt="react logo" />
+  <nav className={styles.__navbar}>
+    <img className={styles.__logo_react} src={reactLogo} alt="react logo" />
     <Link to="/">Home</Link>
     <Link to="/page-1">Page 1</Link>
     <Link to="/page-2">Page 2</Link>

src/components/Navbar/styles.module.scss

@@ -0,0 +1,28 @@
+@import "../../style/colors.scss";
+
+.__navbar {
+  background-color: $color-grey;
+  padding: 10px;
+
+  .__logo_react {
+    width: 35px;
+    margin: 0 10px;
+    filter: invert(100%) sepia(11%) saturate(6138%) hue-rotate(180deg)
+      brightness(107%) contrast(116%);
+    animation: rotate 5s linear infinite;
+  }
+
+  a {
+    color: $color-white;
+    font-weight: bold;
+    font-size: 20px;
+    margin: 0 5px;
+    &:hover {
+      color: $light-grey;
+    }
+  }
+}
+
+@keyframes rotate{
+  to{ transform: rotate(360deg); }
+}

src/index.js

@@ -1,11 +1,18 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./index.css";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+
+// Components
 import Navbar from "./components/Navbar";
+
+// Pages
 import Home from "./pages/Home";
 import Page1 from "./pages/Page1";
 import Page2 from "./pages/Page2";
+import ErrorPage from "./pages/ErrorPage";
+
+// Styles
+import "./index.scss";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
@@ -16,6 +23,7 @@ root.render(
         <Route path="/" element={<Home />} />
         <Route path="/page-1" element={<Page1 />} />
         <Route path="/page-2" element={<Page2 />} />
+        <Route path="*" element={<ErrorPage />} />
       </Routes>
     </Router>
   </React.StrictMode>

src/index.css → src/index.scss

@@ -7,4 +7,4 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+}

src/pages/ErrorPage/index.jsx

@@ -0,0 +1,10 @@
+// Styles
+import styles from "../../style/pages/error-page.module.scss";
+
+const ErrorPage = () => (
+  <section className={styles.__error_page}>
+    <h1>404 Not Found</h1>
+  </section>
+);
+
+export default ErrorPage;

src/pages/Home/index.jsx

@@ -1,9 +1,12 @@
+// Styles
+import styles from "../../style/pages/home.module.scss";
+
 const Home = () => {
   console.log("Welcome to the React template made by Nekå ✨");
   return (
-    <>
+    <section className={styles.__home}>
       <h1>Home</h1>
-    </>
+    </section>
   );
 };
 export default Home;

src/pages/Page1/index.jsx

@@ -1,9 +1,12 @@
+// Styles
+import styles from "../../style/pages/page1.module.scss";
+
 const Page1 = () => {
   //Your JS here.
   return (
-    <>
+    <section className={styles.__page1}>
       <h1>Page 1</h1>
-    </>
+    </section>
   );
 };
 export default Page1;

src/pages/Page2/index.jsx

@@ -1,9 +1,12 @@
+// Styles
+import styles from "../../style/pages/page2.module.scss";
+
 const Page2 = () => {
   //Your JS here.
   return (
-    <>
+    <section className={styles.__page2}>
       <h1>Page 2</h1>
-    </>
+    </section>
   );
 };
 export default Page2;

src/style/colors.scss

@@ -2,4 +2,4 @@ $color-black: #000000;
 $color-grey: #23272a;
 $dark-grey: #484848;
 $color-white: #ffffff;
-$light-grey: #99aab5;
+$light-grey: #99aab5;

src/style/fonts.scss

@@ -1,4 +1,4 @@
 @font-face {
   font-family: "Avenir Next";
   src: url("../assets/fonts/AvenirNextLTPro-Regular.otf");
-}
+}

src/style/main.scss

@@ -6,4 +6,4 @@ body {
   margin: 0;
   padding: 0;
   background-color: #2c2f33;
-}
+}

src/style/pages/error-page.module.scss

@@ -0,0 +1,7 @@
+.__error_page {
+    text-align: center;
+
+    h1 {
+        text-transform: uppercase;
+    }
+}

src/style/pages/home.module.scss

@@ -0,0 +1,7 @@
+.__home {
+    text-align: center;
+
+    h1 {
+        text-transform: uppercase;
+    }
+}

src/style/pages/page1.module.scss

@@ -0,0 +1,7 @@
+.__page1 {
+    text-align: left;
+
+    h1 {
+        text-transform: uppercase;
+    }
+}

src/style/pages/page2.module.scss

@@ -0,0 +1,7 @@
+.__page2 {
+    text-align: right;
+
+    h1 {
+        text-transform: uppercase;
+    }
+}