You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
React-Rails is a flexible tool to use [React](http://facebook.github.io/react/) with Rails. It:
9
+
React-Rails is a flexible tool to use [React](http://facebook.github.io/react/) with Rails. The benefits:
10
10
* Automatically renders React server-side and client-side
11
11
* Supports Webpacker 3.x, 2.x, 1.1+
12
12
* Supports Sprockets 4.x, 3.x, 2.x
13
13
* Lets you use [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html), [ES6](http://es6-features.org/), [TypeScript](https://www.typescriptlang.org/), [CoffeeScript](http://coffeescript.org/)
14
14
15
-
Example app code available here: https://github.com/BookOfGreg/react-rails-example-app
15
+
A source code example utilizing React-Rails: https://github.com/BookOfGreg/react-rails-example-app
16
16
17
17
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
18
18
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
@@ -46,30 +46,30 @@ Example app code available here: https://github.com/BookOfGreg/react-rails-examp
46
46
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
47
47
48
48
49
-
The React-Rails Wiki has lots of additional information about React-Rails including many "how-to" articles and answers to the most frequently asked questions. Please browse the Wiki after finishing this README:
50
-
49
+
After reading this README file, additional information about React-Rails can be found in the Wiki page:
51
50
https://github.com/reactjs/React-Rails/wiki
51
+
The Wiki page features a significant amount of additional information about React-Rails which includes instructional articles and answers to the most frequently asked questions.
52
52
53
53
54
54
## Get started with Webpacker
55
55
56
-
[or Get started with Sprockets](#use-with-asset-pipeline)
56
+
[Alternatively, get started with Sprockets](#use-with-asset-pipeline)
57
57
58
-
[Webpacker](https://github.com/rails/webpacker)integrates modern JS tooling with Rails.
58
+
[Webpacker](https://github.com/rails/webpacker)provides modern JS tooling for Rails. Here are the listed steps for integrating Webpacker and Rails-React with Rails:
59
59
60
-
1) Create a new Rails app:
60
+
##### 1) Create a new Rails app:
61
61
```
62
62
$ rails new my-app
63
63
$ cd my-app
64
64
```
65
65
66
-
2) Add `webpacker` and `react-rails` to your gemfile
66
+
##### 2) Add `webpacker` and `react-rails` to your gemfile:
67
67
```
68
68
gem 'webpacker'
69
69
gem 'react-rails'
70
70
```
71
71
72
-
3) Now run the installers:
72
+
##### 3) Now run the installers:
73
73
```
74
74
$ bundle install
75
75
$ rails webpacker:install # OR (on rails version < 5.0) rake webpacker:install
@@ -82,37 +82,39 @@ This gives you:
82
82
-[`ReactRailsUJS`](#ujs) setup in `app/javascript/packs/application.js`
83
83
-`app/javascript/packs/server_rendering.js` for [server-side rendering](#server-side-rendering)
84
84
85
-
4) Link the JavaScript pack in Rails view using `javascript_pack_tag`[helper](https://github.com/rails/webpacker#usage), for example:
85
+
##### 4) Link the JavaScript pack in Rails view using `javascript_pack_tag`[helper](https://github.com/rails/webpacker#usage):
86
86
```
87
87
<!-- application.html.erb in Head tag below turbolinks -->
88
88
<%= javascript_pack_tag 'application' %>
89
89
```
90
90
91
-
5) Generate your first component:
91
+
##### 5) Generate your first component:
92
92
```
93
93
$ rails g react:component HelloWorld greeting:string
94
94
```
95
95
96
-
6) You can also generate your component in a subdirectory:
96
+
##### 6) You can also generate your component in a subdirectory:
97
97
```
98
98
$ rails g react:component my_subdirectory/HelloWorld greeting:string
99
99
```
100
100
Note: Your component is added to `app/javascript/components/` by default.
101
101
102
102
103
-
7)[Render it in a Rails view](#view-helper):
103
+
##### 7) [Render it in a Rails view](#view-helper):
104
104
105
105
```
106
106
<!-- erb: paste this in view -->
107
107
<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
108
108
```
109
109
110
-
8) Lets Start the app:
110
+
##### 8) Lets Start the app:
111
111
```
112
112
$ rails s
113
113
```
114
114
output: greeting: Hello from react-rails", inspect webpage in your browser too see change in tag props.
115
115
116
+
### Component name
117
+
116
118
The component name tells `react-rails` where to load the component. For example:
0 commit comments