tduyng/react-typescript-example

Template React Project using create-react-app & TypeScript

TypeScript React Boilerplate

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

---

• TypeScript React Boilerplate
  • Installation
  • Technologies
  • Project structure
    • src folder
  • Project Routes
    • Public routes
    • Private routes (need auth)

Installation

To use this template

• Clone this project

• Rename project as you want

• Install dependencies from package.json to 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

Technologies

• 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

Project structure

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

---

src folder

• @types: Declare modules, interface, type for TypeScript
  • action.d.ts: Action Interface for Redux
  • api.d.ts: Response interface for api
  • files.d.ts: Declare modules for images, videos, css formats...
  • reducer.d.ts: return type of reducer
  • product.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

Project Routes

Public routes

• 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

Private routes (need auth)

• 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