react_rails_webpack 2.0.7 → 2.0.8
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:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3d2ecda0dd8a3b414e1343d24bd2d36ccc709554
|
4
|
+
data.tar.gz: 7314e2c8775d7374bc0e7dbf9326310ba93e052d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: cfda64f15b88c0352f9e93302c06ae886200661fc6f0d0c91f2678d240f0f3cf46cd6e12af1e8a452cb9fab6bcddc2ad48bab67530c2e4dbe2ee24fc66bade28
|
7
|
+
data.tar.gz: 9cd597258ea42a24ad273f9285937e804fd1c65b6c5eae09b539975eec9d040eb0a30f7993aa47eaac783cd5a09633129782170d8d2ad6c63425a5dbe4feaa6b
|
data/README.md
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
# ReactRailsWebpack
|
2
2
|
|
3
|
-
Ruby gem for quickly and easily creating highly customizable react/rails integrations using webpack and npm.
|
3
|
+
Ruby gem for quickly and easily creating highly customizable react/rails integrations using webpack and npm.
|
4
4
|
|
5
5
|
## Key Features
|
6
6
|
|
7
7
|
1. One-command setup
|
8
|
-
2. Use any packages from the npm ecosystem
|
9
|
-
3.
|
10
|
-
4. The webpack development server for React components will live update your changes to any device on your local network (including phones)
|
8
|
+
2. Use any packages from the [npm](https://www.npmjs.com) ecosystem
|
9
|
+
3. Built-in examples of plain and [redux](http://redux.js.org)-backed React components
|
10
|
+
4. The [webpack](https://webpack.github.io) development server for React components will live update your changes to any device on your local network (including phones)
|
11
11
|
|
12
12
|
## Install
|
13
13
|
|
@@ -22,6 +22,54 @@ Ruby gem for quickly and easily creating highly customizable react/rails integra
|
|
22
22
|
- **[node](https://nodejs.org)** version **4 or greater** (check version with `node -v`)
|
23
23
|
- **[npm](https://www.npmjs.com/)** version **3 or greater** (check version with `npm -v`)
|
24
24
|
|
25
|
+
## Contents
|
26
|
+
|
27
|
+
- **[Key features](#key-features)**
|
28
|
+
- **[Install](#install)**
|
29
|
+
- **[Requirements](#requirements)**
|
30
|
+
- **[About](#about)**
|
31
|
+
- [Pros](#pros)
|
32
|
+
- [Cons](#cons)
|
33
|
+
- **[See the demo components in action](#see-the-demo-components-in-action)**
|
34
|
+
- [On webpack dev server](#on-webpack-dev-server)
|
35
|
+
- [On your Rails app](#on-your-rails-app)
|
36
|
+
- **[Commands](#commands)**
|
37
|
+
- [To set up the integration](#set-up-the-integration)
|
38
|
+
- [To set up an example page in your Rails app](#set-up-an-example-page-in-your-rails-app)
|
39
|
+
- [To configure a new clone of your repo](#configure-react_rails_webpack-on-a-new-clone-of-your-repo)
|
40
|
+
- [To see the url of your webpack development server](#see-the-url-of-your-webpack-development-server)
|
41
|
+
- [Integrate with Trailblazer](#generate-react-component-trailblazer-cell)
|
42
|
+
- **[Suggested development workflow](#suggested-development-workflow)**
|
43
|
+
- **[Creating and using your own components](#creating-and-using-your-own-components)**
|
44
|
+
- **[How does this work?](#how-does-this-work)**
|
45
|
+
- **[Gotchas](#gotchas)**
|
46
|
+
- [Forgetting to run npm run build](#forgetting-to-run-npm-run-build)
|
47
|
+
- [Forgetting to add components to the availableComponents file](#forgetting-to-add-components-to-the-clientsrcappavailablecomponentsjs-file)
|
48
|
+
- [Forgetting to run rails g react_rails_webpack:new_fork when cloning your repo on a new machine](#forgetting-to-run-rails-g-react_rails_webpacknew_fork-when-cloning-your-repo-on-a-new-machine)
|
49
|
+
- [npm install vs. npm run install](#npm-install-vs-npm-run-install)
|
50
|
+
- **[Development](#development)**
|
51
|
+
- **[Contributing](#contributing)**
|
52
|
+
- **[License](#license)**
|
53
|
+
|
54
|
+
## About
|
55
|
+
|
56
|
+
When I looked over the available gems for react/rails integrations, none of them were as customizable as I wanted, so I decided to build my own. Since I wanted it to be as customizable as possible, I made my gem a set of generators, instead of a bunch of under-the-hood gem code. You can customize the inner workings of this integration to your heart's content, since all the files used for the integration will be added directly to your app. You can edit them, delete them, and add or remove any npm packages you like, because this integration allows you to use any npm packages you could use in a static front-end react app.
|
57
|
+
|
58
|
+
### Pros:
|
59
|
+
|
60
|
+
- [Webpack](https://webpack.github.io/) integration
|
61
|
+
- Hot-reloading webpack development server
|
62
|
+
- Ability to see dev server output on any computer (or mobile device) on your network
|
63
|
+
- Built-in [redux](http://redux.js.org/) integration
|
64
|
+
- Generators provide example code for basic react components and react-redux components
|
65
|
+
- Highly customizable
|
66
|
+
- Ability to use any [npm](https://www.npmjs.com/) packages that you could use on a static front-end app
|
67
|
+
|
68
|
+
### Cons:
|
69
|
+
|
70
|
+
- This gem does not do server-side rendering. I don't find this makes much of a difference for my apps in practice, but if it does for you, best avoid. [This post by Henrik Joreteg](https://blog.andyet.com/2015/05/18/lazymorphic-apps-bringing-back-static-web) covers some of the reasons I like just doing it this way.
|
71
|
+
|
72
|
+
|
25
73
|
## See the demo components in action
|
26
74
|
|
27
75
|
### On webpack dev server
|
@@ -65,7 +113,7 @@ This command will tell you the url of your webpack development server on your lo
|
|
65
113
|
|
66
114
|
`rails g react_rails_webpack:trailblazer_integration`
|
67
115
|
|
68
|
-
If you use the Trailblazer gem, use this command to add a
|
116
|
+
If you use [the Trailblazer gem](https://github.com/apotonick/trailblazer), use this command to add a trailblazer cell for react components to your `lib` folder.
|
69
117
|
|
70
118
|
## Suggested Development Workflow
|
71
119
|
|
@@ -76,24 +124,6 @@ If you use the Trailblazer gem, use this command to add a [trailblazer](https://
|
|
76
124
|
5. Add calls to the `react_component` helper method in your Rails app to render your React components in views
|
77
125
|
6. Make sure they still work, repeat steps 1-5 until satisfied
|
78
126
|
|
79
|
-
## About
|
80
|
-
|
81
|
-
When I looked over the available gems for react/rails integrations, none of them were as customizable as I wanted, so I decided to build my own. Since I wanted it to be as customizable as possible, I made my gem a set of generators, instead of a bunch of under-the-hood gem code. You can customize the inner workings of this integration to your heart's content, since all the files used for the integration will be added directly to your app. You can edit them, delete them, and add or remove any npm packages you like, because this integration allows you to use any npm packages you could use in a static front-end react app.
|
82
|
-
|
83
|
-
### Pros:
|
84
|
-
|
85
|
-
- [Webpack](https://webpack.github.io/) integration
|
86
|
-
- Hot-reloading webpack development server
|
87
|
-
- Ability to see dev server output on any computer (or mobile device) on your network
|
88
|
-
- Built-in [redux](http://redux.js.org/) integration
|
89
|
-
- Generators provide example code for basic react components and react-redux components
|
90
|
-
- Highly customizable
|
91
|
-
- Ability to use any [npm](https://www.npmjs.com/) packages that you could use on a static front-end app
|
92
|
-
|
93
|
-
### Cons:
|
94
|
-
|
95
|
-
- This gem does not do server-side rendering, so if you need to do SEO stuff within your react components, it's probably the wrong choice
|
96
|
-
|
97
127
|
## Creating and using your own components
|
98
128
|
|
99
129
|
Let's say you want to make a checkout form component with react. Here's what you'd need to do to use it from Rails:
|
@@ -180,7 +210,7 @@ export default {
|
|
180
210
|
|
181
211
|
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.
|
182
212
|
|
183
|
-
Assuming `react_component` finds a key in [availableComponents.js](lib/react_rails_webpack/client/src/app/availableComponents.js) that matches the
|
213
|
+
Assuming `react_component` finds a key in [availableComponents.js](lib/react_rails_webpack/client/src/app/availableComponents.js) that matches the name 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.
|
184
214
|
|
185
215
|
## Gotchas
|
186
216
|
|
@@ -6,7 +6,7 @@ import wrapWithProvider from './wrapWithProvider'
|
|
6
6
|
// Used in findAndCreateComponent
|
7
7
|
import components from './availableComponents'
|
8
8
|
|
9
|
-
// This function gets called by the react_rails_webpack Rails helper
|
9
|
+
// This function gets called by the react_rails_webpack Rails helper.
|
10
10
|
// It renders the specified component in the div from which the
|
11
11
|
// function is called.
|
12
12
|
export function renderLastComponentDiv () {
|
@@ -21,16 +21,17 @@ export function renderReactComponentInDiv (targetDiv) {
|
|
21
21
|
|
22
22
|
ReactDOM.render(
|
23
23
|
findAndCreateComponent(componentName, componentProps),
|
24
|
-
targetDiv
|
24
|
+
targetDiv
|
25
|
+
)
|
25
26
|
}
|
26
27
|
|
27
28
|
function findAndCreateComponent (componentName, props) {
|
28
29
|
const component = components[componentName]
|
30
|
+
const element = React.createElement(component.class, props)
|
29
31
|
|
30
32
|
if (component.redux) {
|
31
|
-
const element = React.createElement(component.class, props)
|
32
33
|
return wrapWithProvider(element)
|
33
34
|
} else {
|
34
|
-
return
|
35
|
+
return element
|
35
36
|
}
|
36
37
|
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: react_rails_webpack
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.0.
|
4
|
+
version: 2.0.8
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Neurodynamic
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2016-08-
|
11
|
+
date: 2016-08-19 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|