react_rails_webpack 2.0.6 → 2.0.7

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 571c5888138f2fb0f6f66cd43088c5fcdb11bd62
4
- data.tar.gz: 3b582cfe75e702225543ace2441aaa4b5f0ec12f
3
+ metadata.gz: 5b8bc9dfe64d4a32d2062a74cb8d6ac5df0c36a6
4
+ data.tar.gz: c89be03dc8ba0d35bab2f5592cfef8353895e965
5
5
  SHA512:
6
- metadata.gz: 12d2845c6f7be8e74a6582f4274f470710388715ae480af636a59b4d7bcfe0a86bfb94b2009bc0d5166d7a64aed37593d04d9f010dcab101af8f106a66830fc4
7
- data.tar.gz: 130f543c7a784b34ffce103b5216cfbe1d8979d183d30ffde4cf63da2db68acd80641e25841a911e13299621455e09114dd5a2f3509f12b023209889a8943903
6
+ metadata.gz: 6b29c24883e39b76fa9d57212a0e8fefb0984ce711be9d582b27c8125edbf502db9dfdfe3fc70e12cdf1132fcff46cdd5180c413516ad2982f1562e0a55f80c1
7
+ data.tar.gz: 8061632235edb8b2de4638b574bf271a165f5e53692acd31e47650c46e121407fa04f729224ed9e6c4e0c4817c717c4860fc30c9d67841975ce64cb510b59187
data/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # ReactRailsWebpack
2
2
 
3
- A set of Rails generators that create all the necessary boilerplate code (with examples) for integrating React, Webpack, and Redux libraries into Rails 4.0+ apps.
3
+ Ruby gem for quickly and easily creating highly customizable react/rails integrations using webpack and npm. Has built-in examples of plain and redux-backed React components with ES6/7, JSX, and hot-reloading.
4
4
 
5
5
  ## Key Features
6
6
 
@@ -146,7 +146,13 @@ When you run the install generator like this:
146
146
 
147
147
  This gem will setup a basic react integration with some example components (one standard react component and one using react with redux) under [a client folder](lib/react_rails_webpack/client) in your project's root.
148
148
 
149
- The meat of the integration with Rails is in [the client/app folder](lib/react_rails_webpack/client/src/app), and [the app.js file](lib/react_rails_webpack/client/src/app.js). When your page loads in Rails, the `react_component` method creates divs that looks like this:
149
+ The meat of the integration with Rails is in [the client/app folder](lib/react_rails_webpack/client/src/app), and [the app.js file](lib/react_rails_webpack/client/src/app.js). When your page loads in Rails, if you call the `react_component` method like this:
150
+
151
+ ```ruby
152
+ react_component :ComponentName, {myProp: 'some value'}
153
+ ```
154
+
155
+ It will create a div that looks like this:
150
156
 
151
157
  ```html
152
158
  <div class="react-component-target" data-componentname="ComponentName" data-componentprops="{myProp: 'some value'}">
@@ -154,15 +160,7 @@ The meat of the integration with Rails is in [the client/app folder](lib/react_r
154
160
  </div>
155
161
  ```
156
162
 
157
- That example is what it would look like if you called `react_component` like this:
158
-
159
- ```ruby
160
- react_component :ComponentName, {myProp: 'some value'}
161
- ```
162
-
163
- When your browser hits that `renderLastComponentDiv()` call, it grabs the component name (which is "ComponentName" in the example) from the parent div, then looks it up in [the availableComponents.js file](lib/react_rails_webpack/client/src/app/availableComponents.js).
164
-
165
- NOTE: You MUST list all components that you will render with `react_component` in this file or it won't find anything.
163
+ When your browser hits that `renderLastComponentDiv()` call, it grabs the component name (which is `ComponentName` in this example) from the parent div, then looks it up in [the availableComponents.js file](lib/react_rails_webpack/client/src/app/availableComponents.js).
166
164
 
167
165
  In our example, your available components file might look like this:
168
166
 
@@ -180,9 +178,9 @@ export default {
180
178
  }
181
179
  ```
182
180
 
183
- If it looked like that, you would render your `MyComponent` React component with `react_component :ComponentName`, and you would render your `SomeOtherComponent` React component with `react_component :OtherName`. Using `react_component :MyComponent` would NOT work. The `react_component` method is looking for the javascript object keys, NOT the actual component class names (it's usually fine to make the object key the same as the class name, though. They're just different in this example for clarity).
181
+ If it looked like that, you would render your `MyComponent` React component with `react_component :ComponentName`, and you would render your `SomeOtherComponent` React component with `react_component :OtherName`. Using `react_component :MyComponent` would NOT work. The `react_component` method is looking for the javascript object keys from [availableComponents.js](lib/react_rails_webpack/client/src/app/availableComponents.js) (e.g. `ComponentName`, `OtherName` ), NOT the actual component class names (e.g. `MyComponent`, `SomeOtherComponent`). It's usually fine to make the object key the same as the class name, though. They're just different in this example for clarity.
184
182
 
185
- Assuming `react_component` finds a component that matches the it's given, it will immediately render that component within that div, passing in props from the `data-componentprops` attribute. As the page loads, each successive div generated by `react_component` renders this way.
183
+ Assuming `react_component` finds a key in [availableComponents.js](lib/react_rails_webpack/client/src/app/availableComponents.js) that matches the what it's given, it will immediately render that component within that div, passing in props from the `data-componentprops` attribute. As the page loads, each successive div generated by `react_component` renders this way.
186
184
 
187
185
  ## Gotchas
188
186
 
@@ -1,3 +1,3 @@
1
1
  module ReactRailsWebpack
2
- VERSION = "2.0.6"
2
+ VERSION = "2.0.7"
3
3
  end
@@ -12,10 +12,11 @@ namespace :react_rails_webpack do
12
12
  were run above, try running them again now manually."
13
13
  puts
14
14
  puts "#{"If you didn't get any errors".red.bold} you should be good to go, and \
15
- you can start your live-reloading webpack development server for React \
15
+ you can start the hot-reloading webpack development server for React \
16
16
  by running the #{'npm run start'.white.bold} command and visiting \
17
17
  #{(`scutil --get LocalHostName`.strip+'.local:3000').blue.bold} in your browser \
18
- or on any other device on your local network (for example: your phone)."
18
+ or on any other device on your local network (for example: your phone if it's \
19
+ connected to your wifi)."
19
20
  puts
20
21
  puts "#{'To generate an example page of React components inside your Rails app'.red.bold}, \
21
22
  run the #{'rails g react_rails_webpack:create_example_page'.white.bold} command."
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: react_rails_webpack
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.0.6
4
+ version: 2.0.7
5
5
  platform: ruby
6
6
  authors:
7
7
  - Neurodynamic