Forem: Learnetto

Ruby on Rails Quiz

Hrishi Mittal — Wed, 31 Jul 2024 08:55:38 +0000

I made a quiz for Rails developers - https://learnetto.com/rails-quiz

How many questions can you answer correctly?

Post your score in the comments!

Interview with Kevin Cunningham on software development, teaching and headless WordPress

Hrishi Mittal — Tue, 20 Apr 2021 19:33:03 +0000

Today, I am interviewing Kevin Cunningham, a software developer, educator and author of the brand new book on Headless WordPress which recently launched on Learnetto.

This interview is part of the Learnetto Interview Series with interesting experts and teachers from all walks of life.

Please introduce yourself - who are you and what do you do?

Hi! I’m Kevin Cunningham. I run a digital prototyping agency called SpinUp, based in Brighton, England.

We work on helping businesses test their ideas by building high fidelity prototypes to test with their clients and investors.

Alongside that, I teach web development though egghead, blogging, Twitter, streams and, most recently, writing books.

Away from the screen, I hang out with my wife and two boys. We try to get outside a lot but with lockdown that’s proved more and more challenging. We’re looking forward to getting back together with friends and getting out camping and adventuring soon.

How did you get into software development?

I have been programming since I was a kid. I was your typical computer and Maths geek.

I studied Maths and Theoretical Physics at university having been discouraged to go into computing by my secondary Maths teacher.

After I finished my degree in Belfast, I moved to Brighton to become a Maths teacher myself. I taught 11-18 year olds for 13 years, working in a variety of roles and schools in and around Brighton.

Programming had been going on in the background as I made little apps for my students and worked with code for fun.

About 4 years ago, I took the plunge and transitioned from being a Maths teacher to being a web developer.

What got you interested in teaching?

I’ve always been teaching. I was tutoring at uni and then was a full-time teacher. When I switched careers, I wasn’t sure if those skills would be relevant or useful.

After a few years, I was missing it a lot. So, I coached a bit at Codebar, became an egghead instructor, blogged and, now, wrote this book.

What gets me excited about teaching is thinking about the impact that it can have on others. I can make mistakes that others don’t have to.

I can learn things and share them in ways that are useful to other people.

What differences have you noticed between teaching online and teaching in-person?

When teaching in person you can read a room or individual. You can do that somewhat with video calls, responding to quizzical glances or unsure expressions.

With pre-recorded video and text tutorials you are guessing more about what people don’t know. You can’t react to the person in front of you. So you find yourself posing and answering questions yourself.

Tell us about your experience with WordPress.

My first professional development was with a PHP Content Management System called Drupal. WordPress has been in the background for the past 20 years as I’ve helped to support my wife and friends. Setting up and debugging web-servers and getting themes up and running.

More recently, I’ve worked with Sega to develop a WordPress/Gatsby solution for them.

It’s one of the options we offer to our clients as we think through the solutions that are going to work for them.

I enjoy dipping into the PHP and the JavaScript side of the system, building plugins and themes.

What do you like about WordPress?

I like that WordPress is well known. I like that it has such a well developed plugin ecosystem that means you can often find a solution for any problem.

I like how easy it is to get up and running, how most ISPs have a one-click WordPress install. I feel like it has a low barrier to entry to have a robust and reliable way to manage content.

What's Headless WordPress?

WordPress is a big piece of software. It is a way to create your content, manage your posts, create images and schedule releases. Do all of those admin-y bits.

It also provides the mechanisms for people to be able to view that content. WordPress then provides the back-end and the front-end.

Headless WordPress says what if we don’t use the native WordPress solution for the frontend?

So, we keep all the amazing functionality and capability of the back-end (creating, editing, curating) and we make that content available through an API. This could be either RESTful or using GraphQL.

Then, on the front-end, we can use any tool that can consume data from an API and render it. So, that could be a React framework, it could be Vue, it could be Svelte - anything that can take content and build it.

That way, you have more flexibility to change the frontend and experiment. The data stays consistent but the presentation changes.

Why is it a good choice for a CMS?

There are a lot of paid headless CMS solutions out there. Mostly, they are very good.

What is true with most software, is that it fills 80% of what you need but you need to bend it to be able to fill that last 20% of your use case. This is sometimes referred to as the Pareto principle. With those paid solutions, these adaptations are challenging.

With WordPress, you’re in complete control of how your API works and how it responds to requests. It provides reliability and flexibility in almost unparalleled ways.

