You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The Wiki page features a significant amount of additional information about React-Rails which includes instructional articles and answers to the most frequently asked questions.
58
59
59
60
60
-
## Get started with Webpacker
61
+
## Get started with Shakapacker
61
62
62
-
[Alternatively, get started with Sprockets](#use-with-asset-pipeline)
63
+
_Alternatively, get started with [Sprockets](#use-with-asset-pipeline)_
63
64
64
-
[Webpacker](https://github.com/rails/webpacker) provides modern JS tooling for Rails. Here are the listed steps for integrating Webpacker and Rails-React with Rails:
65
+
#### 1) Create a new Rails app:
66
+
Prevent installing default javascript dependencies by using `--skip-javascript` option:
65
67
66
-
##### 1) Create a new Rails app:
67
-
```
68
-
$ rails new my-app
68
+
```bash
69
+
$ rails new my-app --skip-javascript
69
70
$ cd my-app
70
71
```
71
72
72
-
##### 2) Add `react-rails` to your Gemfile:
73
-
```ruby
74
-
gem 'react-rails'
73
+
#### 2) Install `shakapacker`:
74
+
```bash
75
+
$ bundle add shakapacker --strict
76
+
$ rails webpacker:install
77
+
```
78
+
79
+
#### 3) Install `react` and some other required npm packages:
$ rails webpacker:install # OR (on rails version < 5.0) rake webpacker:install
84
-
$ rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
96
+
97
+
#### 4) Install `react-rails`:
98
+
```bash
99
+
$ bundle add 'react-rails' --strict
85
100
$ rails generate react:install
86
101
```
87
102
@@ -91,43 +106,48 @@ This gives you:
91
106
-[`ReactRailsUJS`](#ujs) setup in `app/javascript/packs/application.js`
92
107
-`app/javascript/packs/server_rendering.js` for [server-side rendering](#server-side-rendering)
93
108
94
-
Note: On rails versions < 6.0, link the JavaScript pack in Rails view using `javascript_pack_tag`[helper](https://github.com/rails/webpacker#usage):
95
-
```erb
96
-
<!-- application.html.erb in Head tag below turbolinks -->
97
-
<%= javascript_pack_tag 'application' %>
98
-
```
99
-
100
-
##### 4) Generate your first component:
101
-
```
109
+
#### 5) Generate your first component:
110
+
```bash
102
111
$ rails g react:component HelloWorld greeting:string
103
112
```
104
113
105
-
##### 5) You can also generate your component in a subdirectory:
106
-
```
114
+
You can also generate your component in a subdirectory:
115
+
116
+
```bash
107
117
$ rails g react:component my_subdirectory/HelloWorld greeting:string
108
118
```
119
+
109
120
Note: Your component is added to `app/javascript/components/` by default.
110
121
111
122
Note: If your component is in a subdirectory you will append the directory path to your erb component call.
112
123
113
124
Example:
114
-
```
125
+
```erb
115
126
<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>
116
127
```
117
128
118
-
#####6) [Render it in a Rails view](#view-helper):
129
+
#### 6) [Render it in a Rails view](#view-helper):
119
130
120
131
```erb
121
132
<!-- erb: paste this in view -->
122
133
<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
123
134
```
124
135
125
136
##### 7) Lets Start the app:
126
-
```
137
+
```bash
127
138
$ rails s
128
139
```
129
140
Output: greeting: Hello from react-rails", inspect webpage in your browser to see the change in tag props.
130
141
142
+
##### 7) Run dev server (optional)
143
+
In order to run dev server with HMR feature you need to parallely run:
144
+
145
+
```bash
146
+
$ ./bin/webpacker-dev-server
147
+
```
148
+
149
+
Note: On Rails 6 you need to specify `webpack-dev-server` host. To this end, update `config/initializers/content_security_policy.rb` and uncomment relevant lines.
150
+
131
151
### Component name
132
152
133
153
The component name tells `react-rails` where to load the component. For example:
@@ -166,24 +186,62 @@ Component File Name | `react_component` call
166
186
167
187
### Typescript support
168
188
169
-
If you want to use React-Rails with Typescript, simply run the installer and add @types:
189
+
```bash
190
+
yarn add typescript @babel/preset-typescript
170
191
```
171
-
$ bundle exec rails webpacker:install:typescript
172
-
$ yarn add @types/react @types/react-dom
192
+
193
+
Babel won’t perform any type-checking on TypeScript code. To optionally use type-checking run:
194
+
195
+
```bash
196
+
yarn add fork-ts-checker-webpack-plugin
173
197
```
174
198
175
-
Doing this will allow React-Rails to support the .tsx extension. Additionally, it is recommended to add `ts` and `tsx` to the `server_renderer_extensions` in your application configuration:
Doing this will allow React-Rails to support the .tsx extension. Additionally, it is recommended to add `ts` and `tsx` to the `server_renderer_extensions` in your application configuration:
Components are loaded with `ReactRailsUJS.getConstructor(className)`. This function has two default implementations, depending on if you're using the asset pipeline or Webpacker:
467
+
Components are loaded with `ReactRailsUJS.getConstructor(className)`. This function has two default implementations, depending on if you're using the asset pipeline or Shakapacker:
410
468
411
469
- On the asset pipeline, it looks up `className` in the global namespace (`ReactUJS.constructorFromGlobal`).
412
-
- On Webpacker, it `require`s files and accesses named exports, as described in [Get started with Webpacker](#get-started-with-webpacker), falling back to the global namespace (`ReactUJS.constructorFromRequireContextWithGlobalFallback`).
470
+
- On Shakapacker, it `require`s files and accesses named exports, as described in [Get started with Shakapacker](#get-started-with-shakapacker), falling back to the global namespace (`ReactUJS.constructorFromRequireContextWithGlobalFallback`).
413
471
414
472
You can override this function to customize the mapping of name-to-constructor. [Server-side rendering](#server-side-rendering) also uses this function.
0 commit comments