Ruby on Rails 프로젝트로 React.js를 설정하는 방법

13089 단어 reactrubyrails
Ruby on Rails는 작업하기에 정말 훌륭한 프레임워크입니다. 그러나 Embedded Ruby(.erb) 및 ajax를 사용하여 동적 프런트엔드가 있는 앱을 빌드하는 것은 어려울 수 있습니다.

바로 여기에서 React, Angular, Ember와 같은 프런트 엔드 프레임워크가 등장합니다. 현재 React가 가장 핫하므로 이를 사용할 것입니다.

그러나 Ruby on Rails 애플리케이션에서 React.js를 어떻게 설정합니까? 그것이 내가 이 글에서 다루고 있는 것이다.

가장 먼저 해야 할 일은 Ruby on Rails 애플리케이션을 만들고 React를 사용할 것이라고 알리는 것입니다. 이렇게 하려면 다음 코드를 입력하십시오.

rails new react-rails --database=postgresql --webpack=react


이 애플리케이션의 데이터베이스로도 Postgres를 사용하고 있습니다.

이제 프로젝트가 설정되었으므로 앱이 React를 프런트 엔드로 사용하는 것을 알 수 있도록 약간의 코드를 추가해야 합니다.

config/routes.rb에 있는 경로 파일로 이동합니다.

여기에서 경로와 약간 다른 작업을 수행하게 됩니다. API 네임스페이스에서 백엔드에 대한 모든 호출을 래핑할 것입니다.

이 프로젝트에서 우리는 게시물 모델을 갖게 될 것입니다. 따라서 다음과 같이 경로를 작성합니다.

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html

  root 'pages#index'

  namespace :api do
    namespace :v1 do
      resources :posts
    end
  end
end


페이지 컨트롤러로 이동하는 루트 경로도 추가했습니다. 컨트롤러에 액세스하기 위해 백엔드 호출을 할 때 게시물을 가져오기 위해 '/api/v1/posts'와 같은 경로를 갖게 됩니다.

이제 다른 경로를 기본 React 앱으로 보내도록 앱에 지시해야 합니다. route 파일 맨 아래에 다음을 추가합니다.

get '*path', to: 'pages#index', via: :all


파일 경로 파일은 다음과 같아야 합니다.

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html

  root 'pages#index'

  namespace :api do
    namespace :v1 do
      resources :posts
    end
  end

  get '*path', to: 'pages#index', via: :all

end


index.jsx 파일을 설정합시다.

app/javascript/packs/hello_react.jsx로 이동하여 해당 파일의 이름을 index.jsx로 바꿉니다. 거기에 있는 대부분의 내용을 삭제하고 파일을 다음과 같이 만드십시오.

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import App from '../src/components/App'

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Router>
      <Route path="/" component={App}/>
    </Router>,
    document.body.appendChild(document.createElement('div')),
  )
})


이전에 React로 작업한 적이 있다면 익숙하게 보일 것입니다. React, ReactDom 및 ReactRouterDom을 가져오고 있습니다. 그런 다음 기본 앱을 가져옵니다. 그런 다음 DOM에 노드를 만들고 앱을 삽입합니다.

잊어버리기 전에 Yarn을 사용하여 react-router-dom을 추가해 봅시다. 터미널로 이동하여 다음을 입력하십시오.

yarn add react-router-dom


프런트 엔드에서 앱을 볼 수 있는 시점에 거의 도달했습니다. App.js 파일을 설정해 보겠습니다.

"app/javascript/src/components/App.js"파일을 생성합니다. 게시물을 표시하기 위해 루트 경로를 얻을 것입니다. "일반 rails 앱"에서는 게시물 보기 폴더의 색인 페이지가 됩니다.

어쨌든 App.js 파일은 다음과 같습니다.

import React from 'react'
import { Route, Switch } from 'react-router-dom'
import Posts from '../components/Posts/Posts'

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Posts} />
    </Switch>>
  )
}

export default App


"app/javascript/src/componnets/Posts/Posts.js"에 해당 게시물 페이지를 만들어 봅시다. 내 모습은 다음과 같습니다.

import React from 'react'

const Posts = () => {
  return (
    <div>
      <h1>Posts</h1>
      <p>This is our posts page.</p>
    </div>
  )
}

export default Posts


이제 뷰에 React 앱을 렌더링하도록 지시해야 합니다. "app/views/layout/application.html.erb"로 이동하여 다음 태그를 추가합니다.

<%= javascript_pack_tag 'index' %>


레이아웃 파일은 다음과 같아야 합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>ReactRails</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'index' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>


여기에서 서버를 시작하려고 했지만 “config.database.yml”에서 데이터베이스 비밀번호를 설정하지 않았기 때문에 “ActiveRecord::ConnectionEstablished” no password provided 오류가 발생했습니다. 따라서 데이터베이스 설정을 확인하십시오. .

또한 내 데이터베이스를 생성하려면 rails db:create를 실행해야 했습니다.

Rails로 PostgreSQL을 설정하는 것은 이 튜토리얼의 범위를 벗어납니다. 죄송합니다!

한 걸음 더! PagesController와 해당 보기를 설정해야 합니다.

"app/controllers/pages_controller"에서 PagesController를 생성하십시오. 색인 작업만 있으면 됩니다.

class PagesController < ApplicationController
  def index

  end
end


그리고 "app/views/pages/index.html.erb"에 있는 뷰 파일. 레이아웃을 로드하는 중이므로 내 파일은 빈 파일입니다.

이제 'rails s'를 실행하면 다음이 표시됩니다.

이 이미지에 대한 대체 텍스트가 제공되지 않았습니다.
이제 Rails 앱에 React가 설정되었습니다. 축하합니다. 큰 발전입니다!

프론트엔드를 백엔드에 연결하고 Redux를 추가하는 것에 대해 계속 지켜봐 주십시오.

웹 개발에 대해 자세히 알아보려면 .
Vanilla JS로 Shopify 카트에 추가하는 방법
【Python】 Django에서 재생 (관리 화면)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage