├── .eslintrc.cjs
├── .gitignore
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
└── vite.svg
├── src
├── App.css
├── App.jsx
├── assets
│ └── react.svg
├── components
│ ├── Dashboard.jsx
│ └── Landing.jsx
├── context.jsx
├── index.css
├── main.jsx
└── store
│ └── atoms
│ ├── count.js
│ └── count.jsx
└── vite.config.js
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "week-7-1",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0",
15 | "react-router-dom": "^6.21.2",
16 | "recoil": "^0.7.7"
17 | },
18 | "devDependencies": {
19 | "@types/react": "^18.2.43",
20 | "@types/react-dom": "^18.2.17",
21 | "@vitejs/plugin-react": "^4.2.1",
22 | "eslint": "^8.55.0",
23 | "eslint-plugin-react": "^7.33.2",
24 | "eslint-plugin-react-hooks": "^4.6.0",
25 | "eslint-plugin-react-refresh": "^0.4.5",
26 | "vite": "^5.0.8"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/100xdevs-cohort-2/week-7/a911fb8b118d7f27e540846f3ac3c2b3c82f92dc/src/App.css
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useContext, useMemo, useState } from "react"
2 | import { CountContext } from "./context";
3 | import { RecoilRoot, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
4 | import { countAtom, evenSelector } from "./store/atoms/count";
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 | )
14 | }
15 |
16 | function Count() {
17 | console.log("re-render");
18 | return
19 |
20 |
21 |
22 | }
23 |
24 | function CountRenderer() {
25 | const count = useRecoilValue(countAtom);
26 |
27 | return
28 |
29 | {count}
30 |
31 |
32 |
33 | }
34 |
35 | function EvenCountRenderer() {
36 | const isEven = useRecoilValue(evenSelector);
37 |
38 | return
39 | {isEven ? "It is even" : null}
40 |
41 | }
42 |
43 | function Buttons() {
44 | const setCount = useSetRecoilState(countAtom);
45 | console.log("buttons re-rendererd");
46 |
47 | return
48 |
51 |
52 |
55 |
56 | }
57 |
58 | export default App
59 |
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Dashboard.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react"
2 |
3 | export default function Dashboard() {
4 |
5 | return
6 | Dashboard page
7 |
8 | }
9 |
--------------------------------------------------------------------------------
/src/components/Landing.jsx:
--------------------------------------------------------------------------------
1 |
2 |
3 | export default function Landing() {
4 | return
5 | Landing page
6 |
7 | }
--------------------------------------------------------------------------------
/src/context.jsx:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 |
3 | export const CountContext = createContext(0);
4 |
5 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/100xdevs-cohort-2/week-7/a911fb8b118d7f27e540846f3ac3c2b3c82f92dc/src/index.css
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/src/store/atoms/count.js:
--------------------------------------------------------------------------------
1 | import { createContext, useMemo } from "react";
2 | import { atom, selector } from "recoil";
3 |
4 | export const countAtom = atom({
5 | key: "countAtom",
6 | default: 0
7 | });
8 |
9 | export const evenSelector = selector({
10 | key: "evenSelector",
11 | get: ({get}) => {
12 | const count = get(countAtom);
13 | return count % 2;
14 | }
15 | });
16 |
17 | // Todo creation application with filtering logic
18 | // todos, filter
--------------------------------------------------------------------------------
/src/store/atoms/count.jsx:
--------------------------------------------------------------------------------
1 | import { atom } from "recoil";
2 |
3 | export const countAtom = atom({
4 | key: "countAtom",
5 | default: 0
6 | });
7 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
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 |
--------------------------------------------------------------------------------