javascript - 我如何在旧项目上使用带有 ES6 语法的 React 0.13？

Question

我有一个类似 jquery 的旧项目。我们的团队开始开发新功能，我想在这上面使用 React 0.13。我将脚本放入站点文件夹(react.0.13.min.js，JSXTransformer.js)并在下面放置我的 app.react.js

在这种情况下，我如何编写一些测试代码？我试着输入:

'use strict';

class Story extends React.Component {
  render() {
    var story = this.props.story;
    return (
      <View>
        <Image uri={story.author.profile_picture.uri} />
        <Text>{story.author.name}</Text>
        <Text>{story.text}</Text>
      </View>
    );
  }
}

我可以从 Chrome 调试器访问 React 变量。我需要做什么？

Answer 1

我解决了我的问题。如果你有旧项目，你可以这样做:

1) 安装gulp/grunt babel

2) 编写预编译 ES6 到 ES5 的任务，就像 gulp 的这样:

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("app/assets/react/app.react.jsx")
    .pipe(babel())
    .pipe(gulp.dest("app/assets/javascripts/"));
});

3) React 库文件链接:

<script src="http://fb.me/react-0.13.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.1.js"></script>

4) 享受 ES6 语法和 React 的强大功能；)