“Hello World” using Rails With React

Hello fellas!

As a tradition, let us create our first “Hello World” app using Rails with React.

Prerequisite:

Rails Ref: https://gorails.com/setup/ubuntu/18.04

Note: Please install as per your system configurations

Here, I am dividing your whole ride into three baby steps.

Open your terminal and follow the steps (Type or Run the commands).

Step 1: Start The Rail

rails new rails_with_react -T --webpack=react --skip-coffee

if you are curious:

— webpack instruct Rails to pre-configure for JavaScript with the webpack bundler

— skip-coffee we are using React so skipping coffee

Now, let’s go into the project directory

cd rails_with_react

let’s create a database

rails db:create

Cool! Let’s run

rails s

Now if you go to browser and type in URL localhost:3000

Here we are:

Hurray! We have completed our first step.

Step 2: After Rails let’s run React

First, add some dependencies for React

yarn add react-router-dom bootstrap jquery popper.js

If you are curious to know about dependencies run:

nano package.json

Step 3: Okay! Final and Important Step

Create a controller

rails g controller Homepage index

Update config/routes.rb

Rails.application.routes.draw do  root ‘homepage#index’end

Now, Update app/javascript/packs/hello_react.jsx file

import React from “react”;import { render } from “react-dom”;import ‘bootstrap/dist/css/bootstrap.min.css’;import ‘bootstrap/dist/js/bootstrap.bundle.min’;import $ from ‘jquery’;import Popper from ‘popper.js’;document.addEventListener(“DOMContentLoaded”, () => {render(    <div> Hello World! </div>,    document.body.appendChild(document.createElement(“div”))  );});

Now, update app/views/layouts/application.html.erb and add javascript pack at head tag

<%= javascript_pack_tag ‘hello_react’ %>

Ref:

<!DOCTYPE html><html>  <head>    <title>Rails With React</title>    <%= csrf_meta_tags %>    <%= csp_meta_tag %>    <%= stylesheet_link_tag ‘application’, media: ‘all’, ‘data-    turbolinks-track’: ‘reload’ %>    <%= javascript_include_tag ‘application’, ‘data-turbolinks-track’: ‘reload’ %>    <%= javascript_pack_tag ‘hello_react’ %>  </head>  <body>    <%= yield %>  </body></html>

Let’s run Our Last and Final Step by:

rails s

Again, go to browser and type in URL localhost:3000

Here we are:

Hurray!

You have successfully completed your ride to create your first “Hello World” using Rails with React.

Keep coding !!!

Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store