react

2db29a7f · shangbj · 525c1841 · 2db29a7f · 2db29a7f · 2db29a7f
Commit 2db29a7f authored Jun 10, 2018 by shangbj
7 changed files
--- a/3-6使用React框架Babel/.babelrc
+++ b/3-6使用React框架Babel/.babelrc
+{
+    "presets":[
+        "react"
+    ]
+}
\ No newline at end of file
--- a/3-6使用React框架Babel/README.md
+++ b/3-6使用React框架Babel/README.md
+### babel-preset-react 
+
+安装新的以来后，再修改.babelrc配置文件加入React Presets
+```javascript
+"presets":[
+    "react"
+]
+```
\ No newline at end of file
--- a/3-6使用React框架Babel/index.html
+++ b/3-6使用React框架Babel/index.html
+<html>
+    <head>
+        <meta charset="UTF-8">
+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="./dist/bundle.js"></script>
+    </body>
+</html>
\ No newline at end of file
--- a/3-6使用React框架Babel/main.js
+++ b/3-6使用React框架Babel/main.js
+import React,{ Component } from 'react';
+import { render } from 'react-dom';
+
+class Button extends Component{
+    render(){
+        return(
+            <h1>Hello,React</h1>
+        )
+    }
+}
+
+
+render(<Button/>, window.document.getElementById('app'));
\ No newline at end of file
--- a/3-6使用React框架Babel/package-lock.json
+++ b/3-6使用React框架Babel/package-lock.json
--- a/3-6使用React框架Babel/package.json
+++ b/3-6使用React框架Babel/package.json
+{
+  "name": "3-6",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack --mode development",
+    "build": "webpack --mode production"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "webpack": "^4.12.0",
+    "webpack-cli": "^3.0.3"
+  },
+  "dependencies": {
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0"
+  }
+}
--- a/3-6使用React框架Babel/webpack.config.js
+++ b/3-6使用React框架Babel/webpack.config.js
+const path = require("path");
+
+module.exports = {
+    entry:"./main.js",
+    output:{
+        filename:'bundle.js',
+        path: path.resolve(__dirname,"./dist")
+    },
+    module:{
+        rules:[
+            {
+                test:/\.js$/,
+                use:['babel-loader'],
+                //排除
+                exclude:path.resolve(__dirname,'node_modules')
+            }
+        ]
+    }
+}
\ No newline at end of file