搭建react框架问题总结

发表于 | 分类于

react、react js、react native三者的区别

  1. React Js的目的是为了使前端的V层更具组件化，能更好的复用，它能够使用简单的html标签创建更多的自定义组件标签，内部绑定事件，同时可以让你从操作dom中解脱出来，只需要操作数据就会改变相应的dom。

  2. React Native的目的是希望我们能够使用前端的技术栈就可以创建出能够在不同平台运行的一个框架。可以创建出在移动端运行的app，但是性能可能比原声app差一点。

搭建react框架时遇到的问题

学习的教程是：从零搭建React全家桶教程，在搭建的过程中也遇到了不少问题，基本都解决了，少数未解决的等到熟练运用了react,再重新搭一遍框架理解一下。

模块热替换（Hot Module Replacement）

  • 加入了react-hot-loader v3以后计数依然变成0：至今未解决

文件路径优化：找不到这些文件。

  • 教程里写错了,不是在webpack.config.js中写路径文件,而是在webpack.dev.config.js中写

使用axios和middleware优化API请求，请求错误

  • 应该本来存在dist/api/user.json，模拟服务器传回来的数据,其中代码为
1
2
3
4
{
    "name": "brickspert",
    "intro": "please give me a star"
  }
  • 但是我这边的不存在了,所以会请求错误.之后使用mock.js就可以代替这个api了.

调整文本编辑器

  • Sublime和Intellij都没有找到safe write。不过在后续的工作中没有影响

使用 json-server 代替 Mock.js,出现用户信息请求失败错误

  • 是因为”mockdev”: “npm run mock & npm start”这个运行命令只运行了npm run mock,&不能同时运行两个命令。而用”mockdev”: “npm run mock | npm start”就可以实现同时运行两个命令.

Error: listen EADDRINUSE 0.0.0.0:8080

  • 表明端口号被占用，要修改端口号。在webpack.dev.config.js中修改。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    devServer: {
            port: 8081, //修改8081
            contentBase: path.join(__dirname, './dist'),
            historyApiFallback: true,
            host: '0.0.0.0',
            proxy: {
                "/api/*": "http://localhost:8090/$1"
            }
        }