什么是JSX語法：就是符合XML規范的js語法。（語法格式相對於html嚴謹很多）
如何啟用JSX語法？
安裝babel插件：
運行：
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
安裝能夠識別轉換JSX語法的包：
運行：
cnpm i babel-preset-react -D項目的根目錄下添加.babelrc配置文件：
{
"presets": ["env", "stage-0", "react"], "plugins": ["transform-runtime"] }webpack.config.js文件中添加babel-loader的配置項：
module: { rules: [ { test: /\.js|jsx$/, use: "babel-loader", exclude: /node_modules/ } ] }主要文件：
package.json：（babel-loader必須為7.x版本）
{
"name": "wp4-1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open chrome --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.5", "webpack-cli": "^3.3.10", "webpack-dev-server": "^3.10.1" }, "dependencies": { "react": "^16.12.0", "react-dom": "^16.12.0" } } webpack.config.js：
const path = require("path") const htmlWebpackPlugin = require("html-webpack-plugin") // 導入 在內存中自動生成html文件 的插件 // 創建一個插件的實例對象 const htmlPlugin = new htmlWebpackPlugin({ template: path.join(__dirname, "./src/index.html"), // 源文件 filename: "index.html" // 生成的 內存中首頁的 名稱 }) // 向外暴露一個打包的實例對象，因為webpack是基於Node構建的，所以webpack支持所有Node API和語法 // webpack 默認只能打包處理.js后綴名類型的文件，想.vue .png無法主動處理，所以要配置第三方的loader module.exports = { mode: 'development', // development 或 production plugins: [ htmlPlugin ], module: { // 所有第三方模塊的配置規則 rules: [ // 第三方匹配規則 { test: /\.js|jsx$/, use: "babel-loader", exclude: /node_modules/ // exclude千萬別忘記 } ] } }.babelrc
{
"presets": ["env", "stage-0", "react"], "plugins": ["transform-runtime"] }index.js：
// 導入包 import React from 'react' import ReactDOM from 'react-dom' // HTML是最優秀的標記語言； // 注意：在JS文件中，默認不能寫類似於HTML的標記語言，否則打包會失敗 // 可以使用babel來轉換這些JS中的標記 // 這種在JS中混合寫入類似於HTML的語法叫做JSX語法，符合XML規范的JS // JSX語法的本質還是在運行的時候，被babel轉換成React.createElement形式來執行的 const myDiv = <div id="my-div" title="my div">這是一個div元素</div> ReactDOM.render(myDiv, document.getElementById("app"))index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>首頁</h1>
<div id="app"></div>
</body>
</html>