第 361 篇 · 第 14 卷 前端，沒有極限 2026 年 6 月 9 日 · 台北
ls -lt ./posts --since=2013 REC · node 361 · uplink

js

Reactjs JSX格式轉換

2015 年 04 月 23 日 · 3 分鐘閱讀 · By Wang Casper

剛接觸React.js通常遇到一個問題，就是開發環境怎麼配置，原因在於JSX的格式需要轉換。JSX讓javascript內可以插入html tag，雖然是可以選擇使用，但官方也建議使用JSX格式來進行開發，如果對於React.js有興趣的，不妨參考一下這篇JSX格式轉換吧。

參考文章：http://tylermcginnis.com/reactjs-tutorial-pt-2-building-react-applications-with-gulp-and-browserify/

安裝Node.js & Gulp

首先要先安裝Node.js 和 Gulp，如果還沒安裝的可以參考我之前的文章。

/gulp/2014/09/22/gulp-install/

檔案格式架構

建立以下的檔案

gulpfile.js
|-- app
	|-- index.html
	|-- js
		|-- app.js

index.html code

<script src="app/app.js"></script>放在body後方，只是要避免dom的錯誤。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React.js</title>
  <script src="http://fb.me/react-0.13.1.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
<!-- build:js -->
<script src="app/app.js"></script>
<!-- endbuild -->
</html>

app.js code

僅是要測試JSX用。

var Child = React.createClass({
  render: function(){
    return (
      <div>
        and this is the <b>{this.props.name}</b>.
      </div>
    )
  }
});
var Parent = React.createClass({
  render: function(){
    return (
      <div>
        <div> This is the parent. </div>
        <Child name="child"/>
      </div>
    )
  }
});

React.render(<Parent />, document.getElementById('app'));

安裝gulp套件

在Terminal下依序輸入以下兩行指令，而npm init是用來建立package.json，輸入後會有一些問題，一直按Enter就可以了^ ^。

$ npm init
$ npm install gulp gulp-concat gulp-uglify gulp-react gulp-html-replace --save-dev

gulpfile.js

這範例不包含webserver，主要是轉換JSX，如果對於gulp js很熟悉的使用者，也可只參考其中的JSX轉換即可。

var gulp = require('gulp');
var concat = require('gulp-concat'); // 串接
var uglify = require('gulp-uglify'); // 醜化js
var react = require('gulp-react');
var htmlreplace = require('gulp-html-replace');

// 定義變數
var path = {
  HTML: 'app/index.html',
  ALL: ['app/js/*.js', 'app/js/**/*.js', 'app/index.html'],
  JS: ['app/js/*.js', 'app/js/**/*.js'],
  MINIFIED_OUT: 'build.min.js',
  DEST_SRC: 'dist/app',
  DEST_BUILD: 'dist/build',
  DEST: 'dist'
};

// 建立任務，轉換JSX
gulp.task('transform', function(){
  gulp.src(path.JS)
    .pipe(react())
    .pipe(gulp.dest(path.DEST_SRC));
});

// 複製index.html到dist資料夾
gulp.task('copy', function(){
  gulp.src(path.HTML)
    .pipe(gulp.dest(path.DEST));
});

// 監控以上兩個任務
gulp.task('watch', function(){
  gulp.watch(path.ALL, ['transform', 'copy']);
});

// 定義預設動作
gulp.task('default', ['watch']);

// gulu build
gulp.task('build', function(){
  gulp.src(path.JS) 
    .pipe(react()) //轉換jsx
    .pipe(concat(path.MINIFIED_OUT)) // 串接所有js
    .pipe(uglify(path.MINIFIED_OUT)) // 最小化js
    .pipe(gulp.dest(path.DEST_BUILD));
});

// 轉換js路徑
gulp.task('replaceHTML', function(){
  gulp.src(path.HTML)
    .pipe(htmlreplace({
      'js': 'build/' + path.MINIFIED_OUT
    }))
    .pipe(gulp.dest(path.DEST));
});

// production 輸出
gulp.task('production', ['replaceHTML', 'build']);

到這部分基本上就完成了，只要透過gulp或gulp production就能預覽jsx轉換成js。

jsreactjs