All while being free and open source. I love it!

Tell us about your new book

So my new book, Off With Your Head!, is a guide to get up and running with headless WordPress.

In fact, just a vanilla install of WordPress makes a RESTful API available out of the box. But, in the book, I talk about how you can modify that API and make it present data the way you want. Add new endpoints and manipulate the data before it gets to the frontend.

Also, I look at how you can set up WordPress as a GraphQL solution. How you can provide for all of your website needs from one consistent datastore.

Where can people connect with you and follow all your work?

I’m on Twitter as @dolearning, I’m an instructor at egghead.io, I blog at https://kevincunningham.co.uk and send out a weekly newsletter that you can signup for at https://kevincunningham.co.uk/newsletter.

Feel free to reach out and connect with me - I love that!

Join Kevin for a Free Workshop on Headless WordPress on Friday 20th April

How to use React with Ruby on Rails 6

Hrishi Mittal — Sun, 08 Dec 2019 14:47:17 +0000

Note: This tutorial is based on the latest versions of Rails (6.0.1) and React (16.12).

There are a few different ways to use React inside Ruby on Rails apps. With the recent improvements in native support in Rails for JavaScript tooling, it's now easier than ever to start using JavaScript libraries, including React, with Rails.

webpacker
react-rails
react_on_rails

You can also use React in a separate frontend app with a Rails API. A new tutorial on that is coming shortly. Sign up to the Learnetto newsletter to get it first.

1. webpacker

This tutorial is based on Ruby 2.6.5 and the latest Rails gem (6.0.1 at the time of writing this tutorial).

Create a new Rails app:

rails new eventlite --webpack=react

This creates a Rails app with Webpack configured and a new directory for storing JavaScript code and a couple of new files:

app/javascript:
  └── packs:
      └── application.js
      └── hello_react.jsx

All files in the new app/javascript/packs directory are compiled by Webpack.

There's one example React file hello_react.jsx, which defines a simple functional React component called Hello that can display the words "Hello React!" on a page. It can also take a prop called name to display it instead of the word "React".


import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
})

We can use this component on any page by linking it with the javascript_pack_tag helper method.

We're going to build a simple one-page application for creating and listing events.

So let's start by creating a new events view file app/views/events/index.html.erb and use the javascript_pack_tag method inside it to display the default example Hello component:

<%= javascript_pack_tag 'hello_react' %>

Let's create the associated controller and index action for events:

class EventsController < ApplicationController
  def index
  end
end

And make that our root path in config/routes.rb:

root 'events#index'

Then we can start the Rails server:

rails start

Go to http://localhost:3000 to see the result:

I focus on using React with webpacker in the new version of my Complete React on Rails Course.

2. react-rails

react-rails is the official React community gem for integrating React with Rails. The main benefit of using this gem is the react_component helper method which makes it easy to pass Rails data to components.

You can use react-rails with webpacker or with Sprockets (to bundle the JSX into the asset pipeline).

a. Using react-rails with webpacker

Add the react-rails gem to the Gemfile of the app we created above and install it:

gem 'react-rails'

$ bundle install

Then run the react-rails generator:

rails generate react:install

This creates the app/javascript/components/ directory for storing your React components. It also sets up configuration for mounting components and server-side rendering.

The gem adds the following lines in application.js to load the gem's JavaScript code (react_ujs) and all code inside the components directory:

var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

We can use the same Hello component we created earlier with webpacker by moving it to the new components directory. We also need to rename the file to 'Hello.jsx' (case sensitive).

react-rails provides a convenient helper method called react_component to render React components inside views.

First let's export the component and remove the call to ReactDOM.render on document load. The component code will now look like this:

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

export default Hello

And now inside our view file events/index.html.erb, we can replace the javascript_pack_tag with a call to react_component:

<%= react_component("Hello") %>

We can also pass another value for the name prop easily:

<%= react_component("Hello", { name: "react-rails" }) %>

The react-rails gem also provides a component generator to automatically create a basic component by passing it a component name and props (with their proptypes). It's similar to Rails generators for creating models and scaffolds:

$ rails generate react:component HelloWorld greeting:string

b. Using react-rails with sprockets

react-rails also gives you the option to continue using the default Rails asset pipeline to serve your React code, instead of using webpacker.

You can use this option by installing just the react-rails gem without the webpacker gem, and following the same steps as above.

