A quick guide to setting up pagination using React only.

Photo by CHUTTERSNAP on Unsplash

To Begin

Create your React application.

npx create react-app pagination-app

Navigate to the project directory.

cd pagination-app

Create a Pagination.js component inside the src folder.

import React from 'react';const Pagination = () => {
return (
<div>
</div>
);
};
export default Pagination;

Update App.js to render the newly created Pagination component.

import Pagination from './Pagination'function App() {
return (
<div className="App">
<Pagination />
</div>
);
}
export default App;

Configuring the Pagination Component

Let’s set up some dummy data to display with our application.

We’ll also need to import the useState hook.


A quick guide to setting up a React application with Redux + Thunk.

Photo by Eutah Mizushima on Unsplash

What is Redux?

Redux is a JavaScript library used to manage application state. It can be broken down into three major components.

  1. Store
  2. Action
  3. Reducer

The store is responsible for maintaining an application’s state. In order to update the store Redux provides a dispatch method, which receives an action as an argument.

An action is a simple JavaScript object that has two attributes: a type, and a payload. The main purpose of an action is describing something that happened in the application (e.g. …


A simple guide to creating a CRUD application and implementing user authentication with Ruby on Rails.

Photo by Sean Kuriyan on Unsplash

This tutorial is designed to walk you through the steps necessary to set up a CRUD (create, read, update, delete) Ruby on Rails application with user authentication. You’ll be able sign up, login, logout, as well as view, edit and destroy user accounts.

This guide does not cover error handling or validation. However, I hope it’ll serve as a solid base for you to further build upon.

To Begin

Let’s start by creating our Rails application.

rails new user-app
cd user-app

If you prefer to use…


Understanding the unique attributes that define pure functions in JavaScript.

Photo by Aurélien - Wild Spot on Unsplash

After finishing coding bootcamp, I spent the bulk of my time developing a deeper understanding of JavaScript. Throughout my studies, I came across a variety of terminology that I was aware of but couldn’t quite define on my own. Today, we’ll be learning about one of the terms, pure functions.

What is a Pure Function?

In a simple sense, a function is procedure that receives an input then returns an output. A pure function has two additional attributes.

  1. Given the same input, a pure function will always return the same output.
  2. A pure function has no side-effects.

Let’s delve a little deeper into these specific…


A brief overview designed to help you understand the fundamental concepts of prototypal inheritance.

Photo by Samuel Ferrara on Unsplash

What is Prototypal Inheritance?

In simple terms, prototypal inheritance refers to objects inheriting properties and methods from other objects. These object that properties are being inherited from are called prototypes. JavaScript is a prototype based language. It is not class based.

But wait! Doesn’t JavaScript have classes? If you’re familiar with JavaScript, most likely you’ve written something similar to this.

class Dog {
constructor(name, breed) {
this.name = name;
this.breed = breed;
}
}

Don’t let this fool you! Class syntax was introduced in ES6, however it is simply syntactic…


A step-by-step guide to traversing a tree with breadth first search.

Photo by Sylvia Yang on Unsplash

What is Breadth First Search?

Breadth first search is an algorithm for searching a tree or graph data structure. It begins at the root node then explores all nodes left to right, level by level. Breadth first search follows the FIFO (first in, first out) principle and can be implemented with a queue.

Before We Begin…

For this walkthrough we’ll be writing a function breadthFirstSearch, which will take in a root node, traverse the entire tree and return an array with all the node values in breadth first search order.

The nodes will be defined with the…


An Introduction to JavaScript’s Call Stack, Event Loop and Event Queue

Photo by Kelly Bork on Unsplash

What is the Call Stack?

A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc. — MDN Web Docs

The call stack keeps track of functions to be executed. When we call a function, it’s added, or pushed to the top of the call stack. When the function returns, it’s removed, or popped from the call stack. Any asynchronous functions (fetch, setTimeout, async, etc.) …


Learn Essential Markdown Syntax Ranging from Text Styling and URL Links to Image Manipulation.

Photo by Christin Hume on Unsplash

What is Markdown?

Markdown is an easy to use syntax for styling and formatting writing on the internet. Most likely, you’ve seen it used for GitHub READMEs. When developing new applications, it’s always a good idea to create a well-written, informative, and well-styled README to accompany your project. This article will hopefully serve as a helpful reference guide while you’re creating your own READMEs on GitHub.

Text Styling: Bold

To make text bold, simply wrap in double asterisks.

Syntax:

**TEXT**

Example:

This word is **bold**

Result:


A Beginner’s Guide to Setting Up Routes with React

Aerial Street View of Barcelona, Spain
Aerial Street View of Barcelona, Spain
Photo by Benjamin Voros on Unsplash

After 5 months in the Flatiron School’s software engineering problem, it was finally time to start my final project. My assignment was to create a single page application with a React/Redux frontend and a Rails API backend. One of the first hurdles I came across while setting up my React frontend (aside from wrapping my head around the wonderful yet intimidating world of React) was enabling routing.

For this article, I’ll be explaining the basics of routing for any newbie React developers.

To Begin

Assuming you have an initial React app setup, you’ll…


A Beginner Guide to Configuring a Project with TypeScript

Photo by Annie Spratt on Unsplash

What is TypeScript?

TypeScript is a superset of the JavaScript language, developed and maintained by Microsoft. It utilizes a type system to assist in error handling increase development efficiency.

Have you been studying TypeScript?

Not sure how to implement it into an actual project?

This tutorial is for you!

To Begin

Create your project folder, then navigate inside.

mkdir first-typescript-project
cd first-typescript-project

Create a package.json file.

npm init --yes

Install Node Packages

Add TypeScript as a dev dependency.

npm install --save-dev typescript

Install tsc-watch. This program watches for changes to your TypeScript files and reloads upon on detection.

npm…

Ellen Park

Full Stack Software Engineer specializing in Javascript, React and Ruby on Rails

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