reactjs with requirejs

Question

최근에 라우터와 함께 reactjs을 사용하여 응용 프로그램을 작성하기 시작했습니다.

일반적으로 의존성 및 코드 관리에는 requirejs을 사용합니다. 그러나 jsx 구문을 포함하는 파일을 포함 시키려고 할 때 문제가 발생합니다.

이것은 내가 지금까지로 무엇을 내 router.js :

define(["backbone", "react"], function(Backbone, React) { 

    var IndexComponent = React.createClass({ 
    render : function() { 
     return (
     <div> 
     Some Stuff goes here 
     </div> 
     ); 
    } 
    }); 



    return Backbone.Router.extend({ 
    routes : { 
     "": "index" 
    }, 
    index : function() { 
     React.renderComponent(<IndexComponent />, document.getElementById('index')); 
    } 
    }); 
}); 

어떻게 자신의 파일에 IndexComponent을 넣고이 파일에 호출합니까? 나는 평범한 방법 (백본에서 사용했던 반응과 반응)을 시도했지만 jsx 구문으로 인해 오류가 발생했습니다.

Answer 1

그래서 나는 그것을 스스로 알아 냈습니다.

이 repo에서 필요한 파일과 안내를 받았습니다 : jsx-requirejs-plugin.

require.config({ 
    // ... 

    paths: { 
    "react": "path/to/react", 
    "JSXTransformer": "path/to/JSXTransformer", 
    "jsx": "path/to/jsx plugin" 
    ... 
    } 

    // ... 
}); 

그 후, 나는 jsx! 플러그인 구문을 통해 JSX 파일을 참조 할 수있다 : 나는 jsx plugin을했고 JSXTransformer의 버전을 수정하면 저장소의 지침에 따라

, 내 코드를 변경했습니다. 또한,

require(['react', 'jsx!components/Timer'], function (React, Timer) { 
    ... 
    React.renderComponent(<Timer />, document.getElementById('timer')); 
    ... 
}); 

: 나는 또한 동일한 코드를 사용하여에 jsx 구문을했다 .js 파일에 액세스 할 수

require(['react', 'jsx!components/Timer'], function (React, Timer) { 
    ... 
    React.renderComponent(<Timer />, document.getElementById('timer')); 
    ... 
}); 

: 예를 들어, 구성 요소 디렉토리에있는 Timer.jsx 파일을로드 /** @jsx React.DOM */을 jsx 구문을 사용하는 파일의 맨 위에 놓을 필요는 없었습니다.

희망이 있습니다.

Answer 2

반동 툴 (JSX 포함)은 바벨 (Babel) (https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html)을 위해 사용되지 않습니다. "transpiling"단계없이이 작업을 수행 할 수있는 방법을 찾을 수 없으므로 이것은 쓸데없는 문제가있는 나의 해결책입니다.

당신은 꿀꿀 - 바벨을 취임시키다 수 (NPM 꿀꿀 - 바벨을 설치)하고 다음과 같이 작업을 구성합니다

grunt.registerTask('default', ['clean', 'copy', 'babel', 'http-server']); 

바벨 : 그냥 꿀꿀 작업 목록에 추가

babel: { 
    options: { 
     sourceMap: false, 
     modules: "common" 
    }, 
    dist: { 
     files: [{ 
      expand: true, 
      src: ['js/components/*.jsx'], 
      dest: 'dist', 
      ext:'.js' 
     }] 
    } 
} 

추가 구성없이 RequireJS 종속성으로 지정할 수있는 JS 파일로 JSX를 변환합니다.