@@ -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