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="{"name":"John"}"></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로 전달됩니다.