requirejs와 함께 reactjs 사용

requirejs와 함께 reactjs 사용

---

최근에 라우터 reactjs와 함께 backbonejs응용 프로그램을 만들기 시작했습니다 .

나는 일반적으로 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구문 으로 인해 오류가 발생했습니다 .

---

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

이 저장소에서 필요한 파일과 지침을 받았습니다 : jsx-requirejs-plugin .

내가 가진 후 jsx 플러그인 의 수정 버전 JSXTransformer을 저장소 (repository)의 지침에 따라, 나는 내 코드를 변경 :

require.config({
  // ...

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

  // ...
});

그런 다음 jsx!플러그인 구문을 통해 JSX 파일을 참조 할 수 있습니다. 예를 들어, 구성 요소 디렉토리에있는 Timer.jsx 파일을로드하려면 다음을 수행하십시오.

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

동일한 코드를 사용하여 구문이있는 .js파일에 액세스 할 수도 있습니다 jsx.

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

또한 구문을 /** @jsx React.DOM */사용하여 파일 맨 위에 올릴 필요가 없습니다 jsx.

도움이 되었기를 바랍니다.

---

React 도구 (JSX 포함)는 Babel ( https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html ) 을 위해 더 이상 사용되지 않습니다 . "트랜스 파일링"단계 없이는이 작업을 수행 할 수있는 방법을 찾을 수 없으므로 이것이 grunt에 대한 나의 해결책입니다.

You can instal grunt-babel (npm install grunt-babel) and configure a task like the following:

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

Just add it to your list of grunt tasks:

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

Babel will transpile your JSX to JS files that can be specified as RequireJS dependencies with no additional configuration.

참고URL : https://stackoverflow.com/questions/23381561/using-reactjs-with-requirejs