RailsでReactJSを使ってみようという企画をスタートしてみます。
まずはRailsのプロジェクトを作って、ReactJSをインストールして、HelloWorldを出力するところまでの準備編です。
これから何回かにわたり連載する内容はGitHubの下記のURLで公開しています。
https://github.com/h-mito/rails_with_react
[bash]
$ cd
$ cd workspace
$ rails new rails_with_react
$ cd rails_with_react
$ nano Gemfile
[/bash]
末尾に1行追加する
[bash]
# …省略
gem ‘react-rails’, ‘~> 1.0’ # 追加する
[/bash]
react-railsをインストールして、プロジェクトに組み込む
[bash]
$ bundle install
$ rails g react:install
[/bash]
[bash]
$ rails g react:component FirstTest
[/bash]
以下のようなソースがapp/assets/javascripts/componentsに生成されると思います。
[bash]
var FirstTest = React.createClass({
render: function() {
return
これでも問題ないのですが、ReactJS本家の Get Started風に以下のように書き換えます。
で、renderメソッドに Hello Worldの出力を追加します。
[bash]
class FirstTest extends React.Component{
constructor(props){
super(props);
}
render(){
return (
);
}
}
[/bash]
[bash]
$ rails g controller first index
[/bash]
viewsに出来上がったビューに先ほど作ったReactコンポーネントを出力してみます。
[bash]
Find me in app/views/first/index.html.erb
<%= react_component('FirstTest') %>
[/bash]
[bash]
$rails s
[/bash]
ブラウザーで 以下のURLへアクセスし、以下のような画像が出れば成功。
localhost:3000/first/index
フロントReactJS、バックエンドRailsという構成でサービス立ち上げに関わってた。 思うんだけど、Macを開発に使うのはわかるんだけど、なぜWindows使う人がいるんだろ？ どうせリリースするのLinuxベースのOSなんだし、フロントはiPhoneのSafariか AndroidのChrome、まぁあとはWindowsのChrome,Firefox,IE,Edge Macはほとんど使わないんでわからないんだけど、Windowsはほんともっさり動作だよね。 これだけマシンのスペックがどんどん上がっているにもかかわらず、嫌がらせのように 動きがトロい。 コンソールでコマンドライン叩くのがほ…
はじめに dockerを使って、Rails（サーバーサイド）の環境を１つ、React(node)（クライアントサイド）の環境を１つ作る。 両環境ではChromeとAtomが動かせて、開発できるようになるところまでが目標です。 docker 自体触るのが初めてだったので、基本的なことから記載しておきます。 加えて初心者なので、間違えがあったらごめんなさい。 docker自体のインストールはあちこちに記載されているので、そちらを参照ください。 docker イメージのダウンロード まず、ubuntuのイメージを検索します。 スター(STARS)が多い、イメージをダウンロード（PULL)すればOKで…
はじめに Webpackを使って、Sassをコンパイルする方法です。 Webにそれなりにやり方が載ってますが、2017年4月末現在では、動く例が少なかったので、 実際に動いた例を示しておきます。 末尾にReactなんかの開発で ES6をノーマルなJavascriptに変換するときとの合わせ技の方法も記載しておきます。 コンパイル環境構築 [bash] $ mkdir test-saas $ cd test-saas $ npm init -y $ npm install webpack extract-text-webpack-plugin css-loader sass-loader sty…
はじめに React Nativeを初めて１０日ほどが立ちました。画面デザインが難しいですね。 flex layoutを使うと、それなりの画面は出来ますが・・・ ヘッダー(Navigation)とフッター(Menu or Tab)のサイズが 曖昧になり、 時には隠れてしまうケースもあります。 で、どうすりゃいいんだと考えて、今、思いついたのは、 flex layoutを諦めて、固定ピッチで画面デザインをしてやること。 固定ピッチと言っても、デバイスの画面サイズを判定して、 ヘッダーはこの高さ、メインのコンテンツはこの高さ、フッターはこの高さ というのを計算で求めてやるのが、一番スマートかなとい…
はじめに Reactでファイルアップロードを実装してみたくて、どのような方法があるのか調べてみた。 あまり深く調べてはないが、１つめに良さそうだと感じた react-dropzone を使ってみたら、 これがかなりいい！！ あまりに気に入ってしまったので、react-dropzoneでアップロード対象のファイルを選んで、 axiosでPOSTして、サーバーサイドのRailsでファイルを保存するところまでをざっと紹介します。 Reactのことは分かっている前提ですすめますので、あしからず。 出来上がりのイメージはこんな感じ 画面左上に ファイルをドロップする場所があり、その右側にドロップされたフ…
はじめに ReactでSPAを作ることになって、ログイン認証にメール＆パスワードの認証に加えて、 GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。 バックエンドはRailsだが、あくまでAPIサーバー的な立場なので メジャーなomniauth なんかは使えそうにない。。。 前回のGoogle編に続き、今回はTwitter編。 あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。 React+Reduxの環境なんですが、そこまで立ち入ると話がややこしくなるので、 実装のエキス部分だけを記載してみます。 Twitter Developerにア…
はじめに ReactでSPAを作ることになって、ログイン認証にメール＆パスワードの認証に加えて、 GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。 バックエンドはRailsだが、あくまでAPIサーバー的な立場なので メジャーなomniauth なんかは使えそうにない。。。 あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。 React+Reduxの環境なんですが、そこまで立ち入ると話がややこしくなるので、 実装のエキス部分だけを記載してみます。 Google Developer Consoleにアプリ登録 Google Develope…
はじめに React+Redux+RailsでSPAアプリを作ることになったので、あれこれ調べたのでメモです。 SPAというと、当然ですが、１つのページであれこれできちゃうものを作らなきゃいけないわけで・・・ そうなるとコンテンツ制御の仕組みが必要です。そこで登場するのがReact-Router-Dom。 で、これ単体では使い方簡単なんですが、RailsとReduxを絡めて動作させる方法が分からなかったので あれこれ調べて、なんとか動くところまでたどり着いたので、メモを公開します。 React-Routerは古いようで、React-Router-Domにしてみました。。 ドキュメントが超少なく…
Leave a comment