Lesson 1: Ruby Basics for React Developers

on

Here is the blog post in a clean, simple, and copy-paste-friendly format.

Lesson 1: Ruby Basics for React Developers

Welcome to the first lesson of our React to Rails series.

Before you can build APIs, you need to be comfortable with the language. The good news? If you know JavaScript, you already know 80% of the concepts. We just need to adjust the syntax.

Here is your crash course in Ruby, designed specifically for JavaScript developers.

1. Variables: No More const or let

Ruby is dynamically typed, just like JavaScript, but it is much more minimalistic. You don't need keywords to declare variables.

JavaScript:

JavaScript
let age = 25;
const name = "Bilal";

Ruby:

Ruby
age = 25
name = "Bilal"

Key Difference:

In Ruby, we use snake_case for variable names (e.g., user_name), whereas JavaScript uses camelCase (e.g., userName).

2. Data Types

Ruby data types map very closely to the types you use in React state.

  • Integer: age = 30 (Same as JS Number)

  • Float: price = 19.99 (Same as JS Number)

  • String: name = "Bilal" (Same as JS String)

  • Boolean: is_active = true (Same as JS Boolean)

  • Nil: data = nil (Equivalent to JS null or undefined)

3. String Interpolation

This is one of the most common syntax switches you will need to make.

JavaScript (Backticks):

JavaScript
`Hello ${name}`

Ruby (Double Quotes):

Ruby
"Hello #{name}"

Important Rule: You must use double quotes "" for interpolation to work in Ruby. Single quotes '' are treated as literal text.

4. Methods (Functions)

In React, you write functions constantly. In Ruby, we call them Methods.

JavaScript:

JavaScript
function greet(name) {
  return `Hello ${name}`;
}

Ruby:

Ruby
def greet(name)
  "Hello #{name}"
end

Key Differences:

  1. def: Used to define the method.

  2. Implicit Return: You do not need to type return. Ruby automatically returns the result of the last line of code.

  3. end: Closes the function (no curly braces {}).

5. Conditionals

If/Else logic is nearly identical, but Ruby offers a cleaner syntax that reads like English.

JavaScript:

JavaScript
if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

Ruby:

Ruby
if age >= 18
  puts "Adult"
else
  puts "Minor"
end

Pro Tip: Ruby allows "trailing conditionals" for one-liners. This is very popular in Rails codebases:

Ruby
puts "Adult" if age >= 18

6. Output to Console

When debugging your Rails API, you will check your terminal logs, not the browser console.

  • JS: console.log("Hello")

  • Ruby: puts "Hello"

(Note: puts stands for "put string" and adds a new line automatically.)

7. Common Mistakes for React Devs

  1. Forgetting end: Every def and if block must be closed with an end.

  2. Falsey Values: In JavaScript, 0 is false. In Ruby, it 0 is true. Only false and nil are treated as false in Ruby.

🧠 Mini Exercise

To lock in this knowledge, try writing this simple Ruby script:

  1. Define a variable name and age.

  2. Write a method called introduce that accepts these two variables as arguments.

  3. The method should print: "My name is [NAME] and I am [AGE] years old".

  4. Call the method.

(Scroll down for the solution)


Solution:

Ruby
name = "Bilal"
age = 25

def introduce(user_name, user_age)
  puts "My name is #{user_name} and I am #{user_age} years old"
end

introduce(name, age)

What’s Next?

In Lesson 2, we will cover Collections (Arrays & Hashes) and the methods you will use every single day in Rails: map, each, and select.

Next Step for you: Reply with "START LESSON 2" to continue learning!

Comments

Post a Comment