Note that the webpacker gem is included in Rails by default since version 6. So, for an existing Rails 6 app, you'll need to uninstall it and move all your JavaScript code to the classic app/assets/javascripts directory. Or you can generate a new Rails app without webpacker by using the --skip-javascript flag:

rails new eventlite --skip-javascript

I strongly recommend you avoid this route. It's best to use the new Rails standard webpacker so that you can get all the benefits of the latest JavaScript tooling and you don't create legacy code that will get out of date very quickly.

3. react_on_rails

The other most popular third-party gem for integrating React into Rails is the react_on_rails gem created by ShakaCode.

Similar to the react-rails gem, now that Rails already provides an easy way to use React via webpacker, you have to see if the stated benefits of the react_on_rails gem apply to your situation.

The main benefits include better support for server side rendering, easy passing of props to React components (with the react_component method just like react-rails), and Redux and React Router integration.

This gem requires webpacker. To use it in a new Rails app with webpacker, let's install the gem first.

Add it to to the Gemfile:

gem 'react_on_rails', '11.1.4' # Use the exact gem version to match npm version

The run:

$ bundle install

After installing the gem, we must first commit the code to git or the gem's install generator won't run. This is an easy step to miss, so make sure you do it before you proceed.

Once you've committed the code to git, run the install generator and start the Rails server:

$ rails generate react_on_rails:install

This generates some example code and configuration and installs some dependencies.

This gem places all React code under a new app/javascript/bundles directory. This is just a convention, you can use other directories if you like.

The gem install generated automatically generates an example component HelloWorld stored in app/javascript/bundles/HelloWorld/components/HelloWorld.jsx.

It also generates a file called hello-world-bundle.js inside the app/javascript/packs directory. This is where the HelloWorld component code is imported and registered with react_on_rails so that it can be used in views.

import ReactOnRails from 'react-on-rails';

import HelloWorld from '../bundles/HelloWorld/components/HelloWorld';

// This is how react_on_rails can see the HelloWorld in the browser.
ReactOnRails.register({
  HelloWorld,
});

react_on_rails also provides a react_component helper method for rendering components inside views and pass props to them. You can see an example in the automatically generated view app/views/hello_world/index.html.erb:

<h1>Hello World</h1>
<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>

Start the Rails server and visit http://localhost:3000/hello_world to see the component in action:

That’s a quick overview of 3 ways to get started with using React inside your Rails app.

I recommend starting with webpacker and using other gems only if you need their specific benefits.

Once an app is big and complex enough, a lot of developer teams choose to move their React code into a separate frontend app and use the Rails app as a backend API.

I’ll shortly publish another tutorial teaching the basics of that. Sign up to the Learnetto newsletter to get it first.

And if you want to learn it all in depth to use React professionally with Rails, check out the new version of my Complete React on Rails Course.

Interview with Ajdin Imsirovic on Angular and frontend web development

Hrishi Mittal — Sun, 01 Dec 2019 11:03:33 +0000

Today I'm pleased to interview Ajdin Imsirovic, senior developer, author and teacher of two brand new Angular courses on Learnetto - The Free Visual Guide to Getting Started with Angular and The Complete Practical Angular Course.

In this interview, Ajdin shares his thoughts on Angular and frontend web development.

Please introduce yourself.

My name is Ajdin Imsirovic. I'm a self-taught full stack web developer. I started off as a print designer, then slowly moved into digital media (web design), and finally, bit by bit, into web development. Initially, I only did HTML and CSS, then SCSS, then JavaScript, and now I'm working in several front-end languages and libraries, and with PHP and Ruby on the backend.

I blog actively on https://www.codingexercises.com and have written several technical books.

What got you into programming?

I built my first web page as a table-based layout in 2001. The web was young back then, and it was a fun, novel technology to play around with (I still feel the same way today!). However, I didn't really get into full time coding till maybe 10 years later.

In the meantime, I was mostly designing on the side and working in non tech-related jobs. Regardless, all that time I kept following the progress of web technologies, and every once in a while, I'd dabble a bit with mostly front-end development.

Finally, in 2011 I got hired as a webmaster, then as a web developer, and it went on from there.

Why do you like Angular?

Let's say there are several obstacles you're trying to solve as a web developer:

Stay relevant and improve your skills.
Use a complete framework that helps you be productive.
Balance challenging tasks with familiar tasks so that you can grow and your job is not boring.

I believe Angular is a right mix of several competing solutions, each one pulling in their own direction.

