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的資源:

沒有留言:

張貼留言