@@ -40,10 +40,13 @@ Read the [full review here](https://clutch.co/profile/shakacode#reviews?sort_by=
40
40
## Contents
41
41
42
42
- [ Get started with Shakapacker] ( #get-started-with-shakapacker )
43
+ - [ Component name] ( #component-name )
43
44
- [ File naming] ( #file-naming )
44
45
- [ Typescript support] ( #typescript-support )
46
+ - [ Test component] ( #test-component )
45
47
- [ Use with Asset Pipeline] ( #use-with-asset-pipeline )
46
48
- [ Custom JSX Transformer] ( #custom-jsx-transformer )
49
+ - [ Transform Plugin Options] ( #transform-plugin-options )
47
50
- [ React.js versions] ( #reactjs-versions )
48
51
- [ View Helper] ( #view-helper )
49
52
- [ Custom View Helper] ( #custom-view-helper )
@@ -59,6 +62,7 @@ Read the [full review here](https://clutch.co/profile/shakacode#reviews?sort_by=
59
62
- [ Component Generator] ( #component-generator )
60
63
- [ Use with JBuilder] ( #use-with-jbuilder )
61
64
- [ Camelize Props] ( #camelize-props )
65
+ - [ Changing Component Templates] ( #changing-component-templates )
62
66
- [ Upgrading] ( #upgrading )
63
67
- [ 2.3 to 2.4] ( #23-to-24 )
64
68
- [ Common Errors] ( #common-errors )
@@ -81,21 +85,21 @@ The Wiki page features a significant amount of additional information about Reac
81
85
82
86
_ Alternatively, get started with [ Sprockets] ( #use-with-asset-pipeline ) _
83
87
84
- #### 1) Create a new Rails app:
88
+ 1 . Create a new Rails app:
85
89
Prevent installing default javascript dependencies by using ` --skip-javascript ` option:
86
90
87
91
``` bash
88
92
$ rails new my-app --skip-javascript
89
93
$ cd my-app
90
94
```
91
95
92
- #### 2) Install ` shakapacker ` :
96
+ 2 . Install ` shakapacker ` :
93
97
``` bash
94
98
$ bundle add shakapacker --strict
95
99
$ rails webpacker:install
96
100
```
97
101
98
- #### 3) Install ` react ` and some other required npm packages:
102
+ 3 . Install ` react ` and some other required npm packages:
99
103
``` bash
100
104
$ yarn add react react-dom @babel/preset-react prop-types \
101
105
css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin
@@ -113,7 +117,7 @@ Also update the Babel configuration in the `package.json` file:
113
117
},
114
118
```
115
119
116
- #### 4) Install ` react-rails ` :
120
+ 4 . Install ` react-rails ` :
117
121
``` bash
118
122
$ bundle add ' react-rails' --strict
119
123
$ rails generate react:install
@@ -125,7 +129,7 @@ This gives you:
125
129
- [ ` ReactRailsUJS ` ] ( #ujs ) setup in ` app/javascript/packs/application.js `
126
130
- ` app/javascript/packs/server_rendering.js ` for [ server-side rendering] ( #server-side-rendering )
127
131
128
- #### 5) Generate your first component:
132
+ 5 . Generate your first component:
129
133
``` bash
130
134
$ rails g react:component HelloWorld greeting:string
131
135
```
@@ -145,20 +149,20 @@ Example:
145
149
<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>
146
150
```
147
151
148
- #### 6) [ Render it in a Rails view] ( #view-helper ) :
152
+ 6 . [ Render it in a Rails view] ( #view-helper ) :
149
153
150
154
``` erb
151
155
<!-- erb: paste this in view -->
152
156
<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
153
157
```
154
158
155
- ##### 7) Lets Start the app:
159
+ 7 . Lets Start the app:
156
160
``` bash
157
161
$ rails s
158
162
```
159
163
Output: greeting: Hello from react-rails", inspect webpage in your browser to see the change in tag props.
160
164
161
- ##### 7) Run dev server (optional)
165
+ 8 . Run dev server (optional)
162
166
In order to run dev server with HMR feature you need to parallely run:
163
167
164
168
``` bash
0 commit comments