For example, you need to stay relevant, by learning new things. So, if you know JavaScript, but don't know TypeScript, Angular will help you there since it's the default language to use.

Additionally, it's a complete framework: it comes with batteries included. For example, you don't have to think about the best way to perform XHR requests, it's built-in; you just need to know how to use the features as intended.

Once you do know it, each project will have a level of similarity that makes you become more productive, faster.

Angular also has enough different features that there's always something new to explore and get better at - thus you're never bored. But you are still staying inside the Angular ecosystem, which is helping you master your craft.

Long story short, I only have words of praise for it.

How does it compare to other frontend libraries and frameworks?

I've already sort of answered the question, but if you'd like a more direct comparison, here's my take on it:

I don't like React since it's too flexible. It's like somebody gave you all the parts of a car, feel free to assemble it yourself. However, being curious as I am, I'm still watching React and making mini projects in it here and there, but Angular just feels like a better fit for me.
It reminds me of Elm because very often it won't compile if you messed something up. For example, if you accidentally mess up your HTML templates, it will throw an error saying: Template parse errors. So it safeguards you against your own mistakes - to a point. One complaint could be that Elm catches many more errors then Angular does, because Angular's compiler is not as strict, but it's strict enough for my taste.
Vue is sort of like an offshoot of Angular. It's a strong contender in my opinion; I like it, but it doesn't feel as enterprise-ready as Angular, and the market share is not as big.

However, all of these answers need to be taken with a grain of salt. Lots of online comparisons of frameworks really boil down to personal preference and to what is actually used at your place of work.

The best advice, in my opinion, is to try them all, then decide which one works best for you.

This is a significant effort, but it's still doable. Even if you decide to try something like that, I'd say you should try Angular right after you do it in vanilla JavaScript and/or jQuery.

What's your favourite thing about Angular?

The standardized way of doing things is my number 1 Angular feature.

People say React has got more jobs and more projects online, but Angular is better when these projects become bigger. So it is sort of expected that bigger projects should/will use Angular on the frontend. It's a stretch, but this might mean that you'll have better job stability since you'd be working for enterprise clients or directly in enterprise firms.

Also, standardization helps avoid things getting messy as your projects grow bigger. Additionally, standardization makes it easier to add new features, because most of the times, there are only a few suggested/expected ways of doing things in Angular.

What kind of projects is Angular best for? What projects have you used it for?

Angular is best-suited for large projects with lots of features. I've used it to build some very complex web apps that included lots of logic on the front-end.

How do you recommend people start learning Angular?

Since I'm a teacher by vocation and a self-taught web developer in practice, I'm really curious - even obsessive - about the learning process. Like any web-related technology, it is best to learn it by doing. However, it's important to not lose too much time learning the basics, because it takes time to learn Angular.

My suggestion is start with The Free Visual Guide to Getting Started with Angular and if you like it, enrol in The Complete Practical Angular Course to go in-depth while building a complete Angular application.

11 great quotes from The Tao of Programming

Hrishi Mittal — Mon, 11 Sep 2017 22:55:06 +0000

Originally published at Learnetto.com.

The Tao of Programming by Geoffrey James is a strange and funny book. It’s one of my all-time favourites.

These are some of my favourite quotes from the book:

“After three days without programming, life becomes meaningless.”

“I don’t know whether I am Turing dreaming that I am a machine, or a machine dreaming that I am Turing!”

“When a program is being tested, it is too late to make design changes.”

“A well-written program is its own Heaven; a poorly-written program is its own Hell.”

“But how will I know when I have received Enlightenment?” asked the novice. “Your program will run correctly,” replied the Master.

“Though a program be but three lines long, someday it will have to be maintained.”

“Let the programmers be many and the managers fewâ€Š–â€Šthen all will be productive.”

“You can demonstrate a program for a corporate executive, but you can’t make him computer literate.”

The Master Programmer moves from program to program without fear. No change in management can harm him. He will not be fired, even if the project is cancelled. Why is this? He is filled with Tao.

“Without the wind, the grass does not move. Without software hardware is useless.”

You can get a copy on Amazon or read it online here.

The 11-minute guide to building and launching an online store with Rails, Stripe Checkout and Heroku

Hrishi Mittal — Sun, 10 Sep 2017 17:06:53 +0000

Originally published at Learnetto.com.

Learn to build and launch a real online store in this 11-minute video tutorial. We will build a simple store which accepts payments through Stripe checkout.js and deploy it to Heroku.

