React.js 開發環境設定

簡介

React可說是最近最熱門的一個Library，用過之後都會被其簡單的程式流程所吸引。如果對React還不熟的可參考附錄，或直接到官網看教學。在這，就來分享一下一些環境設定，讓開發更有效率。

材料準備

  • 安裝好react-tools的電腦一台

    $ npm install -g react-tools

  • 支援Grunt的Project一個（Gulp也ok設定很簡單沒有差很多自己修改一下）

目錄結構

一般的目錄結構大概是像這樣：

└── src
     └── js
         ├── app
         │   ├── collections
         │   ├── config
         │   ├── controllers
         │   ├── models
         │   └── views
         └── vendor
             ├── backbone
             |   ...
             └── requirejs

React由於有自己的jsx檔案格式，目錄結構改成這樣： （變化不大只是把js/app/views拿掉，因為被jsx取代）

└── src
     ├── js
     |   ├── app
     |   │   ├── collections
     |   │   ├── config
     |   │   ├── controllers
     |   │   └── models
     |   └── vendor
     └── jsx

我的jsx目錄長得像這樣：

└── src
     └── jsx
         ├── atom
         ├── molecule
         ├── organism
         └── template

這樣子的分法是因為本身有使用styleguide工具——PatternLab，React本身的元件概念跟PatternLab不謀而合，用一樣的目錄結構也可以方便樣式的對照。

Grunt Task

  1. Grunt Task需要兩個部分： A.把JSX檔案編譯成JS B.JSX檔案一旦修改就呼叫A

  2. 把JSX檔案編譯成JS——在Gruntfile.js裡增加這樣一個task：

    grunt.initConfig({
    shell: {
        jsx: {
            command: [
                'jsx -x jsx src/jsx/ src/js/app/views/',
                'rm -rf src/js/app/views/.module-cache/'
            ].join(' && '),
            stdout: true,
            failOnError: true
        }
    }
});
 
grunt.loadNpmTasks('grunt-shell');

    這是一個shell command，所以會需要grunt-shell，內容就是執行jsx編譯並輸出至src/js/app/views/目錄下，第二個command僅只是把編譯過程的cache檔案清掉。（就是這個步驟需要react-tools）

  3. JSX檔案一旦修改就呼叫A——有了JSX轉JS的task，再來就是用watch讓這動作更自動化：

    grunt.initConfig({
    shell: {
        jsx: {
            ...
        }
    },
    watch: {
        jsx: {
            files: 'jsx/**/*.jsx',
            tasks: ['shell:jsx']
        }
    }
});
 
grunt.loadNpmTasks('grunt-shell');
  4. 有了這兩個task之後，只要grunt watch，當你一修改jsx檔案系統就會自動幫你編譯成js，之後就跟一般開發流程沒兩樣了。

附註

一些React的資源：

 於 標籤： , ,

沒有留言:

張貼留言