README.md

React SPA template

📢

1. GOOD for novices who dig up the principle about react-router and redux, fundamental syntax use of redux, NO highly abstract.
2. MOST IMPORTANT: The purpose of this template project is to show you principles of redux & react-router, you can expand it on your demand. Such as writing Actions into a seperate file, integrated with Ant Design, code splitting and so on.

📦 Usage：

Webpack will bundle files into /build folder

npm run dev     // Develop command
npm run build   // Build command

// Build environment
node v14.16.0
webpack v5.26.2
@Babel v7.13.10

👾 Code Base:

1. React v17.0.1
2. Redux v4.0.5
3. React-Router-Dom v5.2.0

🍩 Features:

1. React simple page application;
2. Broswer router;
3. Storage data by redux;
4. Precompile css by stylus;
5. HTTP request using async/await;
6. Arrangement files according to DDD(Domain-Driven Design): all module files used under a URL will be stored in the same folder;
7. Bundled by webpack 4;
8. Support ES6 and ES7;

⚓ File Structure:

./src
├── fonts
│   └── fonts.styl
│
├── htmlTemplates
│   └── app.ejs
│
├── common     // common module include js, css, component etc.
│   ├── com
│   │   ├── Header
│   │   │   ├── index.js
│   │   │   └── css.styl
│   │   ├── Footer
│   │   │   ├── index.js
│   │   │   └── css.styl
│   │   ├── Sidebar
│   │   │   ├── index.js
│   │   │   └── css.styl
│   │   ├── Loading
│   │       ├── index.js
│   │       └── css.styl
│   ├── res               // static resources
│   │   ├── copy          // copy to /build directly
│   │   │   └── thumb.jpg
│   │   ├── 1.jpg
│   │
│   ├── style
│   │   └── reset.styl
│   └── utils
│       ├── wxShare.js
│       └── index.js
│
├── pages   // DDD(domain drive design)
│   ├── 404       // 404 React component
│   │   ├── css.styl 
│   │   └── index.js
│   │
│   ├── NewsList  // NewsList React component match https://example.com/list
│   │   ├── res/        // resource folder(img etc.)
│   │   ├── api.js
│   │   ├── reducer.js 
│   │   ├── css.styl 
│   │   └── index.js
│   │
│   └── Home      // Home React component match https://example.com/home
│       ├── Component1  // component1 only used by Home component
│       │   ├── index.js
│       │   └── css.styl
│       ├── res/
│       │   └── ajax-loader.gif
│       ├── api.js      // ajax url using async/await
│       ├── reducer.js  // every domain has only one reducer, define state and action
│       ├── css.styl    // main css
│       └── index.js    // Home compoent entry
│
├── vendor
│   └── SplitText.min.js
│
├── app.js       // application entry
└── reducers.js  // assemble all components' reducer


/** 
 * config your app in one file to saving your time and making you happy
 */
/config.js
{
    // Deploy
    public_path: '/home'
    ,port: 8686
    ,plugin_url: ''

    // HTML meta data
    ,page:{
        title: 'NULL'
        ,desc: ''
        ,image: ''
        ,url: 'https://url/article/new-era-for-china.html'
        ,thumb: 'https://url/article/images/thumb.jpg'
    }

    // routes
    ,route:{
        home:{
            path: '/home'
        },
        list: {
            path: '/home/list'
        },
        nav1:{
            path: '/nav1'
        },
        nav2:{
            path: '/nav2'
        }
    }

    // request urls
    ,io:{
        home: {
            news_json: 'https://url/home_data.json'
        },
        list: {
            all_news_list: 'https://url/list_data.json'
        }
    }
}