【菜鸟搭建react项目之路10】【react】一个完整的react项目demo
我的react项目搭好啦，感觉可以开始写代码了。下面是完整的配置和内容代码，我把认为比较有用的部分贴出来，欢迎大家指教～
目录：
package.json配置：
1 { 2 "name": "my-react-project", 3 "version": "1.0.0", 4 "description": "", 5 "main": "./main.js", 6 "dependencies": { 7 "babel-cli": "^6.26.0", 8 "babel-core": "^6.26.3", 9 "babel-preset-env": "^1.7.0", 10 "babel-preset-es2015": "^6.24.1", 11 "babel-preset-react": "^6.24.1", 12 "babel-preset-stage-0": "^6.24.1", 13 "css-loader": "^6.5.1", 14 "html-webpack-plugin": "^4.5.2", 15 "react": "^17.0.2", 16 "react-dom": "^17.0.2", 17 "style-loader": "^3.3.1", 18 "uuid": "^8.3.2", 19 "webpack": "^4.46.0", 20 "webpack-dev-server": "^4.5.0" 21 }, 22 "devDependencies": { 23 "babel-loader": "^7.1.5", 24 "webpack-cli": "^4.9.1" 25 }, 26 "scripts": { 27 "dev": "webpack-dev-server --mode development --open", 28 "build": "webpack" 29 }, 30 "author": "xiaodan.lin <1172321315@qq.com>", 31 "license": "ISC" 32 }
webpack.config.js配置：
1 const path = require("path"); 2 // 插件都是一个类，所以我们命名的时候尽量用大写开头 3 let HtmlWebpackPlugin = require("html-webpack-plugin"); 4 module.exports = { 5 entry: "./main.js", // webpack打包的入口文件 6 output: { 7 filename: "bundle.js", // 输出之后的文件名 8 path: path.resolve("dist"), // 打包后的目录，必须是绝对路径 9 }, 10 mode: "development", 11 module: { 12 rules: [ 13 { 14 test: /\.js$/, 15 exclude: /node_modules/, 16 use: { 17 loader: "babel-loader", // babel的loader，jsx文件使用babel-loader处理 18 options: { presets: ["react", "env", "stage-0"] }, 19 }, 20 }, 21 { 22 test: /\.css$/, 23 exclude: /node_modules/, 24 use: [ 25 // css和styleloader，对css后缀的文件进行处理 26 { loader: "style-loader" }, 27 { loader: "css-loader" }, 28 ], 29 }, 30 ], 31 }, 32 plugins: [ 33 // 通过new一下这个类来使用插件 34 new HtmlWebpackPlugin({ 35 // 在src目录下创建一个index.html页面当做模板来用 36 template: "./index.html", 37 hash: true, // 会在打包好的bundle.js后面加上hash串 38 }), 39 ], 40 devtool: "cheap-source-map", 41 devServer: { 42 static: { 43 directory: path.join(__dirname), 44 }, 45 }, 46 };
index.html模版文件
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>react-todolist</title> 6 <link rel="stylesheet" type="text/css" href="./css/semantic.css" /> 7 <style></style> 8 </head> 9 <body> 10 <div class="ui container" style="padding: 30px"> 11 <div id="app"></div> 12 </div> 13 </body> 14 </html>
main.js入口文件
1 import React from "react"; 2 import ReactDOM from "react-dom"; 3 import App from "./app/components/App"; 4 5 ReactDOM.render(<App data={data} />, document.getElementById("app"));
App.js主组件
1 import React from "react"; 2 3 class App extends React.Component { 4 state = { 5 choosevalue: 1, 6 data: this.props.data, 7 }; 8 9 render() { 10 const { data } = this.state; 11 return ( 12 <div className="ui comments"> 13 <h1>恭喜你 运行成功！</h1> 14 </div> 15 ); 16 } 17 } 18 19 export default App;
