@@ -56,63 +56,60 @@ https://github.com/reactjs/React-Rails/wiki
5656
5757[ Webpacker] ( https://github.com/rails/webpacker ) integrates modern JS tooling with Rails.
5858
59- Create a new Rails app:
59+ 1 ) Create a new Rails app:
6060```
61- $ rails new my-app --webpack=react
61+ $ rails new my-app
6262$ cd my-app
6363```
6464
65- Add ` webpacker ` and ` react-rails ` to your gemfile
65+ 2 ) Add ` webpacker ` and ` react-rails ` to your gemfile
6666```
6767gem 'webpacker'
6868gem 'react-rails'
6969```
7070
71- Now run the installers:
71+ 3 ) Now run the installers:
7272```
7373$ bundle install
7474$ rails webpacker:install # OR (on rails version < 5.0) rake webpacker:install
75- $ rails generate react:install
7675$ rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
76+ $ rails generate react:install
7777```
78-
7978This gives you:
8079
8180- ` app/javascript/components/ ` directory for your React components
8281- [ ` ReactRailsUJS ` ] ( #ujs ) setup in ` app/javascript/packs/application.js `
8382- ` app/javascript/packs/server_rendering.js ` for [ server-side rendering] ( #server-side-rendering )
8483
85- Link the JavaScript pack in Rails view using ` javascript_pack_tag ` [ helper] ( https://github.com/rails/webpacker#usage ) , for example:
86-
84+ 4 ) Link the JavaScript pack in Rails view using ` javascript_pack_tag ` [ helper] ( https://github.com/rails/webpacker#usage ) , for example:
8785```
8886<!-- application.html.erb in Head tag below turbolinks-->
8987<%= javascript_pack_tag 'application' %>
9088```
9189
92- Generate your first component:
93-
90+ 5 ) Generate your first component:
9491```
9592$ rails g react:component HelloWorld greeting:string
9693```
9794
98- Your component is added to ` app/javascript/components/ ` by default.
99-
100- You can also generate your component in a subdirectory:
101-
95+ 6 ) You can also generate your component in a subdirectory:
10296```
10397$ rails g react:component my_subdirectory/HelloWorld greeting:string
10498```
99+ Note: Your component is added to ` app/javascript/components/ ` by default.
100+
105101
106- [ Render it in a Rails view] ( #view-helper ) :
102+ 7 ) [ Render it in a Rails view] ( #view-helper ) :
107103
108104``` erb: paste this in view
109- <%= react_component("HelloWorld", { greeting: "Hello" }) %>
105+ <%= react_component("HelloWorld", { greeting: "Hello from react-rails. " }) %>
110106```
111107
112- Lets Start the app:
108+ 8 ) Lets Start the app:
113109```
114110$ rails s
115111```
112+ output: greeting: Hello from react-rails", inspect webpage in your browser too see change in tag props.
116113
117114The component name tells ` react-rails ` where to load the component. For example:
118115
0 commit comments