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 +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."
|