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! 🎉