@@ -40,10 +40,13 @@ Read the [full review here](https://clutch.co/profile/shakacode#reviews?sort_by=
4040## Contents
4141
4242- [ Get started with Shakapacker] ( #get-started-with-shakapacker )
43+ - [ Component name] ( #component-name )
4344 - [ File naming] ( #file-naming )
4445 - [ Typescript support] ( #typescript-support )
46+ - [ Test component] ( #test-component )
4547- [ Use with Asset Pipeline] ( #use-with-asset-pipeline )
4648 - [ Custom JSX Transformer] ( #custom-jsx-transformer )
49+ - [ Transform Plugin Options] ( #transform-plugin-options )
4750 - [ React.js versions] ( #reactjs-versions )
4851- [ View Helper] ( #view-helper )
4952 - [ Custom View Helper] ( #custom-view-helper )
@@ -59,6 +62,7 @@ Read the [full review here](https://clutch.co/profile/shakacode#reviews?sort_by=
5962- [ Component Generator] ( #component-generator )
6063 - [ Use with JBuilder] ( #use-with-jbuilder )
6164 - [ Camelize Props] ( #camelize-props )
65+ - [ Changing Component Templates] ( #changing-component-templates )
6266- [ Upgrading] ( #upgrading )
6367 - [ 2.3 to 2.4] ( #23-to-24 )
6468- [ Common Errors] ( #common-errors )
@@ -81,21 +85,21 @@ The Wiki page features a significant amount of additional information about Reac
8185
8286_ Alternatively, get started with [ Sprockets] ( #use-with-asset-pipeline ) _
8387
84- #### 1) Create a new Rails app:
88+ 1 . Create a new Rails app:
8589Prevent installing default javascript dependencies by using ` --skip-javascript ` option:
8690
8791``` bash
8892$ rails new my-app --skip-javascript
8993$ cd my-app
9094```
9195
92- #### 2) Install ` shakapacker ` :
96+ 2 . Install ` shakapacker ` :
9397``` bash
9498$ bundle add shakapacker --strict
9599$ rails webpacker:install
96100```
97101
98- #### 3) Install ` react ` and some other required npm packages:
102+ 3 . Install ` react ` and some other required npm packages:
99103``` bash
100104$ yarn add react react-dom @babel/preset-react prop-types \
101105 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:
113117},
114118```
115119
116- #### 4) Install ` react-rails ` :
120+ 4 . Install ` react-rails ` :
117121``` bash
118122$ bundle add ' react-rails' --strict
119123$ rails generate react:install
@@ -125,7 +129,7 @@ This gives you:
125129- [ ` ReactRailsUJS ` ] ( #ujs ) setup in ` app/javascript/packs/application.js `
126130- ` app/javascript/packs/server_rendering.js ` for [ server-side rendering] ( #server-side-rendering )
127131
128- #### 5) Generate your first component:
132+ 5 . Generate your first component:
129133``` bash
130134$ rails g react:component HelloWorld greeting:string
131135```
@@ -145,20 +149,20 @@ Example:
145149<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>
146150```
147151
148- #### 6) [ Render it in a Rails view] ( #view-helper ) :
152+ 6 . [ Render it in a Rails view] ( #view-helper ) :
149153
150154``` erb
151155<!-- erb: paste this in view -->
152156<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
153157```
154158
155- ##### 7) Lets Start the app:
159+ 7 . Lets Start the app:
156160``` bash
157161$ rails s
158162```
159163Output: greeting: Hello from react-rails", inspect webpage in your browser to see the change in tag props.
160164
161- ##### 7) Run dev server (optional)
165+ 8 . Run dev server (optional)
162166In order to run dev server with HMR feature you need to parallely run:
163167
164168``` bash
0 commit comments