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: CHANGELOG.md
+17-1Lines changed: 17 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,6 +5,20 @@ Contributors: please follow the recommendations outlined at [keepachangelog.com]
5
5
6
6
## [Unreleased]
7
7
*Please add entries here for your pull requests.*
8
+
### Fixed
9
+
- Added OS detection for install generator, system call for Windows and unit-tests for it. [#666](https://github.com/shakacode/react_on_rails/pull/666) by [GeorgeGorbanev](https://github.com/GeorgeGorbanev).
10
+
11
+
## [6.4.0] - 2017-1-12
12
+
13
+
### Fixed
14
+
- Removed foreman as a dependency. [#678](https://github.com/shakacode/react_on_rails/pull/678) by [x2es](https://github.com/x2es).
15
+
16
+
### Added
17
+
- Automatically generate __i18n__ javascript files for `react-intl` when the serve starts up. [#642](https://github.com/shakacode/react_on_rails/pull/642) by [JasonYCHuang](https://github.com/JasonYCHuang).
18
+
19
+
## [6.3.5] - 2017-1-6
20
+
### Fixed
21
+
- The redux generator now creates a HelloWorld component that uses redux rather than local state. [#669](https://github.com/shakacode/react_on_rails/issues/669) by [justin808](https://github.com/justin808).
8
22
9
23
## [6.3.4] - 2016-12-25
10
24
##### Fixed
@@ -413,7 +427,9 @@ Best done with Object destructing:
Copy file name to clipboardExpand all lines: CONTRIBUTING.md
+7-6Lines changed: 7 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -126,11 +126,11 @@ npm install -g phantomjs
126
126
127
127
Note this *must* be installed globally for the dummy test project rspec runner to see it properly.
128
128
129
-
### NPM link
130
-
Because the example and dummy apps rely on the react-on-rails node package, they should link directly to your local version to pick up any changes you may have made to that package. To achieve this, switch to the app's root directory and run:
129
+
### Local Node Package
130
+
Because the example and dummy apps rely on the react-on-rails node package, they should link directly to your local version to pick up any changes you may have made to that package. To achieve this, switch to the teat app's root directory and run this command below which runs something like [this script](spec/dummy/package.json#L14)
131
131
132
132
```sh
133
-
npm run node_package
133
+
npm run install-react-on-rails
134
134
```
135
135
136
136
From now on, the example and dummy apps will use your local node_package folder as the react-on-rails node package. This will also be done automatically for you via the `rake examples:prepare_all` rake task.
@@ -141,6 +141,7 @@ From now on, the example and dummy apps will use your local node_package folder
To run the test app, it's **CRITICAL** to not just run `rails s`. You have to run `foreman start`. If you don't do this, then `webpack` will not generate a new bundle, and you will be seriously confused when you change JavaScript and the app does not change. If you change the webpack configs, then you need to restart foreman. If you change the JS code for react-on-rails, you need to run `node_package/scripts/build`. Since the react-on-rails package should be sym linked, you don't have to `npm i react-on-rails` after every change.
190
+
To run the test app, it's **CRITICAL** to not just run `rails s`. You have to run `foreman start`. If you don't do this, then `webpack` will not generate a new bundle, and you will be seriously confused when you change JavaScript and the app does not change. If you change the webpack configs, then you need to restart foreman. If you change the JS code for react-on-rails, you need to run `npm run build`. Since the react-on-rails package should be sym linked, you don't have to `npm i react-on-rails` after every change.
190
191
191
192
### RSpec Testing
192
193
Run `rake` for testing the gem and `spec/dummy`. Otherwise, the `rspec` command only works for testing within the sample apps, like `spec/dummy`.
@@ -217,7 +218,7 @@ The main installer can be run with ```rails generate react_on_rails:install```
217
218
The generators are covered by generator tests using Rails's generator testing helpers, but it never hurts to do a sanity check and explore the API. See [generator_testing_script.md](generator_testing_script.md) for a script on how to run the generator on a fresh project.
218
219
219
220
### Linting
220
-
All linting is performed from the docker container for CI. You will need docker and docker-compose installed locally to lint code changes via the lint container. You can lint locally by running `node_package/scripts/lint`
221
+
All linting is performed from the docker container for CI. You will need docker and docker-compose installed locally to lint code changes via the lint container. You can lint locally by running `npm run lint && npm run flow`
221
222
222
223
*[Install Docker Toolbox for Mac](https://www.docker.com/toolbox)
223
224
*[Install Docker Compose for Linux](https://docs.docker.com/compose/install/)
[](https://travis-ci.org/shakacode/react_on_rails)[](https://app.codeship.com/projects/187011)[](https://gemnasium.com/shakacode/react_on_rails)[](https://badge.fury.io/rb/react_on_rails)[](https://badge.fury.io/js/react-on-rails)[](https://codeclimate.com/github/shakacode/react_on_rails)[](https://coveralls.io/github/shakacode/react_on_rails?branch=master)
2
2
3
3
**For a complete example of this gem, see our live demo at [www.reactrails.com](http://www.reactrails.com). ([Source Code](https://github.com/shakacode/react-webpack-rails-tutorial))**
4
4
5
-
Aloha from Justin Gordon ([bio](http://www.railsonmaui.com/about)) and the [ShakaCode](http://www.shakacode.com) Team! We're actively looking for new projects involving React, React-Native, and Rails. Please contact me at [[email protected]](mailto:[email protected]) if we could potentially help you in any way. Besides consulting on bigger projects, [ShakaCode](http://www.shakacode.com) is doing ScreenHero plus Slack/Github based coaching for React on Rails. See our blog post [Can ShakaCode Help You?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9) for more information.
5
+
Aloha from Justin Gordon ([bio](http://www.railsonmaui.com/about)) and the [ShakaCode](http://www.shakacode.com) Team! We're actively looking for new projects involving React, React-Native, and Rails. Please [contact me](mailto:[email protected]) if we could potentially help you in any way. Besides consulting on bigger projects, [ShakaCode](http://www.shakacode.com) is doing ScreenHero plus Slack/Github based coaching for React on Rails. See our blog post [Can ShakaCode Help You?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9) for more information.
6
6
7
-
We're offering a free half-hour project consultation, on anything from React on Rails to any aspect of web application development for both consumer and enterprise products. In addition to React.js and Rails, we're doing React-Native iOS and Android apps!
7
+
I'm offering a free half-hour project consultation, on anything from React on Rails to any aspect of web application development for both consumer and enterprise products. In addition to React.js and Rails, we're doing React-Native iOS and Android apps!
8
8
9
9
Whether you have a new project or need help on an existing project, feel free to contact me directly at [[email protected]](mailto:[email protected]) and thanks in advance for any referrals!
10
10
11
11
Your support keeps this project going.
12
12
13
-
(Want to become a contributor? [Contact us](mailto:[email protected]) for an Slack team invite! Also, see ["easy" issues](https://github.com/shakacode/react_on_rails/labels/easy) and [issues for the full tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/issues?q=is%3Aissue+is%3Aopen+label%3Aeasy).)
13
+
(Want to become a contributor? [Contact us](mailto:[email protected]) for a Slack team invite! Also, see ["easy" issues](https://github.com/shakacode/react_on_rails/labels/easy) and [issues for the full tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/issues?q=is%3Aissue+is%3Aopen+label%3Aeasy
14
14
15
15
Follow [@ShakaCode](https://twitter.com/shakacode) for notications of new releases.
16
16
@@ -50,6 +50,7 @@ React on Rails integrates Facebook's [React](https://github.com/facebook/react)
-[Including your React Component in your Rails Views](#including-your-react-component-in-your-rails-views)
53
+
-[I18n](#i18n)
53
54
+[How it Works](#how-it-works)
54
55
-[Client-Side Rendering vs. Server-Side Rendering](#client-side-rendering-vs-server-side-rendering)
55
56
-[Building the Bundles](#building-the-bundles)
@@ -120,6 +121,8 @@ We're definitely not doing that. With react_on_rails, webpack is mainly generati
120
121
121
122
6. Start your Rails server:
122
123
124
+
with foreman installed (`gem install foreman`)
125
+
123
126
```bash
124
127
foreman start -f Procfile.dev
125
128
```
@@ -168,7 +171,15 @@ Configure the `config/initializers/react_on_rails.rb`. You can adjust some neces
168
171
// inside your React component
169
172
this.props.name // "Stranger"
170
173
```
171
-
174
+
175
+
### I18n
176
+
177
+
You can enable the i18n functionality with [react-intl](https://github.com/yahoo/react-intl).
178
+
179
+
React on Rails provides an option for automatic conversions of Rails `*.yml` locale files into `*.js` files for `react-intl`.
180
+
181
+
See the [How to add I18n](docs/basics/i18n.md) for a summary of adding I18n.
182
+
172
183
## NPM
173
184
All JavaScript in React On Rails is loaded from npm: [react-on-rails](https://www.npmjs.com/package/react-on-rails). To manually install this (you did not use the generator), assuming you have a standard configuration, run this command:
174
185
@@ -201,7 +212,9 @@ In the following screenshot you can see the 3 parts of React on Rails rendering:
201
212
### Building the Bundles
202
213
Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included Foreman `Procfile.dev` will take care of this for you by watching your JavaScript code files for changes. Simply run `foreman start -f Procfile.dev`.
203
214
204
-
On Heroku deploys, the `lib/assets.rake` file takes care of running webpack during deployment. If you have used the provided generator, these bundles will automatically be added to your `.gitignore` in order to prevent extraneous noise from re-generated code in your pull requests. You will want to do this manually if you do not use the provided generator.
215
+
On production deployments that use asset precompilation, such as Heroku deployments, React on Rails, by default, will automatically run webpack to build your JavaScript bundles. You can see the source code for what gets added to your precompilation [here](https://github.com/shakacode/react_on_rails/tree/master/lib/tasks/assets.rake). For more information on this topic, see [the doc on Heroku deployment](https://github.com/shakacode/react_on_rails/tree/master/docs/additional-reading/heroku-deployment.md#more-details-on-precompilation-using-webpack-to-create-javascript-assets).
216
+
217
+
If you have used the provided generator, these bundles will automatically be added to your `.gitignore` to prevent extraneous noise from re-generated code in your pull requests. You will want to do this manually if you do not use the provided generator.
205
218
206
219
### Rails Context
207
220
When you use a "generator function" to create react components or you used shared redux stores, you get 2 params passed to your function:
@@ -241,11 +254,6 @@ The `railsContext` has: (see implementation in file [react_on_rails_helper.rb](a
serverSide: boolean # Are we being called on the server or client? NOTE, if you conditionally
251
259
# render something different on the server than the client, then React will only show the
@@ -257,9 +265,6 @@ The `railsContext` has: (see implementation in file [react_on_rails_helper.rb](a
257
265
##### Needing the current url path for server rendering
258
266
Suppose you want to display a nav bar with the current navigation link highlighted by the URL. When you server render the code, you will need to know the current URL/path if that is what you want your logic to be based on. The new `railsContext` has this information so the application of an "active" class can be done server side.
259
267
260
-
##### Needing the I18n.locale
261
-
Suppose you want to server render your react components with localization applied given the current Rails locale. The `railsContext` contains the I18n.locale.
262
-
263
268
##### Configuring different code for server side rendering
264
269
Suppose you want to turn off animation when doing server side rendering. The `serverSide` value is just what you need.
Here's a summary of adding the I18n functionality.
4
+
5
+
You can refer to [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for a complete example.
6
+
7
+
1. Add `react-intl` & `intl` to `client/package.json`, and remember to `bundle && npm install`.
8
+
9
+
```js
10
+
"dependencies": {
11
+
...
12
+
"intl":"^1.2.5",
13
+
"react-intl":"^2.1.5",
14
+
...
15
+
}
16
+
```
17
+
18
+
2. In `client/webpack.client.base.config.js`, set `react-intl` as an entry point.
19
+
20
+
```js
21
+
module.exports= {
22
+
...
23
+
entry: {
24
+
...
25
+
vendor: [
26
+
...
27
+
'react-intl',
28
+
],
29
+
...
30
+
```
31
+
32
+
3. `react-intl` requires locale files in json format. React on Rails will help you to generate or update `translations.js` & `default.js` automatically after you configured the following settings.
33
+
34
+
> `translations.js`: All your locales in json format.
35
+
>
36
+
> `default.js`: Default settings in json format.
37
+
>
38
+
> You can add them to `.gitignore` and `.eslintignore`.
39
+
40
+
Update settings in `config/initializers/react_on_rails.rb` to what you need:
41
+
42
+
```ruby
43
+
# Replace the following line to the location where you keep translation.js&default.js.
Add following lines to `config/application.rb`, this will help you to generate `translations.js` & `default.js` automatically when you starts the server.
48
+
49
+
```js
50
+
module YourModule
51
+
classApplication< Rails::Application
52
+
...
53
+
config.after_initializedo
54
+
ReactOnRails::LocalesToJs.new
55
+
end
56
+
end
57
+
end
58
+
```
59
+
60
+
5. In React, you need to initialize `react-intl`, and set parameters for it.
0 commit comments