react mysql增删改查_React组件式编程Demo-用户的增删改查

1、项目结构

项目是基于webpack4, 参考 创建基本的webpack4.x项目

2、页面效果

初始化效果

添加功能

通过id删除

更新功能

3、代码

package.json

{"name": "react-helloworld","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"},"keywords": [],"author": "","license": "ISC","devDependencies": {"babel-core": "^6.26.3","babel-loader": "^7.1.5","babel-plugin-transform-runtime": "^6.23.0","babel-preset-env": "^1.7.0","babel-preset-react": "^6.24.1","babel-preset-stage-0": "^6.24.1","html-webpack-plugin": "^3.2.0","webpack": "^4.41.2","webpack-cli": "^3.3.10","webpack-dev-server": "^3.9.0"},"dependencies": {"prop-types": "^15.7.2","react": "^16.12.0","react-dom": "^16.12.0"}

}

webpack.config.js

var path = require('path')//导入在内存中自动生成index页面的插件

const HtmlWebPackPlugin = require('html-webpack-plugin')

const htmlPlugin= newHtmlWebPackPlugin({

template: path.join(__dirname,'./src/index.html'),

filename:'index.html' //生成的内存中首页的名称

});

module.exports={

mode:'development',

plugins: [

htmlPlugin

],

module: {

rules:[

{ test:/\.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/}

]

},

resolve: {

extensions: ['.js', '.jsx', '.json'], //这些文件的后缀可以省略

alias: {'@': path.join(__dirname, './src')

}

}

}

.babelrc

{"presets": ["env", "stage-0", "react"],"plugins": ["transform-runtime"]

}

index.html

主页