どのように反応を設定する.Ruby on RailsプロジェクトのJS

12760 ワード
react rails ruby テキストリンク
Ruby on Railsはこのような素晴らしいフレームワークです.しかし、動的なフロントエンドでアプリケーションを構築するために埋め込まれたルビー(. erb)とajaxを使用することは辛いことができます.
そしてそれは、反応、角度、および残光のようなフロントエンドのフレームワークが入るところです.反応は今熱いものですので、我々はそれを使用するつもりです.
しかし、どのように反応するのですか.JSはRuby on Railsアプリケーションで設定できますか?それは私がこの記事でカバーしているものです
まず最初に行う必要があるのはRuby on Railsアプリケーションを作成し、それを使って反応を使うことです.次のコードを入力します.
rails new react-rails --database=postgresql --webpack=react
また、このアプリケーションのデータベースとしてPostgresを使用しています.
プロジェクトが設定されているので、我々のアプリはフロントエンドとして反応を使用するために知っているので、我々はコードのビットを追加する必要があります.
config/routeでルートファイルに行きましょう.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/v 1/post 'のようなパスを持っています.
今私たちのメインの反応アプリに他のルートを送信する当社のアプリを伝える必要があります.これをルートファイルの底に追加します.
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
インデックスを設定しましょう.JSXファイル.
アプリ/JavaScript/パック/HelloLes反応に移動します.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')),
  )
})
あなたが前に反応で働いたならば、これは身近に見えなければなりません.我々は、反応、reacttrouterdom反応をインポートしている.我々は、我々の主なアプリをインポートしている.次に、DOMのノードを作成し、アプリケーションを挿入します.
忘れる前に、糸を使って反応ルータDOMを加えましょう.端末に入力してください.
yarn add react-router-dom
我々はほとんど私たちのフロントエンドで我々のアプリを見ることができるポイントにしています.レッツゴー我々のアプリを設定します.jsファイル.
ファイル"app/javascript/src/component/app . js "を作成します.我々は、我々のポストを表示するために我々のルートパスを得そうです.「定期的なレールアプリ」では、これは我々のポスト表示フォルダのインデックスページです.
とにかく、ここではアプリです.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/component/post/posts . js」で作りましょう.ここに私のもののように見える.
import React from 'react'

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

export default Posts
今、我々の反応アプリをレンダリングする私たちのビューを伝える必要があります.「app/view/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 ::ConnectionDesigned」はパスワードによってエラーが発生しました.データベース設定を確実に設定してください.
Rails DB : CREATEを実行してデータベースを作成しました
Railsを使ったPostgreSQLの設定は、このチュートリアルの範囲外です.
もう一歩!PageSControllerとそのビューを設定しなければなりません.
go/app/controller/pagestleコントローラにPageSControllerを作成します.インデックスアクションが必要です.
class PagesController < ApplicationController
  def index

  end
end
また、“app/view/page/index . html . erb”のビューファイルも参照してください.レイアウトをロードしているので、私のファイルは空白のファイルです.
' Rails S 'を実行してください.
このイメージのために提供されるALTテキスト
今我々は我々のRailsアプリに設定して反応している.おめでとう、これは大きなステップです!
フロントエンドをバックエンドに接続し、reduxを追加するためのチューニングをご利用いただけます.
Web開発の詳細については、確認してください.
Ruby on Rails 6の認証(ログイン,サインアップ)
Androidデスクトップショートカットを追加し、activityを指定します.