([]);
13 | const [error, setError] = useState('');
14 |
15 | useEffect(() => {
16 | axios
17 | .get('https://jsonplaceholder.typicode.com/todos')
18 | .then((res) => setTodos(res.data))
19 | .catch((error) => setError(error));
20 | }, []);
21 |
22 | if (error) return {error}
;
23 |
24 | return (
25 |
26 | {todos.map((todo) => (
27 | -
28 | {todo.title}
29 |
30 | ))}
31 |
32 | );
33 | };
34 |
35 | export default TodoList;
36 |
--------------------------------------------------------------------------------
/src/routing/About.tsx:
--------------------------------------------------------------------------------
1 | const About = () => {
2 | return About
;
3 | };
4 |
5 | export default About;
6 |
--------------------------------------------------------------------------------
/src/routing/ContactPage.tsx:
--------------------------------------------------------------------------------
1 | const ContactPage = () => {
2 | return (
3 |
11 | );
12 | };
13 |
14 | export default ContactPage;
15 |
--------------------------------------------------------------------------------
/src/routing/ErrorPage.tsx:
--------------------------------------------------------------------------------
1 | const ErrorPage = () => {
2 | return (
3 | <>
4 | Oops...
5 | Sorry, an unexpected error has occurred.
6 |
7 | );
8 | };
9 |
10 | export default ErrorPage;
11 |
--------------------------------------------------------------------------------
/src/routing/HomePage.tsx:
--------------------------------------------------------------------------------
1 | const HomePage = () => {
2 | return (
3 | <>
4 |
5 | Lorem ipsum dolor sit amet consectetur, adipisicing elit.
6 | Incidunt, mollitia!
7 |
8 | Users
9 |
10 | );
11 | };
12 |
13 | export default HomePage;
14 |
--------------------------------------------------------------------------------
/src/routing/Layout.tsx:
--------------------------------------------------------------------------------
1 | import NavBar from './NavBar';
2 |
3 | const Layout = () => {
4 | return (
5 | <>
6 |
7 |
8 |
9 | );
10 | };
11 |
12 | export default Layout;
13 |
--------------------------------------------------------------------------------
/src/routing/LoginPage.tsx:
--------------------------------------------------------------------------------
1 | const LoginPage = () => {
2 | return Login
;
3 | };
4 |
5 | export default LoginPage;
6 |
--------------------------------------------------------------------------------
/src/routing/NavBar.tsx:
--------------------------------------------------------------------------------
1 | const NavBar = () => {
2 | return (
3 |
27 | );
28 | };
29 |
30 | export default NavBar;
31 |
--------------------------------------------------------------------------------
/src/routing/UserDetailPage.tsx:
--------------------------------------------------------------------------------
1 | const UserDetailPage = () => {
2 | return User
;
3 | };
4 |
5 | export default UserDetailPage;
6 |
--------------------------------------------------------------------------------
/src/routing/UserListPage.tsx:
--------------------------------------------------------------------------------
1 | const UserListPage = () => {
2 | const users = [
3 | { id: 1, name: 'Mosh' },
4 | { id: 2, name: 'John' },
5 | { id: 3, name: 'Alice' },
6 | ];
7 | return (
8 |
9 | {users.map((user) => (
10 | -
11 | {user.name}
12 |
13 | ))}
14 |
15 | );
16 | };
17 |
18 | export default UserListPage;
19 |
--------------------------------------------------------------------------------
/src/routing/hooks/useAuth.ts:
--------------------------------------------------------------------------------
1 | const useAuth = () => ({ user: { id: 1, name: 'Mosh' } });
2 |
3 | // const useAuth = () => ({ user: null });
4 |
5 | export default useAuth;
6 |
--------------------------------------------------------------------------------
/src/state-management/Counter.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | const Counter = () => {
4 | const [value, setValue] = useState(0);
5 |
6 | return (
7 |
8 | Counter ({value})
9 |
15 |
21 |
22 | );
23 | };
24 |
25 | export default Counter;
26 |
--------------------------------------------------------------------------------
/src/state-management/HomePage.tsx:
--------------------------------------------------------------------------------
1 | import TaskList from './TaskList';
2 |
3 | const HomePage = () => {
4 | return ;
5 | };
6 |
7 | export default HomePage;
8 |
--------------------------------------------------------------------------------
/src/state-management/LoginStatus.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | const LoginStatus = () => {
4 | const [user, setUser] = useState('');
5 |
6 | if (user)
7 | return (
8 | <>
9 |
15 |
16 | );
17 | return (
18 |
23 | );
24 | };
25 |
26 | export default LoginStatus;
27 |
--------------------------------------------------------------------------------
/src/state-management/NavBar.tsx:
--------------------------------------------------------------------------------
1 | import LoginStatus from './LoginStatus';
2 |
3 | const NavBar = () => {
4 | return (
5 |
9 | );
10 | };
11 |
12 | export default NavBar;
13 |
--------------------------------------------------------------------------------
/src/state-management/TaskList.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | interface Task {
4 | id: number;
5 | title: string;
6 | }
7 |
8 | const TaskList = () => {
9 | const [tasks, setTasks] = useState([]);
10 |
11 | return (
12 | <>
13 |
24 |
25 | {tasks.map((task) => (
26 | -
30 | {task.title}
31 |
39 |
40 | ))}
41 |
42 |
43 | );
44 | };
45 |
46 | export default TaskList;
47 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "module": "ESNext",
13 | "moduleResolution": "Node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"],
20 | "references": [{ "path": "./tsconfig.node.json" }]
21 | }
22 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "module": "ESNext",
5 | "moduleResolution": "Node",
6 | "allowSyntheticDefaultImports": true
7 | },
8 | "include": ["vite.config.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------