Skip to content
Scalable starter boilerplate for React applications
TypeScript JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test-config
.editorconfig
.gitattributes
.gitignore
.gitlab-ci.yml
.prettierignore
.prettierrc
.stylelintrc
.travis.yml
LICENSE
README.md
package.json
renovate.json
tsconfig.json
tslint.json
webpack.config.ts
yarn.lock

README.md

GitHub issues GitHub last commit Build Status Analytics

React Template

Opinionated React starter template using TypeScript, Redux, React Router, Redux Saga, SCSS, PostCSS and more, offering PWA and offline capabilities and many more.

Dependencies

In order to use this setup you need to have installed the following dependencies:

  1. Node - min v8.15.0
  2. NPM - min v5.6.0 or
  3. Yarn - min v1.3.2
  4. Bash terminal (Default on OSX/Linux, GitBash or similar on Windows)

Download

You can download this setup directly and extract it.

Then navigate to the react-template folder and proceed with the rest of the instructions.

Install

yarn

#or

npm i

Develop

yarn start

# or

npm start

Build

yarn build

# or

npm run build

Details

JS

  1. Folder structure:

    • assets/ - all fonts, images, videos, etc.
    • components/ - stateless components.
    • containers/ - statefull components.
    • utilities/ - helpers and utility functions
    • app.scss - Application's global SCSS entry point
    • app.tsx - Application's main component
    • custom.d.ts - Custom type definitions
    • index.html - Application's HTML file
    • index.tsx - The main entry point
    • loadables.tsx - Code split and lazy loaded components
    • reducers.js - Application's root reducer
    • sagas.js - Application's sagas
    • store.js - Application's Redux store
  2. Latest EcmaScript support

    • Usage of the latest features in EcmaScript
    • Using TypeScript to transpile to ES5
    • Minification of the bundled file
    • Source maps
  3. Webpack aliases: Checkout the aliases property in the webpack.config.ts file.

  4. SCSS usage.

  5. Lint your files: ESLint and Stylelint included

  6. Tests using Jest. The Test environment has been configured so you don't have to

  7. Offline first - using Offline Plugin to cache important files and assets

  8. PWA ready - Install as a native app on Android and iOS

  9. Code splitting and lazy loading

Supported Browsers

This setup uses Browserslist to target browsers.

The default list of supported browsers is listed in the package.json file:

{
	"browserslist": ["> 1%", "last 2 versions"]
}

This means that supported browsers vary based on current usage data and current browser versions.

In general, this setup supports the two most recent versions of all browsers.

LICENSE

MIT

You can’t perform that action at this time.