react踩坑记

最新推荐文章于 2023-01-03 16:06:21 发布

尼古拉斯-托尔斯泰-赵四

最新推荐文章于 2023-01-03 16:06:21 发布

阅读量711

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_31411389/article/details/73149797

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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版本不匹配。

尼古拉斯-托尔斯泰-赵四

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react踩坑记

1.组件必须为大写字母开头import React from 'react';import ReactDOM from 'react-dom';export default class index extends React.Component{ render() { return ( <h2>this is index</h2>
复制链接

扫一扫

专栏目录