Skip to content

Commit

Permalink
fix: source-map-explorer and setting up react-router-dom
Browse files Browse the repository at this point in the history
  • Loading branch information
201flaviosilva committed Apr 10, 2023
1 parent 561272d commit f8ea990
Show file tree
Hide file tree
Showing 7 changed files with 76 additions and 56 deletions.
38 changes: 13 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,9 @@ My goal with this project is to learn how to use multiple FE technologies togeth
- [x] [![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)](https://vitejs.dev/)
- [x] [![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white)](https://eslint.org/)
- [x] [![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
- [ ] [![Styled Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white)](https://styled-components.com/)
- [ ] [![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white)](https://redux.js.org/)
- [ ] [![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)](https://reactrouter.com/en/main)
- [x] [![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)](https://reactrouter.com/en/main)
- [ ] [![Jest](https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white)](https://jestjs.io/)[![Testing-Library](https://img.shields.io/badge/-TestingLibrary-%23E33332?style=for-the-badge&logo=testing-library&logoColor=white)](https://testing-library.com/)
- [ ] [![Cypress](https://img.shields.io/badge/-cypress-%23E5E5E5?style=for-the-badge&logo=cypress&logoColor=058a5e)](https://www.cypress.io/)
- [ ] [![Storybook](https://img.shields.io/badge/-Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)](https://storybook.js.org/)
Expand All @@ -41,24 +42,6 @@ My goal with this project is to learn how to use multiple FE technologies togeth
- [ ] ![GitHub Actions](https://img.shields.io/badge/github%20actions-%232671E5.svg?style=for-the-badge&logo=githubactions&logoColor=white)


# React To Do List App

## Description

This is the React implementation of the To Do List

## MVP

- [x] Add an individual task;
- [x] Search bar to filter the task with the current input;
- [x] Filters (complete, incomplete);
- [x] Save/load state to/from localstorage;
- [x] Individually:
- [X] Remove
- [X] Mark as complete
- [x] Edit;
- [x] Clear all tasks (with a confirmation modal);

## Make it run

### Clone and change directory
Expand Down Expand Up @@ -88,9 +71,14 @@ npm start

## Available Commands

| Command | Description |
| --------------- | ------------------------------------------------------------------------------- |
| `npm run clear` | Delete the `build` and `out` and `dist` folder |
| `npm i` | Install project dependencies |
| `npm start` | Start project and open web server running project |
| `npm run build` | Builds code bundle with production settings (minification, uglification, etc..) |
| Command | Description |
| ------------------ | ------------------------------------------------------------------------------- |
| `npm run clear` | Delete the `build` and `out` and `dist` folder |
| `npm i` | Install project dependencies |
| `npm start` | Start project and open web server running project |
| `npm run build` | Builds code bundle with production settings (minification, uglification, etc..) |
| `npm run preview` | Start a local development server with Vite and preview the application |
| `npm run lint` | Fix code styles and some problems |
| `npm run analyze` | Builds the project and analyzes the size code bundle |
| `npm run depcheck` | Prints the not used dependencies |
| `npm run bump` | Updates the package version and creates a new tag on github |
10 changes: 6 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,16 @@
"start": "vite --open",
"build": "tsc && vite build",
"preview": "vite preview",
"analyze": "npm run build && source-map-explorer 'build/static/js/*.js'",
"lint": "eslint ./src/ --fix",
"analyze": "npm run build && source-map-explorer 'dist/assets/*.js'",
"depcheck": "depcheck",
"bump": "npm run build && np --no-tests --any-branch --no-publish"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"react-icons": "^4.8.0",
"react-router-dom": "^6.10.0"
},
"devDependencies": {
"@types/react": "^18.0.33",
Expand All @@ -28,7 +30,7 @@
"@typescript-eslint/parser": "^5.57.1",
"@vitejs/plugin-react": "^3.1.0",
"depcheck": "^1.4.3",
"eslint": "^8.37.0",
"eslint": "^8.38.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jest": "^27.2.1",
Expand All @@ -38,7 +40,7 @@
"eslint-plugin-react-hooks": "^4.6.0",
"jest": "^29.5.0",
"source-map-explorer": "^2.5.3",
"typescript": "^4.9.5",
"typescript": "^5.0.4",
"vite": "^4.2.1",
"vite-plugin-eslint": "^1.8.1"
},
Expand Down
41 changes: 14 additions & 27 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,20 @@
import { useState } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import Account from "./Pages/Account";
import Home from "./Pages/Home";
import NotFound from "./Pages/NotFound";

export default function App() {
const [count, setCount] = useState(0);

return (
<div className="App">
<div>
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://reactjs.org" target="_blank" rel="noreferrer">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</div>
<BrowserRouter>
<Routes>
<Route index path="/" element={<Home />} />
<Route path="account" element={<Account />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}



5 changes: 5 additions & 0 deletions src/Pages/Account/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default function Account() {
return (
<div>Account</div>
);
}
32 changes: 32 additions & 0 deletions src/Pages/Home/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { useState } from "react";
import reactLogo from "../../assets/react.svg";
import viteLogo from "/vite.svg";

export default function Home() {
const [count, setCount] = useState(0);

return (
<div className="App">
<div>
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://reactjs.org" target="_blank" rel="noreferrer">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</div>
);
}
5 changes: 5 additions & 0 deletions src/Pages/NotFound/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default function NotFound() {
return (
<>404</>
);
}
1 change: 1 addition & 0 deletions vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export default defineConfig({
plugins: [react(), eslint()],
base: "./",
build: {
sourcemap: true,
assetsInlineLimit: 0,
},
resolve: {
Expand Down

0 comments on commit f8ea990

Please sign in to comment.