Typescript와 함께 NextJ, React 및 Redux를 사용하여 TIC-TAC-TOE 만들기

2283 단어 reduxreactnextjs
Tic Tac Toe
데모 링크: https://tictactoe-hu2mk80qr-phonist.vercel.app/
GitHub 저장소: https://github.com/phonist/tictactoe

프로젝트 정보



이것은 간단한 Tic Tac Toe 게임입니다.
이 게임은 Typescript와 함께 React 위에 NextJs를 사용하여 빌드됩니다.
그런 다음 redux, redux-thunk 및 material-UI가 있습니다.

빌드


  • React
  • NextJs
  • Typescript
  • Redux
  • Redux-thunk
  • Material-UI

  • 시작하기



    프로젝트는 주로 세 부분(UI, redux 로직 및 TypeScript 인터페이스)으로 분류됩니다.

    pages
    |-- index.tsx
    |-- _app.tsx
    |-- Board.tsx
    |-- Game.tsx
    |-- Square.tsx
    redux
    |-- reducers
    |-- actions
    |-- thunks
    |-- types
          |-- interfaces
    |-- reducers.ts
    |-- store.ts
    


  • 모든 UI 구성 요소는 pages 폴더에 보관됩니다..
  • 모든 redux 논리는 redux 폴더 안에 보관됩니다.
  • 모든 TypeScript 인터페이스는 typestypes/interfaces 폴더 안에 보관됩니다.

  • 전제 조건


  • 노드 - 16.2.0
  • 원사 - 1.22.17

  • 설치


  • 자식 클론https://github.com/phonist/tictactoe.git
  • cd틱택토
  • 원사 개발
  • localhost:3000으로 이동하여 개발 시작
  • 좋은 웹페이지 즐겨찾기