スキップしてメイン コンテンツに移動

React Rails の導入

Ruby on Rails + React + ES6 の構成で環境を作ります。
ES6 で書いた React のコードは、
サーバ上でトランスパイル (ES6 -> ES5) されるため、
古いブラウザでも動作します。

gem の追加

gemfile に以下を追加します。
gem 'react-rails'
以下のコマンドでreact-railsをインストールします。
$ bundle install

react-rails の初期化

react-rails には react を使えるようによしなにしてくれる generator が用意されています。
インストール後、以下のコマンドを実行します。
$ rails g react:install

# コマンドを実行すると、react を実行する為に必要なフォルダ・ファイルが自動作成されます。
Running via Spring preloader in process 1438
      create  app/assets/javascripts/components
      create  app/assets/javascripts/components/.gitkeep
      insert  app/assets/javascripts/application.js
      create  app/assets/javascripts/components.js
      create  app/assets/javascripts/server_rendering.js
      create  config/initializers/react_server_rendering.rb```

React コンポーネントの作成

react-rails には、React Component 定義を生成してくれる generator があるため、
それを使用して Component を作成します。
$ rails g react:component MyCompName --es6

# コマンドを実行すると、 app/assets/javascripts/components フォルダに、
# jsx ファイルが作成されます。
Running via Spring preloader in process 1477
      create  app/assets/javascripts/components/my_comp_name.es6.jsx

オプション

generator のオプションには、以下の2つが指定できます。
  • –es6: ES6 の React.Component を継承した class 形式のコンポートネントとして作成
  • –coffee: coffee script として作成

generator で作成したコンポートは以下のような形となります
class MyCompName extends React.Component {
  render () {
    return (
      <React.Fragment>
      </React.Fragment>
    );
  }
}
このままでは、実行しても何も表示されない為、以下のように書き換えます。
class MyCompName extends React.Component {
  render () {
    return (
      <div>hello react</div>
    );
  }
}

View に reactコンポーネントを配置

reast-rails をインストールすると、
react_component というヘルパーメソッドが追加されます。
これを使用して、View に React コンポーネントを に配置します。
<%= react_component('MyCompName') %>
<div>
 ~~~
</div>

application.js の修正

application.js に、ツリー構造読み込み定義があると、
React 本体の js を二重読み込みして、色々問題になるので、
ツリー構造読み込み定義があれば削除します。
//= require rails-ujs
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require_tree .    ← この行があれば消す
↓ 削除後
//= require rails-ujs
//= require turbolinks
//= require react
//= require react_ujs
//= require components  

実行

以上までの手順を終えたら、Rails を起動し、React コンポーネントを配置したページに、
hello react と表示されれば成功です。
注意
Rails を起動中のまま、react-rails のセットアップを行うと、
実行時に FileNotFound のエラーが表示されます。
この場合は、Rails を再起動する事で治ります。

応用編

外部コンポーネントのインポート

通常 ES6 では、外部ファイルのコンポーネントをインポートする場合、
import xxx from module_name といった形で書きますが、
react_rails の場合、//= require ./components/SubComponent の形で書きます。
//= require ./components/SubComponent

class MainComponent extends React.Component {
  render() {
   return <SubComponent></SubComponent>;
  }
}
また、インポートされる側のコンポーネントについても、
通常のES6では、
export class SubComponent { ... }
と書きますが、
react-rails では、export なしで、普通のクラスとして宣言します。
class SubComponent { ... }
スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

このブログの人気の投稿

axiosの使い方まとめ (GET/POST/例外処理)

axiosの使い方まとめ (GET/POST/例外処理)最近何かとよく使うJavaScriptでAJAX通信を行うaxiosについて、簡単に使い方をまとめました。GETリクエストをaxiosで送るまずはGETリクエストをaxiosで送る方法です。const res =await axios.get('/users') console.log(res.data)分割代入の記法を使うと、以下のようにも書けますconst{data}=await axios.get('/users') console.log(data)クエリパラメータ (URLパラメータ)を指定クエリパラメータを指定する方法は2つあります。1つ目は、axios.getに指定するURLに直接記述する方法です。axios.get('/user?id=123')2つめは、axios.getの第2引数に、オプション指定する方法です。axios.get('/user',{ params:{ id:123}})POSTリクエストをaxiosで送る次はPOSTリクエストをaxiosで送る方法です。JSON形式でPOSTするJSON形式でPOSTする場合は、axios.postの第2引数に、送信するデータをJavaScriptオブジェクトで指定します。const res =await axios.post('/user',{ id:123, name:'Yamada Tarou'})application/x-www-form-urlencoded形式でPOSTするapplication/x-www-form-urlencoded形式でPOSTする場合は、URLSearchParamsを使います。var params =newURLSearchParams() params.append('id',123) params.append('name','Yamada Tarou')const res =await axios.post('/user', params)axios でファイルをアップロードする画像などのファイルを、axiosでアッ…

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決する

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決するタイトルの通りですが、Windows 8 以降では Windows Form アプリケーションで、コントロールの ImeMode に Katakana や KatakanaHalf を設定しても、カタカナになってくれません。なぜ ImeMode が効かないのか?Windows 8 以降、IME Mode の切り替えは、ユーザー単位で切り替わるようになった為、アプリから IME Mode 制御が出来ないようになりました。
(IME をON にした場合、常に ひらがな モードになます)※ Windows 7までは、IME Modeの切り替えはアプリ単位で行われていた為、問題なくアプリから IME制御が行えました。対処方法Windows 8 以降、IMEの制御は、InputScope クラスの利用が推奨されています。
しかし、InputScope クラスは、WPF、Windows ストアアプリでしか使えない為、Windows Formアプリでは使用できません。
(Windows Form はもう使うな!という事でしょうか (涙) )結論としては、コントールパネルの設定で、IMEの制御をユーザ単位から アプリ単位に変更する事ができます。
これで、Windows Formアプリでも 従来通りIMEの制御を行う事が出来ます。おわりにこの方法だと、アプリをインストールする端末すべてに設定が必要となり、とっても面倒です。。。
しかし、今の所これしか方法がない状態です。
これからは Windows Formではなく、WPFや Windows ストアアプリで作れという事ですかね (^^;)

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]MailKitを使ってメールを送るサンプルコードです。(C#)UTF8/iso-2022-jpのエンコーディング指定、GMail/YahooのSMTPサーバで送るなど、4つのサンプルコードでMailKitの使い方を紹介します。MailKitって何?2017年に.NET標準のSystem.Net.Mail.SmtpClientが廃止予定となり、Microsoftより今後はオープンソースライブラリである、MailKitに置き換えるとアナウンスがありました。既にSmtpClientは非推奨になっており、今後は廃止されていきます。現在、SmtpClientを使用したソースコードには、Visual StudioからMailKitを使うよう警告が出るようになっています。さっそく、MailKitを使ってメールを送信するサンプルコードを作っていきます。UTF8でメールを送信文字エンコーディングを、UTF8でメールを送信するサンプルコードです。
MailKitは、デフォルトの文字エンコーディングがUTF8なっている為、シンプルなコードでメールを送信する事ができます。var host ="<smtp server name>"; var port =25;// or 587using(var smtp =new MailKit.Net.Smtp.SmtpClient()){//SMTPサーバに接続する smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);//認証が必要な場合は、以下のコメントを解除//smtp.Authenticate("<id>", "<password>");//送信するメールを作成する var mail =new MimeKit.MimeMessage(); var builder =new MimeKit.BodyBuilder(); mail.From.Add(new MimeKit.MailboxAddress("",&quo…