Rails version 6 has been released! One of the most interesting things about Rails’s latest release is its treatment of JavaScript as a first class citizen. The default Webpacker is added to startup projects with Rails CLI, along with support for using Angular, React or Vue. Now we will try to create a simple Rails application with the support of React.
First, you’ll want to make sure you update to Rails 6. You’ll need to install Ruby 2.5 and above: type ruby -v into the terminal screen to see which version you’re working on. I use RVM so to install the specified version I want I will use the rvm install 2.6.3 command. Next is to update Rails CLI: gem update rails . Now try entering rails -v in the terminal screen to check the Rails version to see if we have Rails 6.0.0 or higher.
If it’s okay, we proceed to create a new application:
1 2 | rails new PROJECT_NAME -BT --webpack=react |
In the above command, I informed the rails to skip the testing framework, skip the bundling, and install the dependencies for React. The next thing we will want to do is add the react-rails gem, incorporate a generator for React components into the list of available Rails tasks as well as allow us to perform server-side renderings with React. Ok, now we add the gem and put the project in git’s control:
1 2 3 | bundle add react-rails git add . && git commit -m "initial commit" |
On the terminal screen, if you enter rails g --help , you will see 2 new suggested commands: react:install and react:component , we will run the first command to install and it will generate some New file in our project
1 2 | rails g react:install |
That is all we need to do to install. If you take a look at package.json in the project’s root directory, you’ll see all the React needed dependencies like Babel and Webpack have been added. In addition, the above statement has added a few lines to app / javascript / packs / application.js.
We will quickly create some data to display using React:
1 2 | rails g resource User f_name:string l_name:string |
Add db / seeds.rb (using gem Faker):
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">require</span> <span class="token string">'faker'</span> <span class="token constant">ActiveRecord</span> <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token constant">Base</span> <span class="token punctuation">.</span> connection <span class="token punctuation">.</span> tables <span class="token punctuation">.</span> <span class="token keyword">each</span> <span class="token keyword">do</span> <span class="token operator">|</span> t <span class="token operator">|</span> <span class="token constant">ActiveRecord</span> <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token constant">Base</span> <span class="token punctuation">.</span> connection <span class="token punctuation">.</span> reset_pk_sequence <span class="token operator">!</span> <span class="token punctuation">(</span> t <span class="token punctuation">)</span> <span class="token keyword">end</span> <span class="token number">25.</span> times <span class="token keyword">do</span> first_name <span class="token operator">=</span> <span class="token constant">Faker</span> <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token constant">Name</span> <span class="token punctuation">.</span> first_name last_name <span class="token operator">=</span> <span class="token constant">Faker</span> <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token constant">Name</span> <span class="token punctuation">.</span> last_name <span class="token constant">User</span> <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> f_name <span class="token punctuation">:</span> first_name <span class="token punctuation">,</span> l_name <span class="token punctuation">:</span> last_name <span class="token punctuation">)</span> <span class="token keyword">end</span> |
We need to run rails db:migrate && rails db:seed to create tables and initialize virtual data. Now let us try to create a component with the familiar rails generate ... command:
1 2 | rails g react:component Users users:array |
By specifying users: array, we say that the component expects a prop to call users an array. If you look at the file that has been created, you will see this setting in prop types.
We will set up the component as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">class</span> <span class="token class-name">Users</span> extends <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h1 <span class="token operator">></span> <span class="token constant">All</span> <span class="token constant">Users</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> ul <span class="token operator">></span> <span class="token punctuation">{</span> this <span class="token punctuation">.</span> props <span class="token punctuation">.</span> users <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> user <span class="token operator">=</span> <span class="token operator">></span> <span class="token punctuation">(</span> <span class="token operator"><</span> li key <span class="token operator">=</span> <span class="token punctuation">{</span> user <span class="token punctuation">.</span> id <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token punctuation">{</span> `$ <span class="token punctuation">{</span> user <span class="token punctuation">.</span> f_name <span class="token punctuation">}</span> $ <span class="token punctuation">{</span> user <span class="token punctuation">.</span> l_name <span class="token punctuation">}</span> ` <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> li <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> ul <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
And set up at users_controller.rb:
1 2 3 4 5 6 7 | <span class="token keyword">class</span> <span class="token class-name">UsersController</span> <span class="token operator"><</span> <span class="token constant">ApplicationController</span> <span class="token keyword">def</span> index <span class="token variable">@users</span> <span class="token operator">=</span> <span class="token constant">User</span> <span class="token punctuation">.</span> all render component <span class="token punctuation">:</span> <span class="token string">'Users'</span> <span class="token punctuation">,</span> props <span class="token punctuation">:</span> <span class="token punctuation">{</span> users <span class="token punctuation">:</span> <span class="token variable">@users</span> <span class="token punctuation">}</span> <span class="token keyword">end</span> <span class="token keyword">end</span> |
Ok now run rails s and go to http: // localhost: 3000 / users in the browser and you will see a list of all users’ names are displayed.
References
https://medium.com/swlh/getting-started-with-rails-6-and-react-afac8255aecd