tags:开发随笔
代码风格
用ES6,遵循Airbnb的React编码规范和javascript 编码规范。
两个编码规范都有对应的中文版本:
- https://github.com/sivan/javascript-style-guide
- https://github.com/JasonBoy/javascript/tree/master/react
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就更好了。