文章中我整理了 React.js 开发过程中一些参见问题的解答汇总供大家参考。1. 一些课程资源课程源码 GitHub 地址https://github.com/ParryQiu/IMOOC-React1.1 2018-03-26 更新针对源码文件夹 react-router-4_webpack-2-update 更新了免费的讲解视频。主要讲解了如下几个问题如果初始化下载的源码如何在本地运行项目如何修改代码可以直接打开 html 就可以运行这样你就可以将 React 的项目直接当成一个静态站点进行部署。1.2 我提供的其他原创免费视频课程Webpack 2 视频教程 https://devopen.club/course/webpackVSCode 高效开发必装插件 https://devopen.club/course/vscode1.3 其他下载课程完整的思维导图请查考文章React.js 入门与实战课程思维导图我使用的思维导图软件是 Mac 下的 iThoughtsx。如果你想下载不包含 node_modules 的源码请访问我上传到 GitHub 的版本https://github.com/ParryQiu/IMOOC-React课程网站源码包请参考慕课问答区课程里面说的各个章节的源码在哪里哦此源码包含了 node_modules 所以压缩文件达到了 1 个多 G不过这样就保证了不会因为组件版本的原因引起的课程学习疑惑。2. 执行 webpack-dev-server --content-base src --hot --inline 出错在新版本的 webpack-dev-server 中因为取消了 content-base 参数所以需要热加载自动刷新的话直接执行命令webpack-dev-server --hot --inline即可。3. 使用 Webpack 2 搭建的 React 浏览器自动刷新的项目模板如果还是有同学不能搭建出能够浏览器自动刷新的配置那么请直接下载我配置好并测试过的使用最新的 webpack 2 配置的项目模版即可。项目地址: https://github.com/ParryQiu/React-Webpack2-HMR-Template运行方法cd React-Webpack2-HMR-Templatenpm installnpm start修改 index.js 文件代码浏览器自动刷新4. 安装了 React Developer Tool 后调试状态下不显示请确认下载安装的版本是 2.0 版本建议直接科学上网后去官方商店下载不要使用百度等搜索引擎搜索下载旧版本。5. 缺少 react-html-attrs 插件在项目文件夹下执行命令npm install babel-plugin-react-html-attrs即可。6. 关于处理 babel-loader 没加载的错误如果在运行webpack-dev-server的时候出现了如下的错误。请执行以下命令npm install babel-loader重新运行后即可正常运行了。7. 使用 React 中的 fetch可以参考我的博文在 JS 中使用 fetch 更加高效地进行网络请求8. webpack-dev-server 占用端口 8080 的问题当出现了端口占用的问题时请结束掉占用端口的进程后重新运行即可。9. 错误 The root route must render a single element 的处理需要注意 Route 绑定的 component 中的 class 有没有添加export default。10. 如何在chrome console 中打开 paint flashing在 console 中的第二个窗口 rendering 下如果不显示你可以在 console 下点击键盘 Esc 打开。11. 父组件通过 refs 获取子组件真实 DOM 节点的问题请参见问答区父组件通过refs获取子组件真实dom节点的问题主要是可以通过 ReactDOM.findDOMNode(this.refs.rootChild) 进行获取。12. 代码跳转 Route 的问题请参见问答区老师你好我想在点击登录的时候用router定位到特定页面怎么做13. 如何将 AntDesign 中的 getFieldProps 替换成 getFieldDecorator请参见问答区如果要把getFieldProps替换成getFieldDecorator的话或者参见官方文档Form 表单14. Target container is not a DOM element错误截图如下原因是没有将页面的 JS 文件放在目标 div 的下面注意下图正确的文件顺序。15. 慕课没有发布的更新课程之前录制了「项目优化实战与可维护代码的编写」没有通过慕课的审核所以分享给需要这部分知识的同学继续学习注意即使是这两集也不可用于任何商业用途否则必将追究一切的法律责任小心_。链接: https://pan.baidu.com/s/1c37UhQK密码: rwug16. React Router 4.0 中 location undefined 的问题版本 4.0 中对 hashHistory 做了迁移你需要执行包安装命令npm install react-router-dom后按照如下的代码进行使用即可。{% codeblock lang:csharp%}import { HashRouter } from ‘react-router-dom’{% endcodeblock %}文档请参见这里https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md官方的 issuehttps://github.com/ReactTraining/react-router/issues/475217. AntDesign 文档中的函数语法错误以及 ES7 语法的支持方法如果你直接照搬 AntDesign 的语法可能会遇到如下错误。原因是因为此文档使用了最新的 ES7 的语法所以如果你想这样使用你需要安装babel-preset-stage-0组件。需要在项目文件夹下执行如下命令即可npm install --save-dev babel-preset-stage-0。如果需要安装其他对应的规则集如下供参考。ES2015转码规则$ npm install --save-dev babel-preset-es2015react转码规则$ npm install --save-dev babel-preset-reactES7不同阶段语法提案的转码规则共有4个阶段选装一个$ npm install --save-dev babel-preset-stage-0$ npm install --save-dev babel-preset-stage-1$ npm install --save-dev babel-preset-stage-2$ npm install --save-dev babel-preset-stage-318. 解决 webpack-dev-server 不能自动刷新的问题请参见我的博文 解决 webpack-dev-server 不能自动刷新的问题2017-04-08 更新了最新版本的 webpack 2 浏览器自动刷新的视频教程请参见这里http://v.youku.com/v_show/id_XMjY5NTg4NzU4OA.html如果你不想使用和课程一样的 1.0 版本但是又看不懂最新版本的文档请参见此视频即可。19. 解决课程中 React Router 版本的差异问题您可以直接查看最新的 React Router 4 的文档自己学习如果想使用和课程一样的版本请安装特定的版本和课程同步学习。npm install react-router2.8.1这样安装的版本就是 React Router 2 的版本所有的使用就会和课程一样了。20. 课程实战新闻项目 API 源码以及 API 地址源码地址https://github.com/ParryQiu/IMOOC-React-NewsAPIAPI 请求地址获取新闻列表获取新闻详情获取文章评论新闻添加评论收藏新闻注册登录接口获取用户收藏获取用户发出的评论21. 针对源码文件夹 react-router-4_webpack-2-update 更新的讲解视频主要讲解了如下几个问题如果初始化下载的源码如何在本地运行项目如何修改代码可以直接打开 html 就可以运行这样你就可以将 React 的项目直接当成一个静态站点进行部署。视频地址React 项目的优化、打包与部署 优酷React 项目的优化、打包与部署 bilibili