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'));
    }
  });
});

Index Component를 자체 파일에 저장하고 이 파일에서 호출하려면 어떻게 해야 합니까?일반적인 방법(백본과 리액션에서 사용한 것과 동일)을 시도했지만 다음 이유로 오류가 발생했습니다.jsx구문을 사용합니다.

그래서 내가 직접 알아냈지

jsx-requirejs-plugin이라는 repo에서 필요한 파일과 지침을 받았습니다.

jsx 플러그인 및 JSXtransformer 버전을 수정한 후 저장소의 지시에 따라 코드를 변경했습니다.

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구문을 사용합니다.

도움이 됐으면 좋겠다.

리액트 툴(JSX 포함)은 Babel(https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html))을 위해 폐지되었습니다.'전송' 절차 없이 이 작업을 수행할 수 있는 방법을 찾을 수 없기 때문에 이것이 저의 해결책입니다.

grunt-babel(npm install grunt-babel)을 인스톨 해, 다음과 같은 태스크를 설정할 수 있습니다.

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

작업 목록에 추가만 하면 됩니다.

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

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

언급URL : https://stackoverflow.com/questions/23381561/using-reactjs-with-requirejs