README.md in react-rails-2.6.1 vs README.md in react-rails-2.6.2
- old
+ new
@@ -65,66 +65,64 @@
```
$ rails new my-app
$ cd my-app
```
-##### 2) Add `webpacker` and `react-rails` to your gemfile:
+##### 2) Add `react-rails` to your Gemfile:
```ruby
-gem 'webpacker'
gem 'react-rails'
```
+Note: On rails versions < 6.0, You need to add `gem 'webpacker'` to your Gemfile in step 2 above.
##### 3) Now run the installers:
-###### Rails 6.x:
+###### Rails 6.x and 5.x:
```
$ bundle install
-$ rails webpacker:install
-$ rails webpacker:install:react
+$ rails webpacker:install # OR (on rails version < 5.0) rake webpacker:install
+$ rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
$ rails generate react:install
```
-Note: For Rails 6, You don't need to add `javascript_pack_tag` as in Step 4. Since its already added by default.
-###### Rails 5.x:
-```
-$ bundle install
-$ rails webpacker:install # OR (on rails version < 5.0) rake webpacker:install
-$ rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
-$ rails generate react:install
-```
This gives you:
- `app/javascript/components/` directory for your React components
- [`ReactRailsUJS`](#ujs) setup in `app/javascript/packs/application.js`
- `app/javascript/packs/server_rendering.js` for [server-side rendering](#server-side-rendering)
-##### 4) Link the JavaScript pack in Rails view using `javascript_pack_tag` [helper](https://github.com/rails/webpacker#usage):
+Note: On rails versions < 6.0, link the JavaScript pack in Rails view using `javascript_pack_tag` [helper](https://github.com/rails/webpacker#usage):
```erb
<!-- application.html.erb in Head tag below turbolinks -->
<%= javascript_pack_tag 'application' %>
```
-##### 5) Generate your first component:
+##### 4) Generate your first component:
```
$ rails g react:component HelloWorld greeting:string
```
-##### 6) You can also generate your component in a subdirectory:
+##### 5) You can also generate your component in a subdirectory:
```
$ rails g react:component my_subdirectory/HelloWorld greeting:string
```
Note: Your component is added to `app/javascript/components/` by default.
+Note: If your component is in a subdirectory you will append the directory path to your erb component call.
-##### 7) [Render it in a Rails view](#view-helper):
+Example:
+```
+<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>
+```
+##### 6) [Render it in a Rails view](#view-helper):
+
```erb
<!-- erb: paste this in view -->
<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
```
-##### 8) Lets Start the app:
+##### 7) Lets Start the app:
```
$ rails s
```
output: greeting: Hello from react-rails", inspect webpage in your browser too see change in tag props.
@@ -170,11 +168,14 @@
```
$ bundle exec rails webpacker:install:typescript
$ yarn add @types/react @types/react-dom
```
-Doing this will allow React-Rails to support the .tsx extension.
+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:
+```
+config.react.server_renderer_extensions = ["jsx", "js", "tsx", "ts"]
+```
### Test component
You can use `assert_react_component` to test component render:
@@ -688,14 +689,14 @@
One caveat is that currently you [cannot Server-Side Render along with HMR](https://github.com/reactjs/react-rails/issues/925#issuecomment-415469572).
## Related Projects
- [webpacker-react](https://github.com/renchap/webpacker-react): Integration of React with Rails utilizing Webpack with Hot Module Replacement (HMR).
-- [The Free React on Rails Course](https://learnetto.com/users/hrishio/courses/the-free-react-on-rails-5-course) A free video course which teaches the basics of React and how to get started using it in Rails with `react-rails`.
+- [The React on Rails Course](https://learnetto.com/users/hrishio/courses/the-free-react-on-rails-5-course) A video course which teaches the basics of React and how to get started using it in Rails with `react-rails`.
- [react\_on\_rails](https://github.com/shakacode/react_on_rails): Integration of React with Rails utilizing Webpack, Redux, React-Router.
- [react-rails-hot-loader](https://github.com/rmosolgo/react-rails-hot-loader) Simple live-reloader for `react-rails`.
- [react-rails-benchmark_renderer](https://github.com/pboling/react-rails-benchmark_renderer) adds performance instrumentation to server rendering.
-- [Ruby Hyperloop](http://ruby-hyperloop.org/): Use Ruby to build reactive user interfaces with React.
+- [Ruby Hyperstack](https://hyperstack.org/): Use Ruby to build reactive user interfaces with React.
## Contributing
🎉 Thanks for taking the time to contribute! 🎉