DEV Community: Ben D.

Creating and Using Migrations in Ruby/Sinatra/ActiveRecord

Ben D. — Mon, 20 Mar 2023 07:02:02 +0000

As a web developer, it's essential to have a strong understanding of databases and how to manipulate them to create and store data. In Ruby, Sinatra, and ActiveRecord, creating and using migrations is a critical aspect of building robust, scalable applications. Migrations allow you to manage your database schema, define relationships between your tables, and modify data stored in your database. In this blog post, we'll dive into the basics of migrations and provide examples of how to create and use them effectively.

What is a Migration?

A migration is a Ruby file that defines a set of changes to your database schema. It specifies what changes should be made to your database, such as adding a new column, renaming a table, or creating a new table. Migrations can also specify any necessary changes to the data in your database, such as populating a new column with default values or modifying existing data.

Why Use Migrations?

Migrations are an essential tool for managing your database schema because they allow you to version control your database structure. This means you can keep track of changes to your database over time and roll back to a previous version if needed. Migrations also make it easier to collaborate with other developers on the same project by providing a standardized way of updating and modifying the database.

Creating a Migration

To create a migration in Ruby/Sinatra/ActiveRecord, you'll need to use the rake command-line tool. The rake tool is a build automation tool that's commonly used in Ruby applications to automate tasks. Here are the steps to create a migration:

Open your terminal and navigate to your project directory.
Enter the following command to create a new migration file:

rake db:create_migration NAME=migration_name

Replace "migration_name" with the name of your migration. The rake tool will create a new file in the db/migrations directory with the name timestamp_migration_name.rb, where timestamp is the current timestamp.

Open the new migration file in your preferred text editor. The migration file will look something like this:


class MigrationName < ActiveRecord::Migration[6.1]
  def change
    # Add your migration code here
  end
end

Modify the change method to define your migration. For example, if you wanted to add a new column to a table, your migration might look like this:


class AddNewColumnToTable < ActiveRecord::Migration[6.1]
  def change
    add_column :table_name, :column_name, :string
  end
end

In this example, :table_name is the name of the table you want to modify, :column_name is the name of the new column you want to add, and :string is the data type of the new column.

Save your changes and exit the text editor.

Running a Migration

Once you've created a migration, you'll need to run it to apply the changes to your database. Here are the steps to run a migration:

Open your terminal and navigate to your project directory.
Enter the following command to run your migration:

rake db:migrate

This command will apply all the pending migrations to your database.

Rolling Back a Migration

If you need to roll back a migration, you can use the rake command-line tool. Here are the steps to roll back a migration:

Open your terminal and navigate to your project directory.
Enter the following command to roll back the last migration:

rake db:rollback

React state and useState hook

Ben D. — Tue, 20 Dec 2022 16:21:03 +0000

State is an important concept in the React JavaScript framework. In React, state refers to a set of values that determine a component's behavior and render information to the user.

In React, state is used to manage information that is specific to a particular component and that can change over time. State values can be updated by user actions, network responses, or other events, and changes to state values can trigger a re-render of the component's view to reflect the updated state.

For example, a simple to-do list app might have a state value that tracks the current items in the list, and this state value would be updated every time a new item is added or removed from the list. In this way, state allows React components to manage and respond to changing information in a predictable and efficient manner.

State is an important concept in React because it allows components to manage and control their own behavior and data, rather than relying on external sources of information. This makes it easier to build complex and interactive applications using React, because individual components can manage their own state and communicate with each other using props (short for properties), which are a way of passing information between components.

In short, state in React is a way of managing and controlling information within a component, allowing the component to respond to changes in that information and update its view accordingly. This enables the creation of complex and interactive applications using React, and is an essential concept for anyone working with the framework.

Let's look at an example:

To add a state variable, you can import useState at the top of the file:

import { useState } from 'react';

To update a component with new data, two things need to happen:

Retain the data between renders.
Trigger React to render the component with new data (re-rendering).

import React, { useState } from 'react';

