Rails에 React 설치 및 첫 번째 구성 요소 만들기

카탈로그

Installing React

Rendering our first component

Exploring our React component

1. 반응기 설치

응용 프로그램이 시작되고 실행됨에 따라 프로젝트에서React의 본질을 실현할 때가 되었다.만약 당신이 React에 익숙하지 않다면, 그것은 페이스북이 유지하는 자바스크립트 프레임워크로 지난 몇 년 동안 전방 개발 분야를 풍미했다.
React에 대한 정보를 더 알고 싶으면, 그들의 official site 를 보거나, 그들의 tutorial 를 통해 조작하십시오.나는 계속해서 당신이 적어도 React의 작업 원리에 대해 기본적인 이해를 가지고 있다고 가정할 것이지만, 나는 우리가 그 과정에서 사용할 관건적인 아이디어를 탐색할 것이다.

반응 레일

우리는 React-Railsgem을 사용하여 React 기능을 응용 프로그램에 통합할 것입니다.gem을 추가하는 과정은 geocoder 프로젝트의 루트 폴더에서 Gemfile을 열고 Geocoder gem 아래에 다음 줄을 추가하는 과정과 같습니다.

gem 'geocoder'
gem 'react-rails'

다음에 우리는 설치 프로그램을 실행해야 한다.모든 컨텐트를 실행하려면 몇 개의 명령을 실행해야 합니다. 이러한 명령은 설치 문서에서 직접 수행됩니다.

bundle install
rails webpacker:install
rails webpacker:install:react
rails generate react:install

이러한 명령은 일련의 파일을 만들지만 가장 중요한 것은 다음과 같습니다.

app/javascript/components/ React 구성 요소 디렉토리

ReactRailsUJS 에서 설정

app/javascript/packs/application.js 서버측 렌더링용

설치 지침을 사용하려면 app/javascript/packs/server_rendering.js 파일의 헤더에 <%= javascript_pack_tag 'application' %>를 추가해야 합니다. 그러나 이것은 TurboLink 가져오기의 일부로 동일한 위치에 포함되어 있기 때문에 필요하지 않습니다.

2. 우리의 첫 번째 구성 요소 보여주기

React의 특징 중 하나는 재사용 가능한 구성 요소를 사용하여 모듈식 인터페이스를 만드는 데 전념하는 것이다.구성 요소를 한 번 구축하면 임의의 횟수를 렌더링할 수 있습니다.일부 구성 요소를 사용하여 애플리케이션에 기본 UI를 구축하지만 먼저 뷰에서 구성 요소를 렌더링할 수 있도록 해야 합니다.
우선 React Rails 튜토리얼에 따라 간단한 Hello World 인사말을 구축하겠습니다.우리가 지도 구성 요소를 구축하기 전에, 이것은 모든 것이 정상적인지 확인하는 신속하고 간단한 방법이다.
Rails에서 React 구성 요소를 생성하려면 generate 명령을 다시 사용할 수 있습니다.우리는 그것을 매번 입력하는 것이 아니라 application.html.erb로 줄일 수 있다generate.

rails g react:component HelloWorld greeting:string

파일이 생성된 것을 보실 수 있습니다:

Running via Spring preloader in process 440408
      create  app/javascript/components/HelloWorld.js

이것은 우리가 첫 번째 구성 요소가 생겼다는 것을 의미한다.지금 우리는 모든 것이 정상인지 확인하기 위해 그것을 우리의 보기에 연결해야 한다.이렇게 하려면 g 파일로 다시 이동하여 다음 내용으로 모든 내용을 교체해야 합니다.

<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>

rails 서버가 실행 중이라면, 닫고 다시 켜십시오. /rails-react-google-maps/app/views/places/index.html.erb다시 rails s 당신의 페이지에 간단한 문장이 있을 것입니다.

우리의 첫 번째 React 구성 요소는 우리의 보기에서 렌더링됩니다!

3. 우리의 반응 구성 요소 탐색

구성 요소 생성기로 무엇을 만들었는지 빠르게 봅시다.코드 편집기에서 localhost:3000:

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

저는 React 구성 요소가 어떻게 구축되었는지, 클래스 기반 구성 요소와 기능 구성 요소 간의 차이점(this video에 대해 상세하게 설명하지 않겠지만 /rails-react-google-maps/app/javascript/components/HelloWorld.js에 주의하시기 바랍니다.
React를 사용하면 부모 어셈블리에서 해당 서브어셈블리로 속성 또는 도구를 전달할 수 있습니다.저희 프로그램에서 props는HelloWorld 구성 요소의 부모 단계를 나타냅니다.이렇게 어셈블리를 렌더링하면 다음과 같습니다.

<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>

우리는 그것에게 인사 밧줄을 전달했다.만약 우리가 우리의 구성 요소를 깊이 연구한다면, 당신은 이 줄을 보게 될 것이다.

Greeting: {this.props.greeting}

Google 색인 페이지에 application.html.erb 가 표시됩니다. HelloWorld 구성 요소에 우리가 원하는 인사 속성 ((Greeting: Hello from react-rails.) 은 this.props.greeting 과 같기 때문입니다.이것은 구성 요소를 구축하고 렌더링할 때 우리에게 매우 큰 유연성과 맞춤형 제작을 제공하여 미래의 지도 구성 요소에 데이터를 표시할 때 중요한 역할을 발휘할 것이다.
당신의 Hello from react-rails.에 다른 HelloWorld 구성 요소를 추가하여 문자열을 전달해 보세요!도구의 작업 원리에 대한 정보를 더 알고 싶으면React팀에서 제공한Components and Props documentation을 보십시오.
이제 React에 연결되어 구성 요소를 만드는 방법을 알고 있습니다. 이제 응용 프로그램의 주요 기능인 지도를 계속할 때가 되었습니다.