Projects/Fretboard (8) 썸네일형 리스트형 8. Getting Started with the Scale Page Organize different page states in separate Redux Slices fretboardSlice.tsx Contains states about the basic fretboard configuration. Shared across pages. import { createSlice, PayloadAction} from '@reduxjs/toolkit'; import { Accidental } from '../util/enums'; export interface FretboardState { tuning: string[] numStrings: number numFrets: number accidental: Accidental } const initialState: Fretboa.. 7. Refactor code using Redux + finish up Interval Page Refactored file structure Create 2 files: (1) fretboardSlice.tsx, and (2) store.tsx in /frontend/src/redux Install Redux In /frontend npm install @reduxjs/toolkit react-redux redux app.tsx Wrap the entire app component with Provider, allowing every component of the app the access the global state created using Redux import { BrowserRouter, Routes, Route } from "react-router-dom"; import NavBar f.. 6. Redux Basics Problem with current design The fretboard configuration (root, selected intervals) state is used throughout the components like Fretboard, String and Fret, but this state gets passed down as props in each of the component, making state management difficult. Goal: refactor the code so that we use Redux to manage the fretboard state Solution: Use Redux Redux is a GLOBAL state It is useful when: yo.. 5. Fretboard Design and Logic Design Overview Fretboard.tsx File that generates Fretboard component Fretboard Component Takes FretboardProps, consisting of states that determines the overall setting of the fretboard such as the selected root note, intervals, display mode. export interface FretboardProps { rootNote: string selectedIntervals: Set, displayMode: DisplayMode, noteToInterval: {[key: string]: string} } noteToInterv.. 4. Creating Navigation Bar mui AppBar https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. mui.com use fields from routes.tsx to add headers and on click nav functionality {routes.map((r) => ( { handleCloseNavMenu(); navigate(r.path) }} sx={{ my: 2, color: textColor,.. 3. Creating Homepage install material ui and other packages restart npm after installation npm install @mui/material @emotion/react @emotion/styled npm install @fontsource/roboto mui documentation https://mui.com/material-ui/getting-started/installation/ Installation - Material UI Install Material UI, the world's most popular React UI framework. mui.com Routes.tsx import Homepage from "./pages/Homepage"; import Fret.. 2. Setting up routes install react-router-dom in /frontend npm install react-router-dom /frontend/src/routes.tsx import Homepage from "./pages/Homepage"; import FretMemGamePage from "./pages/FretMemGamePage"; import ScalePage from "./pages/ScalePage"; const routes = [ { path: '/', element: }, { path: '/fretmemgame', element: }, { path: '/scale', element: }, ] export default routes; created page components under /fro.. 1. Setting up Typescript React + Node Repo https://github.com/JiwooL0920/Fretboard.git GitHub - JiwooL0920/Fretboard Contribute to JiwooL0920/Fretboard development by creating an account on GitHub. github.com Setup Frontend Create react app npx create-react-app frontend --template typescript Run frontend server npm start Frontend running on http://localhost:3000/ Create tsconfig.json { "compilerOptions": { "module": "NodeNext", "mod.. 이전 1 다음
