react_rails_webpack 2.0.6 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +11 -13
- data/lib/react_rails_webpack/version.rb +1 -1
- data/lib/tasks/print_whats_next_instructions.rake +3 -2
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5b8bc9dfe64d4a32d2062a74cb8d6ac5df0c36a6
|
4
|
+
data.tar.gz: c89be03dc8ba0d35bab2f5592cfef8353895e965
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6b29c24883e39b76fa9d57212a0e8fefb0984ce711be9d582b27c8125edbf502db9dfdfe3fc70e12cdf1132fcff46cdd5180c413516ad2982f1562e0a55f80c1
|
7
|
+
data.tar.gz: 8061632235edb8b2de4638b574bf271a165f5e53692acd31e47650c46e121407fa04f729224ed9e6c4e0c4817c717c4860fc30c9d67841975ce64cb510b59187
|
data/README.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# ReactRailsWebpack
|
2
2
|
|
3
|
-
|
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
|
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
|
-
|
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 (
|
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
|
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
|
|
@@ -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
|
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."
|