Setting up a Reducer using Hooks

Image for post
Image for post
Photo by Dominik Schröder on Unsplash

In a previous article, I wrote about how to abstract state logic by creating a createDatacontext.js file. At the end of that article, I also provided an example of how that createDataContext will be used to actually create context, so that state can be called anywhere. In this article, I am going to cover how a Context file is created and how it can be added to a component.

The first step in creating anything will be to create the specified file — in this case, it will look something like:

ExampleContext.js

This file and the createDataContext file should live in the same Context directory. Our next step will be to import the context logic from createDataContext. …


How to Abstract A Context Provider for the useContext Hook

Image for post
Image for post

Hooks are a great way to manage state in a React Web Application. If you are familiar with hooks you are likely familiar with the useContext hook. If not this hook is very similar to the Redux library in that it can provide all components access to state. In this article, I will be discussing how to create a generalized context provider file that will allow you to abstract state logic from your components.

The first step in creating a Context Provider is to create the file. In your file directory create a file named something like:

createDataContext.js

Now in the new file our next step is to import ‘React’ and the ‘useReducer’ hook from…


How Ruby Naming Conventions Work

Image for post
Image for post

I was recently asked a question about Ruby that took me by surprise. I was asked, what are the naming conventions in Ruby? I was so surprised that this question initially stumped me. I have been using the Ruby language for over a year now and was surprised I couldn’t recall something so important. So for this article I wanted to create a refresher on how naming conventions work in Ruby.

In Ruby there are many very specific conventions for naming things so it can be easy to forget them all, if you are using Rails it can become even easier to forget because it takes care of so much under the hood. The naming conventions I will cover in this article are: variables, constants, methods, parameters, classes, models, controllers, and modules. …


How the map enumeartor works

Image for post
Image for post

Regardless of the language you are programming in one of the fundamental functions or methods you will end up using is the ‘mapping’ function. If you are unfamiliar with ‘mapping’ here is an example of its syntax in JavaScript:

const numbers = [2, 4, 6, 8]const newNubmers = numbers.map(num => {
return num * 2
}
console.log(newNumbers)
//expected output: [4, 8, 12, 16]

What is happening here is that we are going through each index in an array and performing some operation on it. In this case, we are multiplying each number by two. …


Image for post
Image for post

In this article I will be covering the basics on how to initaite an Express API. If you are unfamiliar with an Express it is a “Fast, unopinionated, minimalist web framework for Node.js.” By the end of this article we will see an output in both our terminal and our browser window when we navigate to our localhost port.

Creating the Express Project

The first thing we are going to do is set up new directory to house our new API and then enter that directory. So in our terminal we are going to run the command :

$ mkdir example-api$ cd example-api

Next we will create a package JSON by running the…


How to pass parameters with route prop in React-Navigation 5.x

Image for post
Image for post

I recently published an article on how to set up a basic navigator using the react-navigation 5.x library. React-Navigation is a fantastic way to add navigtion to a React-Native applicaiton. It allows us to safely travel between screens and keep a history if where we were before. However, in any application there will be a time when we will need to also pass information form one screen to the next. This becomes especially important when that information refers to information either from state, or from an API. In this article I will be discussing how to pass information using routes.

A quick caveat: To speed things up I am going to use the code from my previous blog post and I am not going to worry about state management at this time. …


Image for post
Image for post

A little while ago I wrote an article on how to set up the react-navigation package for react-native projects. When writing that article I had only been exposed to react navigation 4.x and wrote a quick how-to on setting navigation within a mobile application. After having used react-navigation 5.x a little bit, I wanted to write another quick tutorial on once again setting up basic navigation within your react-native application.

Installation

Regardless of how you initialize a react-native project you will need to install the core library. CD in to your project directory and run the following line in your terminal:

 $ npm install…

Using React-Flippy to add a flip animation to React Projects

In this blog post I will be walking through the basics of a fun NPM called React-Flippy. This package allows you to add a flipping animation to two components in a React Project. To check out it’s documentation click here!

Installation

To install React-Filppy in your console simply run:

$ npm install react-flippy- or if you are using yarn - $ yarn add react-flippy

With this we can now use the react flippy library in our project.

Usage

Before we can begin flipping components we need to import 3 things from react flippy. The Filppy Wrapper, which will be wrapped around all of our flipping logic. The Frontside wrapper, which will be wrapped around the component we want to see on render. …


Image for post
Image for post

Whether you are building a full ruby on rails application, or building a rails api to connect to a different front end more often than not you will likely make use of gems. Whether to add a new feature or to simplify a complex one, gems are a great way to add something to a project and save yourself a bit of code in the process. …


Crafting a fetch request in JavaScript

In almost any web development project, you will likely need to make a request to an outside source to add information to your project. If you are building out a back end, you will need to pull that information from your API, other times you may be calling on an external API to show information not stored within your project itself. Regardless of where this information is coming from, you will need to make a fetch request using the fetch function. In this blog post, I will cover the basics of making a GET fetch request.

A few caveats:

First, for the initail example I will be calling this information from an API I used for a project a while back because that way I know exatctly what information I am looking for. In this case a user and a username. …

About

Kenny Marks

A full stack developer with an interest in Cybersecurity, International Relations, and Gaming.

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