2903710916/ts-react-webpack4

a starter-template with typescript, react, mobx and webpack4...

typescript + react + webpack4 starter

this is a simple starter looks like:

setup

$ npm i

build for development

$ npm run dev

build for production

$ npm run qa/prod

characteristics/packages

• webpack-4
• typescript
• react
• mobx
• react-router-4
• mobx-react-router
• component hot reload
• use ant design as UI framework
• import svg icon as a component by @svgr/webpack, there is an example in the doc of steamer-react-redux-ts
• async to load component by react-loadable
• import .(s)css auto generate .(s)css.d.ts by typings-for-css-modules-loader
• create component folder by customaddcomponents which is added to npm script npm run add

functional example

mobx-react-router

import * as React from 'react'
import { inject, observer } from 'mobx-react'
import { Button } from 'antd'

import * as styles from './index.scss'

interface Props {
    routerStore?: RouterStore;
}

function Test(props: Props) {
    const { routerStore } = props
    const gotoHome = () => {
        routerStore.push('/')
    }
    return (
        <div className={styles.login}>
            Login!!!
            <div className={styles.btnGroup}>
                <Button type="primary" onClick={gotoHome}>
                    go to page index directly
                </Button>
            </div>
        </div>
    )
}

export default inject('routerStore')(observer(Login))

live example

async to load component

import * as React from 'react'
import { hot } from 'react-hot-loader'
import Loadable from 'react-loadable'
import { HashRouter as Router, Switch, Route } from 'react-router-dom'

import PageLoading from '@components/PageLoading'

const Test = Loadable({
    loader: () => import(/* webpackChunkName: "test" */ './Test'),
    loading: PageLoading
})

const AppRouter = () => (
    <Router>
        <Switch>
            <Route exact path="/test" component={Test} />
        </Switch>
    </Router>
)

export default hot(module)(AppRouter)

live example

how to deploy with nginx

server {
       listen       9993;
       server_name  localhost:9993;

       location / {
             root   ~/Documents/react/ts-react-webpack4/dist/qa/;
             index  index.html index.htm;
       }
 }

the scaffold

steamer-react-redux-ts