react_rails_webpack 2.0.0 → 2.0.1
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 +21 -3
- data/lib/react_rails_webpack/version.rb +1 -1
- data/lib/tasks/print_whats_next_instructions.rake +1 -1
- 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: 526f01f221d0531a7edb733ac8338a706a744def
|
4
|
+
data.tar.gz: f64c05bb1ac937bad7b464e1cb889d0b62ea1ad0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 376d408105338c7b3ce01ae88a42516ad4ff389328184dfc94f98a00b5b85a97e13ec53aa23dd803c54238787ca00611e1191e705e3602875e7b6ee4ab2a676f
|
7
|
+
data.tar.gz: 326ac7b3d784ff6f1cb27217209ea3cb2b866065700d0518899f5480668e247f79c2704f6b7b30bfbe359c671c55faf401225b937a101325a65ff55697008ef9
|
data/README.md
CHANGED
@@ -127,17 +127,35 @@ The meat of the integration with Rails is in [the client/app folder](lib/react_r
|
|
127
127
|
</div>
|
128
128
|
```
|
129
129
|
|
130
|
-
That example is what it would look like if you called
|
130
|
+
That example is what it would look like if you called `react_component` like this:
|
131
131
|
|
132
132
|
```ruby
|
133
133
|
react_component "ComponentName", {myProp: 'some value'}
|
134
134
|
```
|
135
135
|
|
136
|
-
When your browser hits that `renderLastComponentDiv()` call, it grabs the component name ("ComponentName") from the parent div, then looks it up in [the availableComponents.js file](lib/react_rails_webpack/client/app/availableComponents.js).
|
136
|
+
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).
|
137
137
|
|
138
138
|
NOTE: You MUST list all components that you will render with `react_component` in this file or it won't find anything.
|
139
139
|
|
140
|
-
|
140
|
+
In our example, your available components file might look like this:
|
141
|
+
|
142
|
+
```javascript
|
143
|
+
import MyComponent from '../components/MyComponent'
|
144
|
+
import SomeOtherComponent from '../components/SomeOtherComponent'
|
145
|
+
|
146
|
+
export default {
|
147
|
+
ComponentName: {
|
148
|
+
class: MyComponent
|
149
|
+
},
|
150
|
+
OtherName: {
|
151
|
+
class: SomeOtherComponent
|
152
|
+
}
|
153
|
+
}
|
154
|
+
```
|
155
|
+
|
156
|
+
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).
|
157
|
+
|
158
|
+
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.
|
141
159
|
|
142
160
|
## Gotchas
|
143
161
|
|
@@ -9,7 +9,7 @@ namespace :react_rails_webpack do
|
|
9
9
|
puts
|
10
10
|
puts "Okay, #{'if you saw any errors'.red.bold} when the \
|
11
11
|
#{'npm run install'.white.bold} and #{'npm run build'.white.bold} commands \
|
12
|
-
were run
|
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
15
|
you can start your live-reloading webpack development server for React \
|