stultuss / react-typescript-starter

This starter kit is designed to help you up and running react app for rapid development

React Typescript Starter

This starter kit is designed to help you up and running react app for rapid development

---

Introduction

Note that this project include Server-Side Rendering, Static code analysis, Testing Frameworks. If needed othes package, please fork this repository and add your own that meets your requirements.

Ideal for creating React apps from the scratch.

Contains

• Typescript 3.2
• React 16.8.6
• React Router 5.0.0
• Koa 2.6
• MobX 5.9

Build Tools

• Webpack 4
  • Webpack Bundle Analyzer
  • HTML Webpack Plugin
  • Fork TS Checker Plugin
  • Inline Manifest Webpack Plugin
  • Mini CSS Extract Plugin
  • Optimize CSS Assets Plugin
• Babel Loader 8.0
• Sass Loader 7.1
• PostCSS Loader 3.0
• React Hot Loader 4.3

Support

• Async loading of components
• Server-Side Rendering
• Testing Framework

Installation

$ npm install

How to use

Run

1. Quick start

$ npm start 							// Starting the development environment 

2. Bundle Anlyzer Report

$ npm run report

3. Test Framework

$ npm run test

4. Other Examples

$ npm run preview 		            // Starting the preview environment 
$ npm run prod  					// Starting the production environment 

Enable

1. Enable Server-Side Rendering

$ vi ./config/environments.js

export default {
  // ======================================================
  // Overrides when NODE_ENV === 'production'
  // ======================================================
  production: (config) => ({
    server_react_render: {
      enabled: true // Enable Server-Side Rendering
    },
  }),
};

2. Enable Async loading of components

$ vi ./src/containers/Page1/index.tsx

Please use react-loadable demo

import * as React from 'react';
import * as Loadable from 'react-loadable';

const LoadableComponent = Loadable({
    loader: () => import('./Loadable'),
    loading: () => <div>Loading...</div>
});

export default class LoadableApp extends React.Component {
    render() {
        return <LoadableComponent />;
    }
}

Deploy

$ npm run deploy

License

MIT