スポンサーリンク

Rails5+react+reduxを写経してみる=>挫折

前回、本当はriotでやりたかったのだが、なぜか環境構築すらできずに爆死。
(MacOSじゃなきゃ容易にできない?)

http://twosquirrel.mints.ne.jp/?p=11174

下記のサイトでは、Reactの使い方について、英語だが、ソースコードもアップロードされていて、試してみたくなったので、どこまでできるか分からないがやってみる。

06 Sep 2016 on react | redux | webpack | npm | es6
Building a Simple CRUD App with React + Redux: Part I
Sophie DeBenedetto
http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/

 

(環境)
Windows8.1
VirtualBox 5.0.20
Vagrant 1.8.1
CentOS7.2
Ruby 2.3.1
Rails 5.0.0.1

(0)環境構築

Railsのインストールについては、以下の通りに行った

http://twosquirrel.mints.ne.jp/?p=7381

(1)Rails API の作成。

ソースコードはこちらにあるのだが、作り方の解説がないのが若干つらい。。。と思ったら、ちゃんと解説があった!(=>がしかし、たとえば、userモデルなど、全部は記載していない気がした。。。)

15 Jun 2016 on rails api | rails 5 | json api | active model serializer
Building a Super Simple Rails API, JSON API Edition
Sophie DeBenedetto
http://www.thegreatcodeadventure.com/building-a-super-simple-rails-api-json-api-edition-2/

[sourcecode language="javascript" padlinenumbers="true"]
rails new catbook –api
[/sourcecode]

Gemfileに以下を追加して、bundle install

gem 'active_model_serializers' gem 'rack-cors'

 

config/initializers/active_model_serializer.rb を作成

config/initializers/cors.rb の訂正

rails generate model cat name:string breed:string weight:string temperament:string

作成された db/migrate/2016xxxxxxxxxxxxx_create_cats.rb

rails generate model hobby name:string
rails db:migrate

 

rails generate model CatHobby cat:references:index hobby:references:index

rails generate model user first_name:string last_name:string email:string password_digest:string

 

app/models/user.rb に、    has_secure_password を追加。

 

 

Step3: Routes and Controllers

config/routes.rb

app/controllers/ フォルダに、 apiフォルダ、その下にv1フォルダ、その下にcats_controller.rb と、 hobbies_controller.rb を作成

Step4: Serializers and JSON Rendering

app/serializers/cat_serializer.rb  (ここら辺から何やってるのかわからなくなってきた)

 

app/api/v1/cats_controllers.rb

 

userモデルは余計だったが、これで作れたのかな???

rails s -b 0.0.0.0

db/seeds.rb

rails db:seed

rails s -b 0.0.0.0

localhost:3000/api/v1/cats

なんかいけてそうな気がする。しかし、これだと、index, showのみの気がする。
CRUD(create, read, update, delete)のreadしかできない気が、、、

もう一度、

を見てみると、branchがいろいろあり、masterでは、index. showのみだが、

Branch: active-model-adapter では、

https://github.com/SophieDeBenedetto/catbook-api/tree/active-model-adapter

https://github.com/SophieDeBenedetto/catbook-api/blob/active-model-adapter/app/controllers/api/v1/cats_controller.rb

のように、create, update, destroy もできるかも、、、

しかし、これでようやく、react.jsの環境構築に入ることができる。

http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/

(1)catbook-redux フォルダの作成

c:/vm/riot/ に catbook (Railsのapi)フォルダ を置いているが、それと同列に、
catbook-redux フォルダを作成することとする。

 

このあと、結局、catbook-redux の中身をブラウザで表示する方法が分からず、挫折、、、

 

(参考)

Rails5でAPIモードでファイルアップロード機能を作成した際のサンプル解説とポイントまとめ
RubyRuby11851Rails5Rails597apiapi582RailsRails7701
fumiyasac@githubが2016/09/30に投稿(2016/10/01に編集)
http://qiita.com/fumiyasac@github/items/1ef428095f5845988463

2013-02-12
いつも忘れる「Railsのgenerateコマンド」の備忘録
http://maeharin.hatenablog.com/entry/20130212/rails_generate

2014-01-10
Rails4 外部キーをテーブルに設定するための、3通りのマイグレーションの書き方。
http://tkymtk.hatenablog.com/entry/rails-4-three-way-to-write-migration-2014-1

ActiveModel::Serializersを使ってサクサクjsonを出力しよう
kakkunpakkunが2014/09/01に投稿
http://qiita.com/kakkunpakkun/items/1c23b936d13f08a42752

rake db:seedを使った初期データの投入
http://www.rubylife.jp/rails/model/index10.html

Javascript,Rails5

Posted by twosquirrel