Skip to content

Commit cc05bd7

Browse files
authored
align the steps structured
1 parent 77831ba commit cc05bd7

File tree

1 file changed

+14
-17
lines changed

1 file changed

+14
-17
lines changed

README.md

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -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
```
6767
gem 'webpacker'
6868
gem '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-
7978
This 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

117114
The component name tells `react-rails` where to load the component. For example:
118115

0 commit comments

Comments
 (0)