@@ -67,51 +67,40 @@ $ rails new my-app
6767$ cd my-app
6868```
6969
70- ##### 2) Add ` webpacker ` and ` react-rails ` to your gemfile :
70+ ##### 2) Add ` react-rails ` to your Gemfile :
7171``` ruby
72- gem ' webpacker'
7372gem ' react-rails'
7473```
75- Note: For Rails 6, You don't need to add ` gem 'webpacker' ` to your gemfile in step 2 above.
76- Webpacker is the default javascript compiler for Rails 6, and is already added to your gemfile
77- when you create a new app.
74+ Note: On rails versions < 6.0, You need to add ` gem 'webpacker' ` to your Gemfile in step 2 above.
7875
7976##### 3) Now run the installers:
8077
81- ###### Rails 6.x:
78+ ###### Rails 6.x and 5.x :
8279```
8380$ bundle install
84- $ rails webpacker:install
85- $ rails webpacker:install:react
81+ $ rails webpacker:install # OR (on rails version < 5.0) rake webpacker:install
82+ $ rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
8683$ rails generate react:install
8784```
88- Note: For Rails 6, You don't need to add ` javascript_pack_tag ` as in Step 4. Since it's already added by default.
8985
90- ###### Rails 5.x:
91- ```
92- $ bundle install
93- $ rails webpacker:install # OR (on rails version < 5.0) rake webpacker:install
94- $ rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
95- $ rails generate react:install
96- ```
9786This gives you:
9887
9988- ` app/javascript/components/ ` directory for your React components
10089- [ ` ReactRailsUJS ` ] ( #ujs ) setup in ` app/javascript/packs/application.js `
10190- ` app/javascript/packs/server_rendering.js ` for [ server-side rendering] ( #server-side-rendering )
10291
103- ##### 4) Link the JavaScript pack in Rails view using ` javascript_pack_tag ` [ helper] ( https://github.com/rails/webpacker#usage ) :
92+ Note: On rails versions < 6.0, link the JavaScript pack in Rails view using ` javascript_pack_tag ` [ helper] ( https://github.com/rails/webpacker#usage ) :
10493``` erb
10594<!-- application.html.erb in Head tag below turbolinks -->
10695<%= javascript_pack_tag 'application' %>
10796```
10897
109- ##### 5 ) Generate your first component:
98+ ##### 4 ) Generate your first component:
11099```
111100$ rails g react:component HelloWorld greeting:string
112101```
113102
114- ##### 6 ) You can also generate your component in a subdirectory:
103+ ##### 5 ) You can also generate your component in a subdirectory:
115104```
116105$ rails g react:component my_subdirectory/HelloWorld greeting:string
117106```
@@ -124,14 +113,14 @@ Example:
124113<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>
125114```
126115
127- ##### 7 ) [ Render it in a Rails view] ( #view-helper ) :
116+ ##### 6 ) [ Render it in a Rails view] ( #view-helper ) :
128117
129118``` erb
130119<!-- erb: paste this in view -->
131120<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
132121```
133122
134- ##### 8 ) Lets Start the app:
123+ ##### 7 ) Lets Start the app:
135124```
136125$ rails s
137126```
0 commit comments