1.0.3

React-TS

Below are the Quicksi React typescript starters, their starter name, folder structures, and dependencies.

Typescript

contributions welcome

react-ts

HitCount

Generate a simple react typescript app.

# starter dependencies
  "dependencies": {
    "antd": "^3.9.2",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "react-router-dom": "^4.3.1",
    "react-scripts-ts": "2.17.0"
  },
  "devDependencies": {
    "@types/jest": "^23.3.2",
    "@types/node": "^10.9.4",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.7",
    "@types/react-router-dom": "^4.3.1",
    "typescript": "^3.0.3"
  }

Features

  • Simple react typescript starter
  • Typescript configuration for production and test
  • Jest testing framework

After generating this starter, you code will look like this View here

starter name

# starter name

    react-ts

react-ts-redux

HitCount

Generate a typescript react and redux app

# starter dependencies

  "dependencies": {
    "antd": "^3.9.2",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts-ts": "2.17.0"
  },
  "devDependencies": {
    "@types/jest": "^23.3.2",
    "@types/node": "^10.9.4",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.7",
    "@types/react-redux": "^6.0.9",
    "@types/react-router-dom": "^4.3.1",
    "typesafe-actions": "^2.0.4",
    "typescript": "^3.0.3"
  }

Features

  • Simple react typescript starter with redux
  • Demo redux, action, store and reducer
  • Typescript configuration for production and test

After generating this starter, you code will look like this View here

starter name

# starter name

    react-ts-redux

react-ts-webpack&jest

HitCount

Generates typescript webpack configuration, Jest for test. All configured.

# starter dependencies

  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "@types/jest": "^25.2.1",
    "@types/node": "^13.11.0",
    "@types/react": "^16.9.32",
    "@types/react-dom": "^16.9.6",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.4.2",
    "express": "^4.17.1",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.0.4",
    "image-webpack-loader": "^6.0.0",
    "jest": "^25.2.7",
    "node-sass": "^4.13.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-hot-loader": "^4.12.20",
    "rimraf": "^3.0.2",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "tslint": "^6.1.1",
    "typescript": "^3.8.3",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^4.2.2"
  },

Features

  • Webpack configuration for production, and development
  • Jest configuration with preprocessor and for test
  • Linting tslint

After generating this starter, you code will look like this View here

starter name

# starter name

    react-ts-webpack&jest

react-ts-webpack&redux&jest

HitCount

Generates typescript webpack configuration, Jest for test and redux application state manager configuration. All configured.

# starter dependencies

  "dependencies": {
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "react-redux": "5.0.6",
    "react-router-dom": "4.2.2",
    "react-router-redux": "5.0.0-alpha.9",
    "redux": "3.7.2",
    "redux-observable": "0.17.0",
    "reselect": "3.0.1",
    "rxjs": "5.5.6",
    "tslib": "1.8.1",
    "typesafe-actions": "1.1.2",
    "utility-types": "1.0.0-rc.2"
  },
  "devDependencies": {
    "@types/enzyme": "3.1.6",
    "@types/jest": "22.0.1",
    "@types/react": "16.0.34",
    "@types/react-dom": "16.0.3",
    "@types/react-hot-loader": "3.0.5",
    "@types/react-redux": "5.0.14",
    "@types/react-router-dom": "4.2.3",
    "@types/react-router-redux": "5.0.11",
    "@types/webpack": "3.8.2",
    "@types/webpack-dev-server": "2.9.2",
    "@types/webpack-env": "1.13.3",
    "enzyme": "3.3.0",
    "enzyme-adapter-react-16": "1.1.1",
    "html-webpack-plugin": "2.30.1",
    "husky": "0.14.3",
    "jest": "22.1.1",
    "react-hot-loader": "3",
    "rimraf": "2.6.2",
    "ts-jest": "22.0.1",
    "ts-loader": "3.2.0",
    "tslint": "5.9.1",
    "tslint-react": "3.4.0",
    "typescript": "2.6.2",
    "webpack": "2",
    "webpack-dashboard": "^0.4.0",
    "webpack-dev-server": "2.11.0"
  }

Features

  • No babel
  • Ultra performance
  • Setup for ts-loader and awesome-typescript-loader for comparison (check npm run dev or npm run dev:awesome)
  • React Hot Loader

After generating this starter, you code will look like this View here

starter name

# starter name

    react-ts-webpack&redux&jest
← PreviousNext →