How to include Rails Associated Model Data in React components

Hrishi Mittal — Wed, 06 Sep 2017 11:41:31 +0000

Originally published at Learnetto.com.

When you start using React with Rails, one of the frustrating problems you quickly run into is trying to access associated model data from your React component.

Let's say we areÂ building a chat app with Rails and React. We have three models, Chatroom, Message and User, which have the following relationships between them:

class Chatroom < ApplicationRecord
  has_many :messages, dependent: :destroy
end

class Message < ApplicationRecord
  belongs_to :chatroom
  belongs_to :user
end

class User < ApplicationRecord
  has_many :messages, dependent: :destroy
end

And we have aÂ Message componentÂ for rendering individual messages:

import React from 'react'

const Message = ({message}) => 

    {message.user.name}: {message.body}

export default Message

In addition to the message body we also want to display the user's name.

If you're using a standard Rails ERB or Haml view template, you can simply write something like:

<%= @message.user.name %>

And that will just work even if you didn't include the user data in your database query in the controller.

However,Â unlike in a Rails view, if we callÂ message.user.nameÂ inside our React component without having specifically included that data in the prop sent to the component, it will throw an error.Â

While a Rails template is actually able to call the model on-the-fly and get data it doesn't have, we don't have that luxury with React.

We need to explicitly compose the JSON with the associated User model data because a React component can only access the JSON data we provide it.

There are many ways to include the associated model data, including manually composing the JSON in the controller, defining a customÂ as_jsonÂ methodÂ on the model or usingÂ ActiveModelSerializers.

One of the cleanest and most flexible ways is to useÂ jbuilder, which gives you a simple Domain Specific Language (DSL) for declaring JSON structures. The jbuilder gem comes included with Rails.

In the example above, we can include our user data in the message JSON by defining it in aÂ _message.json.jbuilderÂ file like this:

json.(message, :body, :id)
json.user do
  json.extract! message.user, :id, :name, :image
end

The jbuilder DSL is quite powerful and allows you to do all sorts of custom structuring of the data.

For example, let's say we want to send all the messages in chronological order and user data for a particular chatroom to a Chatroom component. We can define theÂ chatroom jsonÂ like this:

json.(chatroom, :name, :id)
json.messages(chatroom.messages
                .sort_by{|m| m[:created_at]}) do |message|
  json.extract! message, :id, :body
  json.user do
    json.extract! message.user, :id, :name, :image
  end
end

Check out theÂ jbuilder documentationÂ to learn more about all its features.

The full code of the Chat app isÂ on GithubÂ and there's a live demo running here.

You can also learn how to build it yourself in this two-part video tutorial - Â How to build a chat app with Rails 5.1 ActionCable and React.js Part 1Â andÂ Part 2.

How to make AJAX calls in Rails 5.1

Hrishi Mittal — Wed, 23 Aug 2017 11:10:18 +0000

Originally published at Learnetto.com.

Rails shipped without jQuery as a dependency for the first time with version 5.1. Rails used to rely on jQuery forÂ Unobtrusive JavaScriptÂ features but now ships with its own libraryÂ rails-ujsÂ with the same features.

One of the most common use cases for jQuery in Rails was making AJAX calls through forms and links. If you’re using Rails 5.1 for the first time, you might get confused about how to make AJAX calls, especially things like data formats and including CSRF tokens.

So this little tutorial walks you through a few ways you can do so:

1. Use rails-ujs (no jQuery)

A new Rails 5.1 app automatically includes the rails-ujs script in the app’s application.js file:

//= require rails-ujs

If you don’t want to include it there and use it only selectively, say if you’re making a separate React frontend with Rails’s new webpacker support, then you can do use rails-ujs by installing it as a package:

$ yarn add rails-ujs

And then import and start it in your JavaScript file:

import Rails from â€˜rails-ujs’
Rails.start()

Remove this line from application.js :

//= require rails-ujs

Now let’s say we want to make an AJAX POST call to an API endpoint/things with some data which looks like this:

mydata = {
 thing: {
  field1: value1,
  field2: value2,
}}

Making an AJAX POST call with rails-ujs looks identical to making it with jQuery:

Rails.ajax({
  type: "POST", 
  url: "/things",
  data: mydata,
  success: function(repsonse){...},
  error: function(repsonse){...}
})

Except for one thing! As far as I can tell, you can’t simply send JSON data. So we need to convert mydata to application/x-www-form-urlencoded content type manually like this:

