首先通过手把手带你搭建与配置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')
);
表现还行，能用····哈哈哈哈哈
1007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