function App() {
  // Use the useState hook to define the initial state
  const [count, setCount] = useState(0);

  // Function to increment the count by 1
  const increment = () => {
    setCount(count + 1);
  }

  // Function to decrement the count by 1
  const decrement = () => {
    setCount(count - 1);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

In this example, we use the useState hook to define the initial state of the count variable. We then use functions to increment and decrement the count value in response to user actions. The updated count value is then used to render the current value to the screen.

At its core, state is a JavaScript object used by React to represent an information about the component’s current situation. It is managed in the component just like any variable declared in a function.

The React state holds the data for a component. The component, in turn, returns the data contained within the state.

The state object is where you store property values that belongs to the component and when the state object changes, the component re-renders.

ReactJS docs says:

Components need to “remember” things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called state.

You can add state to a component with a useState Hook. Hooks are special functions that let your components use React features (state is one of those features). The useState Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it.

The useState Hook

useState is technically a function, but other functions that start with use in React are called Hooks.

When you call useState, you are telling React that you want this component to remember something.

The useState hook is a powerful feature of the React library that allows developers to manage state within their application. Through the useState hook, developers can create and maintain state variables and easily hook them up to components to allow for stateful behavior.

State is a concept that is used in programming to refer to the current state of a program or application. It can be used to track the current state of a user’s input, the current state of a component’s properties, or the current state of the application as a whole. State is essential to many applications, as it allows developers to track important information and have it persist between program executions or component renders.

The useState hook is a way to manage state within React components. It is an imperative hook, meaning that it needs to be called in order to set or change state. When the useState hook is called, it will return an array containing two items: the current state and a setter function. The setter function can be used to set the state to a new value, which will trigger a re-render of the component with the new state.

The useState hook provides a simple, yet powerful, way to manage state within React components. It offers an easy way to create and maintain state variables, as well as hook them up to components for stateful behavior. With the useState hook, developers can easily track and update the current state of their application, allowing for dynamic and interactive user experiences.

The useState hook is a great addition to the React library, and it has become an integral part of many applications. It is easy to use, and it provides a simple way to manage state within components. With the useState hook, developers can quickly and easily create and maintain state variables, as well as hook them up to components to allow for stateful behavior.

In conclusion, the useState hook is an incredibly useful feature of the React library. It provides a simple and effective way to manage state within components, allowing developers to track and update the current state of their applications. With the useState hook, developers can create dynamic and interactive user experiences, and it has become an essential part of many applications.

React Component Props

Ben D. — Wed, 29 Jun 2022 23:41:50 +0000

The most important concepts to understand React are components, props, state and hooks.

I will explain 'props', short for 'properties' here. Props are accessed as parameters in the Component function. Often times, they are destructured to keep the code cleaner.

I will assume that you know how to import and export the components in your project hierarchy but if not, you can check out the create-react-app docs

//in the App.js file you would render the prop:

<Hello person={benjamin} />

//and in the Hello.js file, the person prop would be passed down:

function Hello(props) {
return <h1>Hello, {props.person}</h1>
}

//which would ouput:

<h1>Hello, benjamin</h1>

//alternatively, you could destructure the prop for cleaner code:

function Hello({props}) {
return <h1> Hello,{person}</h1>
}

You can have as many props as needed. For example:

function Weather ({temperature, day} {
return <h2> It will be {temperature} degrees on {day}</h2>
}

<Weather temperature='84' day='Tuesday' />

//Which results in:

<h2> It will be 84 degrees on Tuesday </h2>

Class components

It seems that developers are moving away from class-based components as it's unnecessarily verbose. However, if you are still using class components, the process is very similar, but you need to add a this.props instead of just props

For example:

import { Component } from 'react'

class Greeting extends Component {
  render() {
    return <p>Hello, {this.props.who}!</p>;
  }
}

Prop Types

A prop can have any value including strings, numbers, objects, arrays, booleans, variable, function references.

String literal:

<Component prop='this is a string'>

Template literal:

<Component prop={`this is a string with a ${variable}`}

Number literal:

<Component prop={14} />

Boolean literal:

<Component prop={true} /}

Object literal:

<Component pro={{property : 'value'}} />

Array literal:

<Component prop={['item 1','item 2']} />

<Component prop={Message who='Batman' />} />

Variables or function references

<Component prop={functionReference} />

Javascript Scope

Ben D. — Fri, 22 Apr 2022 17:57:03 +0000

A scope in Javascript means the area of code in which certain variables are able to be accessed.

Variables are declared using let,const, and var.

var creates global scoped variables, but this is problematic if this variable is declared in multiple places as overwrites can happen.

The best reference on the internet in my opinion is Dimitri Pavlutin's blog on Scope.

This JS Scope Visualized blog is also amazing blog for visual learners. It's a 7 part series about JS, and has a section on scope which helped me tremendously

There are three types of scope: global, function and block.

Global scope is pretty straightforward, it means that the variables can be accessed from anywhere in the code.

Local Scope

if, for, and while statements create a scope.

function fly() {
  // "fly" function scope
  const message = 'We're going to land in the river';
  if (true) {
    // "if" code block scope
    const pilot = 'Sully';
    console.log(message); // 'That seems dangerous'
  }
  console.log(pilot); // pilot is not defined
}
console.log(message); // message is not defined

Standalone code blocks also create a scope:

{ 
let scope = 'this is block scoped'
} 

console.log(scope) = this would return an error

Also local scope


function localScope() {
    const array = [1, 2, 3, 4, 5];
    let sum = 0;

}

console.log(array); //arr is not defined
console.log(sum); //array is not defined

There are nested scopes too, an inner function within an outer function has access to the outer scope.

In summary,

The Scope is the area in code from where a variable can be accessed.

It can be broken down to:

Global Scope
Local Scope: Function Scope & Block Scope

For the best explanations, please reference the links further up. If you are interested in copy/pasting your code into a web app for a visual representation of scope, then this is a cool site:

JS Visualizer