mydata = 'thing[field1]=value1&thing[field2]=value2'

jQuery does this conversion automatically before submitting a request.

I assumed rails-ujs has some automatic way of doing it, but I couldn’t find anything in the docs orÂ code.

If you know,Â let me know.

rails-ujs automatically takes care of including the CSRF token with the request.

2. Use jQuery

If the manual data conversion puts you off, you can still use jQuery. You may be relying on jQuery for other things in your app anyway, so here are couple of ways of using jQuery with Rails for making AJAX calls:

2.1 Use the jquery-rails gem

This gem used to be automatically included in previous versions of Rails. You can install it by adding it to your Gemfile:

gem 'jquery-rails'

Then run:

$ bundle install

And include jquery and jquery_ujs in your application.js file:

//= require jquery
//= require jquery_ujs

That’s all you need. Now you can make your AJAX call in the usual way:

$.ajax({
  type: "POST", 
  url: "/things",
  data: mydata,
  success: function(data, textStatus, jqXHR){...},
  error: function(jqXHR, textStatus, errorThrown){...}
})

jquery_ujs takes care of including the CSRF token and jquery converts the data to application/x-www-form-urlencoded content type automatically.

2.2. Use jquery package from npm

If you don’t want to use a gemified version of jQuery, you can install it as a JavaScript package from npm:

$ yarn add jquery
$ yarn add jquery-ujs

Then import them in your JavaScript file:

import $ from â€˜jquery’
import {} from â€˜jquery-ujs’

Make sure to remove the jquery-rails gem if you have it installed and remove jquery and jquery_ujs from application.js.Â

You may get an error saying jQuery is not defined. In your webpack config file add this to the config.plugins array:

new webpack.ProvidePlugin({
 $: “jquery”,
 jQuery: “jquery”
}),

And now you will be able to use jQuery for making your AJAX calls.

3. Use axios

axiosÂ is a promise-based HTTP library. You can use it to make HTTP requests from node.js (on the server) and also AJAX requests from the browser.

It’s a good alternative if you don’t need any of jQuery’s other features. To use axios in a Rails 5.1 app (with webpacker), install it:

$ yarn add axios

Then import it in your JavaScript file:

import axios from â€˜axios’

Now we can make the AJAX call like this:

axios({
  method: 'POST', 
  url: '/things',
  data: mydata,
  headers: {
    'X-CSRF-Token': document.querySelector("meta[name=csrf-token]").content
  }
})
.then(function(response) {...},
.catch(function(error) {...}
})

A few things to note here:

We have to include the CSRF token header. Unlike jquery_ujs and rails-ujs, it’s not automatically included with axios requests.

We can specify it as a default setting to avoid repeating it in all our AJAX calls:

const csrfToken = document.querySelector("meta[name=csrf-token]").content 

axios.defaults.headers.common[â€˜X-CSRF-Token’] = csrfToken

We can access the success and error responses using the promises syntaxÂ .then.

Another option is to useÂ fetch, but it’s an experimental API and not available by default in all browsers. So you’re best off usingÂ Github’s polyfill library. I prefer axios to fetch because fetch responses need to be first converted to json and the error handling can also be confusing.

How to use React.js with Ruby on Rails 5

Hrishi Mittal — Mon, 24 Jul 2017 09:08:54 +0000

Originally published at Learnetto.com.

IMPORTANT UPDATE (6 July 2017):Â With the release of Rails 5.1, Rails now has native support for using React via the webpacker gem. Check out the free lesson on how to do this in theÂ Free React on Rails courseÂ or seeÂ this blog post.

There are a few different ways to useÂ ReactÂ inside Ruby on Rails apps. In this post, I'll cover 3 of the most popular ways.

