Ruby on Rails
반응 레일 젬을 사용하여 레일에 반응하십시오.

rails_react gem을 사용하여 레일스에 대한 설치 설치

Gemfile에 반응 레일을 추가하십시오 :

gem 'react-rails'

설치 :

bundle install

그런 다음 설치 스크립트를 실행하십시오.

rails g react:install

이것은 :

components.js 매니페스트 파일과 app / assets / javascripts / components / 디렉토리를 만듭니다. 여기서 구성 요소를 application.js에 배치합니다.

//= require react
//= require react_ujs
//= require components

애플리케이션 내에서 react_rails 사용하기

React.js 빌드

설정을 추가하여 각 React.js 빌드 (개발, 프로덕션, 애드온의 유무에 관계없이)를 선택할 수 있습니다. 다음은 기본값입니다.

# config/environments/development.rb
MyApp::Application.configure do
  config.react.variant = :development
end


# config/environments/production.rb
MyApp::Application.configure do
  config.react.variant = :production
end

부가 기능을 포함하려면 다음 설정을 사용하십시오.

MyApp::Application.configure do
  config.react.addons = true # defaults to false
end

Rails 서버를 다시 시작한 후, // react를 요구하면 설정에 의해 지정된 React.js 빌드가 제공됩니다.

react-rails는 React.js의 버전 및 빌드를위한 몇 가지 다른 옵션을 제공합니다. 반응물 원석 사용 또는 React.js의 복사본을 삭제하는 방법에 대한 자세한 정보는 VERSIONS.md를 참조하십시오.

JSX

반응 레일을 설치 한 후 서버를 다시 시작하십시오. 이제 .jsx 파일이 자산 파이프 라인에서 변형됩니다.

BabelTransformer 옵션

바벨 변압기와 커스텀 플러그인을 사용하고 바벨 변압기에 옵션을 추가하면 다음과 같은 구성을 추가 할 수 있습니다 :

config.react.jsx_transform_options = {
  blacklist: ['spec.functionName', 'validation.react', 'strict'], # default options
  optional: ["transformerName"],  # pass extra babel options
  whitelist: ["useStrict"] # even more options[enter link description here][1]
}

후드 아래에서, 반응 레일은 변환을 위해 루비 - 바벨 - 트랜스바이서를 사용합니다.

렌더링 및 마운트

react-rails 에는 뷰 헬퍼 (react_component) 와 자바 스크립트 드라이버 (react_ujs)가 포함되어있어 React 구성 요소를 함께 사용하여 페이지에 배치합니다. 반응 후 (터보 링크를 사용하는 경우 터보 링크 이후) 매니페스트에 UJS 드라이버가 필요합니다.

뷰 도우미는 요청 된 컴포넌트 클래스 및 소품과 함께 페이지에 div를 놓습니다. 예 :

<%= react_component('HelloMessage', name: 'John') %>
<!-- becomes: -->
<div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"></div>

페이지로드시, react_ujs 드라이버는 data-react-class 및 data-react-props를 사용하여 페이지를 스캔하고 구성 요소를 마운트합니다.

Turbolinks가있는 경우 구성 요소가 페이지에 마운트됩니다 : 변경 이벤트 및 페이지에서 언 마운트 됨 : 언로드 전에. Turbolinks> = 2.4.0은 더 나은 이벤트를 노출하므로 권장됩니다.

Ajax 호출의 경우 UJS 마운트는 javascript에서 호출하여 수동으로 트리거 할 수 있습니다.

ReactRailsUJS.mountComponents ()보기 도우미 서명은 다음과 같습니다.

react_component(component_class_name, props={}, html_options={})

component_class_name 은 전역 적으로 액세스 가능한 구성 요소 클래스의 이름을 지정하는 문자열입니다. 점 (예 : "MyApp.Header.MenuItem")이있을 수 있습니다.

   `props` is either an object that responds to `#to_json` or an    already-stringified JSON object (eg, made with Jbuilder, see note    below).

html_options 는 다음을 포함 할 수 있습니다 : tag: data-react-class 및 data-react-props를 포함하기 위해 div가 아닌 다른 요소를 사용합니다. prerender: true 서버에서 구성 요소를 렌더링하려면 prerender: true 입니다. **other 모든 인수 (예 : class :, id :)는 content_tag로 전달됩니다.