preface

Want to quickly start react multi-page applications?

How to make the project structure more reasonable?

Want to pick up Mobx fast?

Want to use TypeScript quickly?

Want to use Ant-Design with one click and quickly customize theme styles?

Yes!!

Here, inspired by Vue- CLI and create-React-app, I made a react scaffolding handy- CLI that lets you build projects with one click and get started quickly.

features

  • Easy to use, zero configuration

  • Selection of the rich features of (Ant Design, TypeScript, Mobx, EsLint, TsLint)

  • You can export webPack configurations to the project directory

  • Multi-page support

  • Provides multiple status management modes

  • With Ant-Design, it is very easy to customize the Ant-Design theme

  • Support code style verification when code is saved and when code is submitted

The installation

NPM install Handy -cli -g Install YARN Global add handy -CLICopy the code

The project address

use

handy create <new-app>

cd <new-app>

npm run start
Copy the code

preview

The manual

  • Folder Structure

  • Single And Multi Page

  • Eject

  • Linter

  • State Management

  • Use Ant Design

  • Styles And Modules

  • Proxy

Folder Structure

Run Handy Create You-app-name (e.g., ant-Design, ESLint, mobx) and handy- CLI will generate the following project structure

├ ─ ─ node_modules ├ ─ ─ public ├ ─ ─ modifyVars. Json ├ ─ ─ package. The json ├ ─ ─ the readme. Md ├ ─ ─ the eslintrc ├ ─ ─ the gitignore └ ─ ─ the SRC ├ ─ ─ The components │ ├ ─ ─ ResultItem │ │ └ ─ ─ ResultItem. Js │ └ ─ ─ Scroll │ └ ─ ─ Scroll. Js ├ ─ ─ modules │ └ ─ ─ mobxGitSearch │ ├ ─ ─ │ ├─ ├─ exercises │ ├─ Search │ ├─ index.js │ ├─ pages │ ├─ │ ├─ ├─ ├─ ├─ ├─ ├─ ├─ index.js │ ├─ ├─ index.js │ ├─ ├─Copy the code

In the SRC directory, which acts as a subdirectory

  • Components, the common components used by multiple routing pages, are placed here

  • Modules, each subfolder in modules represents a single routing page, such as the Dashboard page, the welcome page

  • Pages (multi-page folder), each sub-folder represents a single SPA project, mainly storing SPA entry files

  • Stores (Mobx stores)

  • utils

Pay attention to

The directories mentioned above are already configured in config.resolve.alias, so there is no need to specify relative paths in the code

in src/modules/mobxGitSearch/index.js

import {shake} from "utils"
Copy the code

not

in src/modules/mobxGitSearch/index.js

import {shake} from ".. /utils"
Copy the code

Single And Multi Page

After initializing the project with Handy – CLI, SRC/Pages only has a single index folder, which is a single page application, and it’s easy to add a new, separate single page

For example, create a doule12 folder under SRC/Pages

SRC ├── ├─ ├─ ├.js ├── ├.js ├─ index.jsin src/pages/doule12/index.js.

ReactDOM.render(
  <h1>double 12</h1>,
  document.getElementById("root"));if (module.hot) {
  module.hot.accept(() => {});
}
Copy the code

Restart the service and visit localhost:3000/doble12 to see the new page, which is the default single page

Eject

If you want to modify some webPack configuration, execute handy Eject in the project root directory to export the webPack configuration after making sure the code has been committed

Linter

Tslint and Eslint are supported

If you select Typescript when creating your project, only Tslint is provided for code validation. If Typescript is not selected, Eslint is provided as an option. Eslint provides Eslint with Airbnb config and Eslint with Prettier config. Airbnb config is recommended

To modify some of the validation rules, you can modify.eslintrc or tslint.json in the project root directory

Testing time

You can choose to validate your code when it is saved or submitted. It is better to validate your code when it is submitted for faster compilation. The configuration for submitting code validation is in package.json

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"}},"lint-staged": {
    "linters": {
      "*.{js,jsx}": [
        "eslint --fix"."git add"]},"ignore": [
      "**/build/**.js"]}Copy the code

State Management

Alternative state management modes

  • Normal(the build in Context API)

  • Mobx

  • Dva(under development))

Use Ant Design

Handy – CLI provides on-demand loading of Ant-Design, which can be used with zero configuration when selecting Ant-Design when creating a project

+ import { Pagination } from "antd";
+ <Pagination total={100} />
  <Search />
Copy the code

Customize the ant-Design style theme

If ant-Design is selected, there is a modifyvar. json file in the root directory of the project. The less style variables defined in this file can be assigned new values in modifyvar. json

Styles And Modules

Supports less, SASS,stylus and CSS Modules

Note: How do you want to use CSS modules? Style files should end with.module. CSS,.module.less,.module.sass,.module.styl

Proxy

Add the proxy field in package.json as follows

 "proxy": "http://localhost:4000",

 or

 proxy: {
  '/api': {
    target: '<url>',
    pathRewrite:{
      'api':' '
    },
    changeOrigin: true
  },
  '/foo': {
    target: '<other_url>'}}Copy the code

see more proxy options

The last

Welcome to try, BUG