*1.Â *react-rails gem (https://github.com/reactjs/react-rails)

The react-rails gem is the simplest and quickest way to start using React inside your Rails app.

It uses the default Rails asset management and automatically transforms JSX into the asset pipeline using the Ruby Babel transpiler.

Assuming you already have a recent version of Ruby and the Rails gem installed, here's how you get started with react-rails.

Add the gem to your Gemfile:

gem 'react-rails'</pre>

Install the gem:

bundle install

Run the react-rails installation script:

rails g react:install

This will create a components directory, manifest file and add them to the application.js file.

Then create your React component file with a .jsx extension and save it underÂ app/assets/javascripts/components.

var HelloMessage = React.createClass({
  render: function() {
    return (
      <h1>Hello {this.props.name}!</h1>
    )
  }
});

Finally, use the component in your view with theÂ react_componentÂ helper method.

<%= react_component('HelloMessage', name: 'John') %>

The method takes the name of the component as the first argument and any props as the second argument. It adds a div with the relevant class and props, which is then used by the react_ujs driver to mount and render the component.

That's all you need to get started!Â

There's a whole lot more react-rails offers, including choosing react builds for your environment, server-side rendering, writing components in ES6 and component generators, which are covered in ourÂ React on Rails course.

This gem allows you to start with React gradually and test the waters by converting individual views into React components. Once you're happy and confident with it, you can convert more and/or move to a more powerful setup.

*2.Â *react_on_rails gem (https://github.com/shakacode/react_on_rails)

This is another very popular gem for integrating React in Rails. The key difference with react-rails is that it uses EcmaScript 6 (ES6) by default and state-of-the-art JavaScript tooling, including Webpack, instead of relying completely on the Rails asset pipepline. It alsoÂ doesn't depend on jQuery.

Instead of using the Rails asset pipeline for ES6 compilation, react_on_rails only uses it for including the JS that Webpack compiles.

You can use npm to install JavaScript libraries, instead of having to use gems or manually downloading and including them.

It gives you a lot more power at the cost of installing and managing a few extra things.

To get started, you need to install node so that you can use npm to install JavaScript dependencies. You can download node directly fromÂ their websiteÂ or install it usingÂ nvm.

Once node is installed, we can start by adding the gem to the Gemfile of our Rails app:

gem "react_on_rails", "~> 6"

Install it by running bundle:

bundle

Now, we need to commit this to git, otherwise the gem's installation script won't work.

git init
git add -A
git commit -m "Initial commit"

Then run the gem's generator to create the package.json and Procfile.dev files:

rails generate react_on_rails:install

Then run bundle again for installing execjs and npm install for installing JS dependencies:

bundle && npm install

Then, start the Rails server with foreman:

foreman start -f Procfile.dev

We're using foreman to run Webpack, in addition to the Rails server.

Now that everything is set up, we can create and use React components.Â

The gem's generator also creates a client directory, which is where all client-side code needs to go.Â

A Hello World example is included under the client directory. Below is a simplified extract of the code for a component displaying a Hello message with a name passed as a prop.

import React from 'react';

export default class HelloWorld extends React.Component {
  constructor(props, _railsContext) {
    super(props);
  }

  render() {
    return (
      <h1>Hello, {this.props.name}!</h1>
    );
  }
}

We can use the react_component helper method to render the component in a view in the same way we did with the react-rails gem.

<%= react_component("HelloWorldApp", props: {name: 'John'}) %>

If you're already familiar with Webpack and modern JavaScript concepts and tooling, then go right ahead and start with react_on_rails. Otherwise, it might be better to get a feel for the core concepts of React with react-rails first and then move on to react_on_rails.

Have a look at theÂ React on Rails doctrineÂ to get some insight into the design decisions behind react_on_rails.

**3. Rails API with a separate frontend React app (Nodejs + Express)

**A third option for using React with Rails is to separate the backend and frontend into two different apps.Â

The backend can either be a standard Rails app exposing some API endpoints with JSON output or it can be a Rails API-only app. The frontend is an Express app running on Nodejs, which uses React and talks to the Rails API.

Obviously, building, running and maintaining two separate apps is much more work. But there are some benefits.

Making an API may be a good idea anyway to enable you to build other clients like mobile apps (although note that you can use a Rails API with the gems too).

A Node app is the natural environment for a JavaScript library like React, so you may find you're more productive and always have access to the latest JS tooling by default. Server-side rendering of components is also faster.

If you work in a medium-large company with dedicated teams for backend and frontend development, then separating the two code bases makes sense.

You do have to deal with the complexities of running two apps. You either have to implement Cross Origin Resource Sharing (CORS) or proxy requests through a server like nginx.

This articleÂ by Alex Fedoseev goes into some detail on what such a setup would look like. It's an excellent read to get an insight into what's involved and whether it's a suitable approach for you.

So that's 4 of the most popular methods of using React with Rails. Research and experiment with the ones you think make most sense for your situation and please leave a comment to share your experiences!

If you found this article useful, check outÂ The Complete React on Rails coursefor detailed hands-on video lessons on using React with Rails.