I came across with a challenge to build nested route in rails, and I believe that this post can help other junior like myself. The challenge was about to set up a nested route for 3 controllers where: Dog is child of Owner and Meal is a child of Dog. Also, with 2 grouped routes admin and reports.

Objectives:

- Understand the value of nested routes

- Create nested routes

  • Understand how nested resource URL helper are named.

Regular URL

In a regular URL we might imagine the following possible URLs .

get ‘admin/owners’, to: ‘owners#index’

get ‘admin/owners/:id/dogs’, to: ‘dogs#index’


React Redux Redux-thunk essential

This blog post will explain the basic of understanding React Redux concept.

In order to avoid passing props down to components in React, Redux is very helpful to manage the states. It is similar to a cycle. Only 3 steps to master. You must have a reducer(store), set up you index.js to make store available to your app finally connect the component that need states within your store.

Initial set up

npm install --save create-storenpm install –save redux react-redux / yarn add react-reduxnpm install --save redux-thunk

IN INDEX.JS

Import createStore, import provider, import recuder…


Ruby offers various enumerables on collections that check for validity of the objects within it.

Consider the following example:

The any? method returns true if the block ever returns a value other than false or nil for any element passed to it:


arr = [9, 5, 1, 2, 3, 4, 0, -1]

access index

inclusive and exclusive range


FOR EACH

The each iterator returns all the elements of an array or a hash.Executes code for each element in collection. Here, collection could be an array or a ruby hash.

It’s does not alter the original argument

Syntax

MAP

Map is a Ruby method that you can use with Arrays, Hashes & Ranges.The main use for map is to TRANSFORM data.


Active Record

Active Record is the M in MVC — the model — which is the layer of the system responsible for representing business data and logic. Active Record facilitates the creation and use of business objects whose data requires persistent storage to a database. It is an implementation of the Active Record pattern which itself is a description of an Object Relational Mapping system.

The Active Record pattern

An object that wraps a row in a database table or view, encapsulates the database access, and adds domain logic on that data.

An object carries both data and behavior. Much…


Each component in React has a lifecycle which you can monitor and manipulate during its three main phases. The three phases are: Mounting, Updating, and Unmounting.

Each component has several “lifecycle methods” that you can override to run code at particular times in the process. You can use this lifecycle diagram as a cheat sheet. In the list below, commonly used lifecycle methods are marked as bold. The rest of them exist for relatively rare use cases.

Mounting

These methods are called in the following order when an instance of a component is being created and inserted into the DOM:


Handling forms is about how you handle the data when it changes value or gets submitted. In HTML, form data is usually handled by the DOM. In React, form data is usually handled by the components. When the data is handled by the components, all the data is stored in the component state .

Just like in HTML, React uses forms to allow users to interact with the web page.

Adding Forms in React

You add a form with React like any other element:

Example: Add a form that allows users to enter their name:


React components has a built-in state object.

The state object is where you store property values that belongs to the component.

When the state object changes, the component re-renders.

Creating the state Object

The state object is initialized in the constructor:

Example:

Specify the state object in the constructor method:

The state object can contain as many properties as you like:

Example:

Specify all the properties your component need:


React is a JavaScript library for building user interfaces. React is used to build single page applications. React allows us to create reusable UI components.

Just like HTML, React can perform actions based on user events.

React has the same events as HTML: click, change, mouseover etc.

Adding Events

Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:

  • React events are named using camelCase, rather than lowercase.
  • With JSX you pass a function as the event handler, rather than a string.

onClick instead of onclick.

React event handlers are written inside curly…

Sekou Dosso

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