主要功能，点击右下角的“返回页首”按钮，自动回到当前网页的头部。
组件源码地址 back2top on Github
实际效果参考本页的右下角 链接
更方便的复用
目标： 只需要引入 react.js. (当前版本 0.12.2) 如何做到版本兼容性测试?
为了减少引用依赖，将 JSXTransformer.js 剔除，就需要将 React JSX code 转换成标准的 js 代码。 首先安装工具
sudo npm install -g react-tools
当 JSX 发生修改时，做实时转换
jsx --watch src/ build/
可以缩写成
jsx -w src/ build/
如果遇到 JSX 的语法错误，可以看到详细的错误提示，例如
Error while reading module back2top:
Error: Parse Error: Line 40: Unexpected token ILLEGAL
更进一步的简化使用难度，自动创建组件的 container。
var back2topDiv = document.createElement('div');
back2topDiv.setAttribute("id", "back-to-top");
document.body.appendChild(back2topDiv);
React.render(
<BackToTop />,
document.getElementById('back-to-top')
);
代码结构
主要分为 JSX 目录和编译后的 JS 目录
|_ README.md
|_ src
|_ back2top.js
|_ build
|_ back2top.js
如何将 CSS 整合入 React JSX 文件
这样做的好处是不需要再增加一个 CSS 文件，坏处是代码会有写凌乱。
优化一， 采用官网推荐的 inline styles 方式, 而不是定义在 this.state 里，例如
var divStyle = {
color: 'white',
backgroundImage: 'url(' + imgUrl + ')',
};
React.render(<div style={divStyle}>Hello World!</div>, mountNode);
第一次见到这样的代码，会有疑惑，为啥 background-image 被写成了 backgroundImage camelCased 式的命名方式. 实际上，使用 js 操作 DOM 元素的 style 都是采用 camelCased 的形式。可以在 chrome console 中做一个测试
var body = document.getElementsByTagName("body")[0];
console.log(body.style)
你会看到
...
overflow: ""
overflowWrap: ""
overflowX: ""
overflowY: ""
padding: ""
paddingBottom: ""
paddingLeft: ""
paddingRight: ""
paddingTop: ""
...
采用这种方式之后，只需要将会动态变化的 style 置于 this.state 中即可，其他的通用 style 只需要在 render 函数中定义。
CDN 的坑
由于将 js 文件放到了七牛 CDN 上，如果每次修改后，仍然保持原文件名，会出现 CDN 上的文件没有保持同步更新, 而且不确定多久会生效。所以最好的办法是，缀上 js 文件的版本号。
参考
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式