Project creation for react+webpack+mobx

problem description

in the process of creating a project, the decorator syntax always indicates that it cannot be parsed

what methods have you tried

found a lot of configuration methods for supporting modifiers on the Internet, and there are a lot of them right away. Here is the code, but it always reports an error

.

related codes

.babelrc 

{
  "presets": ["env","react"],
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ]
}

.package.json 

{
  "name": "mobx-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "mobx": "^5.0.3",
    "mobx-react": "^5.2.3",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4",
    "webpack": "^4.16.1",
    "webpack-dev-server": "^3.1.4"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development --config build/webpack.config.js",
    "dev": "webpack --mode development --config build/webpack.config.js",
    "build": "webpack --mode production --config build/webpack.config.js"
  },
  "devDependencies": {
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-mobx": "^1.0.3",
    "html-webpack-plugin": "^3.2.0",
    "webpack-cli": "^3.0.8"
  },
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ]
}

error code 

ERROR in ./src/entry/main.js 8:4
Module parse failed: Unexpected character "@" (8:4)
You may need an appropriate loader to handle this file type.
| class Todo {
|     // id = Math.random();
>     @observable title;
|     @observable finished = false;
|     constructor(title){
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/entry/main.js main[1]

what result do you expect?

I hope that God can guide me to see if there is something wrong with my configuration, or if he can guide me to create a new react+webpack+mobx project in as much detail from scratch as possible. no, no, no.

Mobx
Mar.30,2021

webpack profile 

var path=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var utils = require('./utils');         // 
var ROOT = utils.fullPath('../');       // 
console.log(ROOT)
module.exports={
    entry:'./src/entry/main.js',
    output:{
        path: ROOT + '/dist',
        filename:'bundle.js'
    },
    loader: {
        rules: [{
            test: /\.js[x]?$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: [".js", ".jsx"]
    },
    plugins: [new HtmlWebpackPlugin({
        title: 'mobx-demo222',
        template: './src/entry/index.html',
        inject: 'head'
    })]
}

A problem with the configuration of the ui library css in .babelrc was introduced on demand before. There are many articles referenced by Baidu.
finally, the
@ decorator is configured in package.json and the
uses Ant Financial Services Group npm I antd-mobile@next-- save
URL: https://mobile.ant.design/ind.

.

introduce antd-mobile 's css npm i babel-plugin-import on demand-- save

configure to find this in package.json

"babel": {"presets": ["react-app"]},

/ / change single quotation marks to double quotation marks instead of double quotation marks and then open the page and you will find that you have configured demand loading "babel": {"presets": ["react-app"], "plugins": [["import", {"libraryName": "antd-mobile", "style": "css"}]},

redux uses npm I redux--save
uses npm I redux-thunk-- save asynchronous handling events to avoid store nesting redux default handling Synchronize async requires the use of redux-thunk intermediate key

download npm I react-redux-S (short for-- save) without using store.subscribe to submit data

this is a plug-in for Babel 6 to copy the old decorator behavior in Babel 5

npm I babel-plugin-transform-decorators-legacy-- save-dev modifier
configure in package.json:
" plugins ": [

  "transform-decorators-legacy",
  [
    "import",
    {
      "libraryName": "antd-mobile",
      "style": "css"
    }
  ]

]

Previous: When win10 uses plsql to connect to the database on the local area network, what if after a period of time (30 minutes? If you do not operate, you will "not respond" when you do it again.

Next: How does FabricJS prevent all objects from being selected?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1c26f18-33075.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1c26f18-33075.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?