首先通過手把手帶你搭建與配置Webpack + ES6 最新開發環境我們已經獲得了一個可以使用ES6及JSX語法的環境。現在讓我們一起在這個項目中使用React。基於這裏的原碼Liz606/webpack-es6-anyFrame進行優化即可。
安裝react
npm i react react-dom react-router-dom
安裝解析工具
npm i -D @babel/preset-react
修改.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": ["@babel/transform-runtime",
["@babel/plugin-proposal-decorators", {"legacy": true}],
"@babel/plugin-proposal-class-properties",
]
}
此時以及可以解析react了，因爲在配置webpack時，解析js順便就把jsx解析了。
就是這一部分
···
module: {
rules: [
{
//處理jsx,js
test: /\.(jsx?)$/,
use: {
loader: "babel-loader",
options: {
cacheDirectory: evn === EVN.dev,
sourceMap: evn === EVN.dev,
},
}
},
···
做個小實驗
修改src/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>
<div id="root"></div> // 主要是要有這個容器
</body>
</html>
寫個組件吧
src/layout.jsx
import React from 'react';
class LayoutPage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
export default LayoutPage;
在入口文件載入React
src/index.js
import React from 'react';
import {render} from 'react-dom';
import LayoutPage from './layout';
render(
<LayoutPage name="Lizzy" />,
document.getElementById('root')
);
表現還行，能用····哈哈哈哈哈
