1.组件必须为大写字母开头
import React from 'react';
import ReactDOM from 'react-dom';
export default class index extends React.Component{
render() {
return (
<h2>this is index</h2>
)
}
}
ReactDOM.render(<index />,document.getElementById('main'));
这样写,不能将index组件渲染到id为main的标签中去,因为组件必须为大写字母开头。
2.html页面引用的应该是编译后的js文件而不是没编译的文件
如上目录:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main"></div>
<script src="./index.js"></script>
</body>
</html>
这样写运行后会报错:Uncaught SyntaxError: Unexpected token import,原因,index.html页面应该引用的js是编译后的js而不是直接的index.js文件,所以会报错。script标签应该:<script src="../build/build.js"></script>
3.报错:Cannot find module ‘webpack/bin/config-yargs’
npm run dev
> react-tutorial@0.0.0 start E:\xx\xxx
> webpack-dev-server
module.js:327
throw err;
^
Error: Cannot find module 'webpack/bin/config-yargs'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (D:\my\react-task\node_modules\webpack-dev-server\bin\webpack-dev-server.js:24:1)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
......
分析:一般情况是因为Webpack与webpack-dev-server版本不兼容导致。webpack-dev-server2版本与webpack1版本不匹配。