Skip to content

integrify-group-3/money_frontend_web

Repository files navigation

Fast Track React app template with TypeScript & Redux

This project was bootstrapped with Create React App.

Installation

You should use either npm or yarn but not both. It's recommeded to use yarn

This template already comes with all needed packages. In case you want to install manually, check the dependencies in package.json file. To install, run:

yarn install

Features

  • Redux
  • Redux-thunk
  • Redux-saga
  • React-router
  • Prettier
  • ESLint
  • Husky & lint-staged

The template comes with ready-made code for a very simple working demo (products list). To play around with it, run:

yarn start

Modify or add new features

Follow the file/folder structure as explained below to make necessary changes. For Redux, most of the time, you can copy existing files, modify something in there to make a new feature.

Folder structure

  • src/components: React components. For each component, it's better to put it in a separate folder. For example:

    src/components/Button/index.tsx
    src/components/Button/Button.scss
    src/components/Button/Button.stories.tsx
    src/components/Button/Button.test.tsx
    
  • src/hooks: Custom hooks. For example:

    src/hooks/useCountries.ts
    src/hooks/useUser.ts
    
  • src/redux: Everything (such as actions, reducers, sagas etc) related to Redux

    • src/redux/actions: For Redux actions
    • src/redux/reducers: For Redux reducers
    • src/redux/sagas: For Redux sagas
    • src/redux/store.ts: The Redux store

    If there are multiple un-related features, split action/reducer/saga into different files. For example:

    src/redux/actions/product.ts
    src/redux/actions/order.ts
    src/redux/actions/ui.ts
    
    src/redux/reducers/product.ts
    src/redux/reducers/order.ts
    src/redux/actions/ui.ts
    
    src/redux/sagas/product.ts
    src/redux/sagas/order.ts
    src/redux/sagas/ui.ts
    
  • src/pages: Pages (or views) when using React router. For example:

    src/pages/Home.tsx
    src/pages/Product.tsx
    

    If there are more files than just page's *.tsx, a folder structure can be used. For example:

    src/pages/Home/index.tsx
    src/pages/Home/Home.scss
    
  • src/types.ts: TypeScript's type definitions. For small apps, you can put definitions of all types, interfaces etc and even Redux's actions, action creators, states here.

  • src/Routes.tsx: Defines all the React router routes to different pages.

This template is suitable for rather small apps. For bigger apps, a better & more organized way is to split the folder structure into features, something like:

sr/feature1
--components
--redux
----action.ts
----reducer.ts
----saga.ts

src/feature2
--components
--redux
----action.ts
----reducer.ts
----saga.ts

src/redux
--action.ts
--reducer.ts
--saga.ts
--store.ts

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published