Hello World with Rails 6 and react

With rails 6 webpacker is bundled with it, along with support for using Angular, React, or Vue. First of all, make sure ruby version is greater than 2.5 . Verify ruby version by ruby -v in your shell. You can use rvm or rbenv to install the new ruby version. Verify rails version by rails -v and make use to have rails 6.

Starting by creating a new project with default database as PostgreSQL and default webpacker integration as react.

rails new new-app --database=postgresql --webpack=react
rails db:create

Basic folder structure after creating the rails project

Now, generate a controller with command rails generate controller Home

Add root path for the project in routes.rb.

root "home#index"

Create a file at the locationapp/views/home/index.html.erb and add

<%= javascript_pack_tag 'hello_world' %> to it.

javascript_pack_tagcreates a script tag that references the named pack file.

Rename the file app/javascript/packs/hello_react.jsx to app/javascript/packs/hello_world.jsx and

change props value at <Hello name="react"/> to <Hello name="world"/> .

Run the server rails server