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
Copy file name to clipboardExpand all lines: README.md
+6-27Lines changed: 6 additions & 27 deletions
Original file line number
Diff line number
Diff line change
@@ -39,7 +39,9 @@ Next, run the installation script.
39
39
rails g react:install
40
40
```
41
41
42
-
This will require `react.js`, `react_ujs.js`, and a `components.js` manifest file in application.js, and create a directory named `app/assets/javascripts/components` for you to store React components in.
42
+
This will:
43
+
- create a `components.js` manifest file and a `app/assets/javascripts/components/` directory, where you will put your compoennts
44
+
- require `react.js`, `react_ujs.js`, and `components.js` in `application.js`
43
45
44
46
## Usage
45
47
@@ -67,15 +69,7 @@ MyApp::Application.configure do
67
69
end
68
70
```
69
71
70
-
Then, you can include the requested build in your front-end by restarting your Rails server and adding `react` to your manifest:
71
-
72
-
```js
73
-
// app/assets/javascripts/application.js
74
-
75
-
//= require react
76
-
```
77
-
78
-
It will provide the build of React.js which was specified by the configurations.
72
+
After restarting your Rails server, `//= require react` will provide the build of React.js which was specified by the configurations.
79
73
80
74
In a pinch, you can also provide your own copies of React.js and JSXTransformer. Just add `react.js` or `JSXTransformer.js` (case-sensitive) files to `app/vendor/assets/javascripts/react/` and restart your development server. If you need different versions of React in different environments, put them in directories that match `config.react.variant`. For example, if you set `config.react.variant = :development`, you could put a copy of `react.js` in `/vendor/assets/react/development/`.
81
75
@@ -102,15 +96,7 @@ Component = React.createClass
102
96
103
97
### Rendering & mounting
104
98
105
-
`react-rails` includes a view helper (`react_component`) and an unobtrusive JavaScript (UJS) driver which work together to put React components on the page. You should require the UJS driver in your manifest after `react` (and after `turbolinks` if you use [Turbolinks](https://github.com/rails/turbolinks))
106
-
107
-
```js
108
-
// app/assets/javascripts/application.js
109
-
110
-
//= require turbolinks
111
-
//= require react
112
-
//= require react_ujs
113
-
```
99
+
`react-rails` includes a view helper (`react_component`) and an unobtrusive JavaScript driver (`react_ujs`) which work together to put React components on the page. You should require the UJS driver in your manifest after `react` (and after `turbolinks` if you use [Turbolinks](https://github.com/rails/turbolinks))
114
100
115
101
The __view helper__ puts a `div` on the page with the requested component class & props. For example:
-`**other` Any other arguments (eg `class:`, `id:`) are passed through to [`content_tag`](http://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).
139
125
140
126
141
-
142
127
### Server rendering
143
128
144
129
To render components on the server, pass `prerender: true` to `react_component`:
@@ -155,13 +140,7 @@ _(It will be also be mounted by the UJS on page load.)_
155
140
156
141
There are some requirements for this to work:
157
142
158
-
-`react-rails` must load your code. By convention, it looks for a `assets/javascripts/components.js` file through the asset pipeline and loads that. This file must include your components _and_ their dependencies (eg, Underscore.js). For example:
159
-
160
-
```js
161
-
// app/assets/javascripts/components.js
162
-
//= require_tree ./components
163
-
// ^^ loads all files in `app/assets/javascripts/components/`
164
-
```
143
+
-`react-rails` must load your code. By convention, it uses `components.js`, which was created by the install task. This file must include your components _and_ their dependencies (eg, Underscore.js).
165
144
- Your components must be accessible in the global scope. If you are using `.js.jsx.coffee` files then the wrapper function needs to be taken into account:
0 commit comments