Template Typescript React Project
Demo deploy at: reactts-boilerplate.netlify.app
This version is deprecated, It will be updated & changed soon. Learn more about React boiler plate
To use this template
-
Clone this project
-
Rename project as you want
-
Install dependencies from
package.jsonto your machine$ yarn # or $ npm install -
Run or build project
$ yarn start $ yarn build # or npm run start / npm run build -
Start coding
Login
username: tester
password: 123456
- Integrate ESlint, Prettier
- Styled-Component and CSS Module for CSS
- Using TypeScript
- Using Redux, React thunks
- Functional programming with React hooks
- Lazy load page
- Using ant design
- Using json-server to create fake server backend
- CI-CD with Travisci & Github actions
Click me to expand
.
├── LICENSE
├── package.json
├── public
│ ├── favicon.ico
│ ├── images
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── README.md
├── server
│ ├── db
│ │ └── db.json
│ └── routes.json
├── src
│ ├── App
│ │ └── App.tsx
│ ├── assets
│ │ ├── images
│ │ └── scss
│ │ ├── _config.scss
│ │ ├── _fonts.scss
│ │ ├── _footer.scss
│ │ ├── _header.scss
│ │ ├── _home.scss
│ │ ├── index.scss
│ │ ├── _login.scss
│ │ ├── _responsive.scss
│ │ └── _staticPages.scss
│ ├── components
│ │ ├── Auth
│ │ │ ├── Auth.actions.ts
│ │ │ ├── Auth.constants.ts
│ │ │ ├── Auth.reducers.ts
│ │ │ ├── Auth.thunks.ts
│ │ │ ├── Login.tsx
│ │ │ ├── Profile.tsx
│ │ │ └── Register.tsx
│ │ ├── Error
│ │ │ └── 404.tsx
│ │ ├── Footer
│ │ │ └── index.tsx
│ │ ├── Header
│ │ │ ├── index.tsx
│ │ │ ├── LeftMenu.tsx
│ │ │ └── RightMenu.tsx
│ │ ├── Home
│ │ │ ├── AuthLinks.tsx
│ │ │ ├── GuestLinks.tsx
│ │ │ └── index.tsx
│ │ ├── Loading
│ │ │ ├── index.tsx
│ │ │ └── Loading.styles.ts
│ │ ├── Products
│ │ │ ├── Product.actions.ts
│ │ │ ├── Product.constants.ts
│ │ │ ├── ProductForm.tsx
│ │ │ ├── ProductItem.tsx
│ │ │ ├── ProductList.tsx
│ │ │ ├── Product.reducers.ts
│ │ │ └── Product.thunks.ts
│ │ └── StaticPages
│ │ ├── About.tsx
│ │ ├── Contact.tsx
│ │ ├── Demo.option.1.tsx
│ │ ├── Demo.option.2.tsx
│ │ ├── Feature.option.1.tsx
│ │ └── Feature.option.2.tsx
│ ├── constants
│ │ ├── paths.ts
│ │ ├── products.ts
│ │ └── urls.ts
│ ├── hooks
│ │ └── usePrevious.tsx
│ ├── index.tsx
│ ├── pages
│ │ ├── AuthPages
│ │ │ ├── LoginPage.tsx
│ │ │ ├── ProfilePage.tsx
│ │ │ └── RegisterPage.tsx
│ │ ├── ErrorPages
│ │ │ └── 404Pages.tsx
│ │ ├── HomePages
│ │ │ └── HomePage.tsx
│ │ ├── layouts
│ │ │ └── MainLayout.tsx
│ │ ├── ProductPages
│ │ │ ├── ProductEditPage.tsx
│ │ │ ├── ProductItemPage.tsx
│ │ │ ├── ProductListPage.tsx
│ │ │ └── ProductNewPage.tsx
│ │ └── StaticPages
│ │ ├── AboutPage.tsx
│ │ ├── ContactPage.tsx
│ │ ├── Demo1Page.tsx
│ │ ├── Demo2Page.tsx
│ │ ├── Feature1Page.tsx
│ │ └── Feature2Page.tsx
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ ├── routes
│ │ ├── index.tsx
│ │ └── PrivateRoute.tsx
│ ├── setupTests.ts
│ ├── store
│ │ ├── index.ts
│ │ └── reducers.ts
│ ├── @types
│ │ ├── actions.d.ts
│ │ ├── alert.d.ts
│ │ ├── api.d.ts
│ │ ├── files.d.ts
│ │ ├── product.d.ts
│ │ ├── reducer.d.ts
│ │ └── user.d.ts
│ └── utils
│ └── helper.js
├── tsconfig.json
└── yarn.lock
- @types: Declare modules, interface, type for TypeScript
action.d.ts: Action Interface for Reduxapi.d.ts: Response interface for apifiles.d.ts: Declare modules for images, videos, css formats...reducer.d.ts: return type of reducerproduct.d.ts,user.d.ts: return interface of item in project
- api: services, contains functions get, post .. api (axios e.g)
- App: component App
- assets: images, videos, files, …
- components: contains folders components
- constants: constant, enum
- helpers: functions helpers
- hooks: contains hooks using
- pages: pages of project
- routes: private routes and public routes of project
- store: store of Redux and root reducers
- Home: '/': Show landing page before login
- Feature - Option 1: '/feature1'
- Feature - Option 2: '/feature2'
- Demo - Option 1: '/demo1'
- Demo - Option 2: '/demo1'
- About: '/about'
- Contact: '/about'
- Login: '/login'
- Register: '/signup'
- 404: Page not found
- Profile: '/profile'
- Products: '/' or '/products': Show list of products
- Show Product: '/products/:id
- Create Product: '/products/new
- Edit Product: '/products/:id/edit
- Update Product: '/products/:id
- Delete Product: button click