@@ -56,63 +56,60 @@ https://github.com/reactjs/React-Rails/wiki
56
56
57
57
[ Webpacker] ( https://github.com/rails/webpacker ) integrates modern JS tooling with Rails.
58
58
59
- Create a new Rails app:
59
+ 1 ) Create a new Rails app:
60
60
```
61
- $ rails new my-app --webpack=react
61
+ $ rails new my-app
62
62
$ cd my-app
63
63
```
64
64
65
- Add ` webpacker ` and ` react-rails ` to your gemfile
65
+ 2 ) Add ` webpacker ` and ` react-rails ` to your gemfile
66
66
```
67
67
gem 'webpacker'
68
68
gem 'react-rails'
69
69
```
70
70
71
- Now run the installers:
71
+ 3 ) Now run the installers:
72
72
```
73
73
$ bundle install
74
74
$ rails webpacker:install # OR (on rails version < 5.0) rake webpacker:install
75
- $ rails generate react:install
76
75
$ rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
76
+ $ rails generate react:install
77
77
```
78
-
79
78
This gives you:
80
79
81
80
- ` app/javascript/components/ ` directory for your React components
82
81
- [ ` ReactRailsUJS ` ] ( #ujs ) setup in ` app/javascript/packs/application.js `
83
82
- ` app/javascript/packs/server_rendering.js ` for [ server-side rendering] ( #server-side-rendering )
84
83
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:
87
85
```
88
86
<!-- application.html.erb in Head tag below turbolinks-->
89
87
<%= javascript_pack_tag 'application' %>
90
88
```
91
89
92
- Generate your first component:
93
-
90
+ 5 ) Generate your first component:
94
91
```
95
92
$ rails g react:component HelloWorld greeting:string
96
93
```
97
94
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:
102
96
```
103
97
$ rails g react:component my_subdirectory/HelloWorld greeting:string
104
98
```
99
+ Note: Your component is added to ` app/javascript/components/ ` by default.
100
+
105
101
106
- [ Render it in a Rails view] ( #view-helper ) :
102
+ 7 ) [ Render it in a Rails view] ( #view-helper ) :
107
103
108
104
``` erb: paste this in view
109
- <%= react_component("HelloWorld", { greeting: "Hello" }) %>
105
+ <%= react_component("HelloWorld", { greeting: "Hello from react-rails. " }) %>
110
106
```
111
107
112
- Lets Start the app:
108
+ 8 ) Lets Start the app:
113
109
```
114
110
$ rails s
115
111
```
112
+ output: greeting: Hello from react-rails", inspect webpage in your browser too see change in tag props.
116
113
117
114
The component name tells ` react-rails ` where to load the component. For example:
118
115
0 commit comments