React最佳实践

作者: MarkNote | 来源:发表于2017-08-01 18:44 被阅读171次

tags:开发随笔

代码风格

用ES6,遵循Airbnb的React编码规范javascript 编码规范
两个编码规范都有对应的中文版本:

create-react-app

使用create-react-app创建最初的代码。
create-react-app是官方出品的应用创建工具,使用简单,很多常用的配置,包括webpack和jest的配置直接给你配好了。
这个工具的更新挺频繁,最新的版本更默认用yarn替代了npm。当然你用npm也没有问题。

Redux

如果不是特别小的项目,建议上Redux。
Redux有一定的学习曲线,然而对大型项目而言,利大于弊。
可惜的是,redux没有包含在create-react-app中。手工添加也很容易。可以参考这篇文章:https://medium.com/@notrab/getting-started-with-create-react-app-redux-react-router-redux-thunk-d6a19259f71f
有人在 create-react-app基础上做了直接支持redux的工具,比如create-react-redux-app

UI组件库

使用恰当的组件库可以事半功倍。
React自带的组件基本上只是基本HTML元素的封装,对于一般的工程应用远远不够。

react-bootstrap,是大名鼎鼎的bootstrap的react版本。
react semantic是senmantic官方出品的react 组件库。组件也比较丰富,对浏览器的兼容性较好,IE10以上都可支持。
阿里出品的antd,组件丰富,可惜对移动设备支持较差。
material-UI 是一个material design风格的UI 组件库。比较不爽的是它最后产出的css样式全都内连在HTML代码中,调试样式时稍微痛苦。此外这个库对浏览器兼容很差。在 IE中(除Edge外)有很多问题。

样式与代码分离

很多react的教程都直接用javascrip写样式。这是在倡导一种极其不负责任的习惯。
create-react-app创建的工程css在单独的文件中。我们应该保持。
如果团队习惯用SCSS或者LESS就更好了。

相关文章

  • React最佳实践

    tags:开发随笔 代码风格 用ES6,遵循Airbnb的React编码规范和javascript 编码规范。两个...

  • react最佳实践

    react最佳实践(基础篇) 以下仅仅是个人意见或者是react实践中的技巧,只针对代码不针对个人 无论如何,请考...

  • react最佳实践

    看到石墨的react文档。提到http://andrewhfarmer.com/react-ajax-best-p...

  • React开发相关资料

    React-Router 中文简明教程 总结 React 组件的三种写法 及最佳实践 [涨经验] React-UI组件

  • React 组件性能优化

    React 组件性能优化最佳实践 React 组件性能优化的核心是减少渲染真实 DOM 节点的频率,减少 Virt...

  • React Ajax最佳实践

    当你开始询问关于React和AJAX的一些东西时,专家们首先就会告诉你React只是一个View层的库,它并没有网...

  • React Native最佳实践

    感觉自己有点狂,居然敢在自己的文章中说这是最佳实践。不过有人不是说了吗,牛皮还是要吹的,万一实现了呢? 接下来公司...

  • react学习文档

    通过实例,学习编写 React 组件的“最佳实践”https://zhuanlan.zhihu.com/p/278...

  • React+Redux工程目录结构,最佳实践

    参考 Redux进阶系列1: React+Redux项目结构最佳实践 《深入浅出React和Redux》一书的第四...

  • dva抽出数组路由+配置动态路由+配置方法

    [TOC] 参考文章 React最佳实践系列 —— Dva 进阶之路由和动态加载 :https://blog.cs...

网友评论

    本文标题:React最佳实践

    本文链接:https://www.haomeiwen.com/subject/lfcslxtx.html