React.js 开发参见问题 Q&A

简介: 文章中我整理了 React.js 开发过程中一些参见问题的解答汇总,供大家参考。1. 一些课程资源课程完整的思维导图请查考文章:React.js 入门与实战课程思维导图,我使用的思维导图软件是 Mac 下的 iThoughtsx。

文章中我整理了 React.js 开发过程中一些参见问题的解答汇总,供大家参考。

1. 一些课程资源

课程完整的思维导图请查考文章:React.js 入门与实战课程思维导图,我使用的思维导图软件是 Mac 下的 iThoughtsx。

课程网站源码包请参考慕课问答区:课程里面说的各个章节的源码在哪里哦,此源码包含了 node_modules ,所以压缩文件达到了 1 个多 G,不过这样就保证了不会因为组件版本的原因引起的课程学习疑惑。

如果你想下载不包含 node_modules 的源码,请访问我上传到 GitHub 的版本:https://github.com/ParryQiu/IMOOC-React

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-Template
  • npm install
  • npm 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/1mhJA9ks
密码:epaf

16. 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

官方的 issue:https://github.com/ReactTraining/react-router/issues/4752

17. AntDesign 文档中的函数语法错误以及 ES7 语法的支持方法

如果你直接照搬 AntDesign 的语法,可能会遇到如下错误。

截图

原因是因为此文档使用了最新的 ES7 的语法,所以如果你想这样使用,你需要安装 babel-preset-stage-0 组件。
需要在项目文件夹下执行如下命令即可:npm install --save-dev babel-preset-stage-0

如果需要安装其他对应的规则集,如下供参考。

  • ES2015转码规则
    $ npm install --save-dev babel-preset-es2015

  • react转码规则
    $ npm install --save-dev babel-preset-react

  • ES7不同阶段语法提案的转码规则(共有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-3

18. 解决 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-router@2.8.1

这样安装的版本就是 React Router 2 的版本,所有的使用就会和课程一样了。

20. 课程实战新闻项目 API 源码以及 API 地址

源码地址:https://github.com/ParryQiu/IMOOC-React-NewsAPI

API 请求地址


作者:Parry
出处:http://www.cnblogs.com/parry/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
17天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
【4月更文挑战第24天】Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它包含中间件系统用于日志、错误处理和静态文件服务,集成多种模板引擎如EJS、Jade、Pug。框架还提供安全中间件提升应用安全,并具有良好的可扩展性,便于项目功能扩展和开发效率提升。
25 3
|
17天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
21 3
|
17天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的async/await,以及它如何解决回调地狱问题。
ES6的async/await是基于Promise的异步编程工具,简化了代码并提高可读性。它避免回调地狱,将异步操作转化为Promise,使得代码同步化。错误处理更直观,无需嵌套回调或.then()。
18 1
|
17天前
|
JavaScript 前端开发 编译器
js开发: 请解释什么是Babel,以及它在项目中的作用。
**Babel是JavaScript编译器,将ES6+代码转为旧版JS以保证兼容性。它用于前端项目,功能包括语法转换、插件扩展、灵活配置和丰富的生态系统。Babel确保新特性的使用而不牺牲浏览器支持。** ```markdown - Babel: JavaScript编译器,转化ES6+到兼容旧环境的JS - 保障新语法在不同浏览器的运行 - 支持插件,扩展编译功能 - 灵活配置,适应项目需求 - 富强的生态系统,多样化开发需求 ```
19 4
|
19天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
24 2
|
11天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
1天前
|
JSON 前端开发 JavaScript
【好书推荐1】基于React低代码平台开发:构建高效、灵活的应用新范式
【好书推荐1】基于React低代码平台开发:构建高效、灵活的应用新范式
9 0
|
5天前
|
设计模式 前端开发 API
写出易维护的代码|React开发的设计模式及原则
本文对React社区里出现过的一些设计模式进行了介绍,并讲解了他们遵循的设计原则。
|
11天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。
|
11天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】TypeScript在JavaScript库与框架开发中的作用
【4月更文挑战第30天】TypeScript,微软开发的JavaScript超集,以其强类型和面向对象特性,正成为提升Web项目质量和效率的关键工具,尤其在库和框架开发中。它通过类型系统减少运行时错误,提供内置文档,便于重构,增强IDE支持,以及支持模块化。流行框架如React、Angular已支持TypeScript,未来有望成为开发高质量库和框架的标准语言。随着社区增长,TypeScript将在Web开发领域扮演更重要角色。