Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
14
Help us understand the problem. What is going on with this article?
@yuki_chrono

Cloud9上でRails 5.1+React.jsの環境構築手順

More than 3 years have passed since last update.

はじめに

Cloud9上でRails5.1 + React.js環境構築の手順です。
基本コピペで行けます。

細かいことは抜きにして、とりあえず環境作りたい方対象です。

前提条件

・Cloud9のアカウントあること
・Blankでworkspce作成済みであること

Ruby 2.3.1 インストール

rvm install 2.3.1

Rails5.1 インストール

gem install rails

Bundlerインストール

gem install bundler

Nodo.jsのインストール

nvm install v7.7.1

npmでnode.jsのアップグレード

npm update -g npm

Railsアプリケーション作成とディレクトリ移動

rails new webpacker-sample && cd webpacker-sample

Gemfile修正

webpacker-sample/Gemfile
gem 'webpacker', github: "rails/webpacker"

bundle install

bundle install

Yarnインストール

npm i -g yarn

Webpackerインストール

rake webpacker:install

コントローラ作成

rails g controller pages index

application.html.erbに追記

app/views/layouts/application.html.erb
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Reactのインストール

rake webpacker:install:react

application.jsに追記

app/javascript/packs/application.js
require('./hello_react.jsx')

ビルド

bin/webpack

サーバー起動

rails s

Webアクセス確認

Preview→Preview Running Applicationでブラウザ起動し、
以下ドメイン部を変更したパスでアクセス。

Hello React!と表示されれば成功です!

最後に

以下のファイルをいじることでReactの実装ができます。
ファイル修正後、「bin/webpack」のビルドを都度実行する必要があります。
(ビルドが面倒くさい場合は、下記参考を参照ください。)

/webpacker-sample/app/javascript/packs/hello_react.jsx
/webpacker-sample/app/views/pages/index.html.erb

参考

以下を参考にしました。
http://qiita.com/yoshiokaCB/items/564ed0440f0428c0009a#%E8%BF%BD%E8%A8%98

おわり

14
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yuki_chrono
Webアプリエンジニア Java/JavaScript バックエンドアプリ(決済系)作ってきました。 Ruby on railsとかで開発しているフリーランスエンジニア
mof-mof
「つくって人をしあわせにする」をビジョンにAIチャットボットや開発チームレンタル等のサービスを提供している渋谷のIT企業です

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
14
Help us understand the problem. What is going on with this article?