DEV Community: Sid Saythongphet

React Context Hook

Sid Saythongphet — Wed, 07 Dec 2022 00:05:26 +0000

React Context is a vital tool that allows for easy sharing of data throughout your application.

What is React Context?

React Context is a method in which data can be shared without having to manually pass down props through several nested children components.

From reactjs.org

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

When to use React Context?

Context is best used when sharing data that is considered "global."

Some examples may include:

User authentication
User settings
Language
Themes

React Context helps us solve the problem of prop drilling, a term used to describe when props are passed down through multiple levels of components.

Let's look at an example of this. Here, we have some data living in ComponentA and we need that data passed to ComponentD.

const ComponentA = () => {
    const [data, setData] = useState("")
    return (
        <ComponentB data={ data } />
    )
}

const ComponentB = ({ data }) => {
    return (
        <ComponentC  data={ data } />
    )
}

const ComponentC = ({ data }) => {
    return (
        <ComponentD  data={ data } />
    )
}

const ComponentD = ({ data }) => {
    return (
        <h1>"Hello World!"</h1>
        <h1>{ data }</h1>
    )
}

As you can see, data is being passed at each level, but is not actually used in the middle components. This process can be tedious.

Using React Context

When using React Context, we must do three things: create, provide, and consume.

Create

Create a new file that uses createContext and exports a Provider wrapper:

import React, { createContext, useState } from 'react'

export const Context = createContext()

export const ContextProvider = ({ children }) => {
    const [data, setData] = useState({})

        return (
                <ContextProvider.Provider value={{ data }} >
                        { children }
                </ContextProvider.Provider>
    )
}

Within our provider wrapper, we are able to pass a value prop that will contain our data.

Provide

Now that we have our context created, lets add it to our example.
To do this, we will have to import the provider to one level above the consuming component. In this case, ComponentD only needs the data, so we have to import our provider to ComponentC.

import React from 'react'

import { ContextProvider } from './Context'
import { ComponentD } from './ComponentD'

const ComponentC = () => {
        return (
                <ContextProvider>
                        <ComponentD />
                </ContextProvider>
        )
}

Consume

And finally, we can now consume the data in ComponentD by using the useContext hook.

import React, { useContext } from 'react'

import { Context } from './Context'

const ComponentD = () => {
        const { data } = useContext(Context)
    return (
        <h1>"Hello World!"</h1>
        <h1>{ data }</h1>
    )
}

And that is it!

Conclusion

Context can be a great tool to use for supplying child components with global data, regardless of how deeply they are nested.

Phase 4 project

Sid Saythongphet — Fri, 08 Apr 2022 20:56:41 +0000

Working on my phase 4 project for the Flatiron School has really opened up my eyes to the complexity of creating a fullstack application. From designing the front end with React.js, to creating an API using Ruby on Rails and integrating the use of Amazon Web Service S3, I was pleasantly surprised to see how it all worked together. And I know I have only touched the surface of it all with it all still being new to me.

One of the things I had to spend some time on for this project was the associations. I had worked with the one-to-many and many-to-many relationships between multiple tables before in my previous project, but this time around, I found myself needing to implement a relationship between a table and its self.

For this project I had a User table which, each user was able to follow another user. In accomplishing this relationship, I approached it by creating a join table for the relationship, which I named Followship.

rails g resource Followship follower_id:integer followee_id:integer

In creating this table, I added the attributes follower_id, indicating the user that was doing the following, and followee_id, indicating the user that was being followed. Then before migrating this table to my database, I added indexes for each of the attributes, as well as making a specific follower_id, followee_id combinating index unique to prevent duplicate followship relationships. My migration ended up looking like this:

class CreateFollowships < ActiveRecord::Migration[7.0]
  def change
    create_table :followships do |t|
      t.integer :follower_id
      t.integer :followee_id

      t.timestamps
    end
    add_index :followships, :follower_id
    add_index :followships, :followee_id
    add_index :followships, [:follower_id, :followee_id], unique: true
  end
end

After migrating, I moved to my Followship model.

class Followship < ApplicationRecord
  belongs_to :follower, foreign_key: 'follower_id', class_name: 'User'
  belongs_to :followee, foreign_key: 'followee_id', class_name: 'User'

  validates :follower_id, presence: true
  validates :followee_id, presence: true
end

Here, I indicated the two belongs_to associations since this was a joins table. Unlike joining a table to another table, I had to add a couple of other options. Because :follower and :followee are not models in themselves, I had to include a class_name attribute that indicated what table to look push from, in this case the User table. I need assigned which column in my followship table it cooresponded with.

Once that was set up, I had to move on to my user model to incorporate the has many relationships.

class User < ApplicationRecord

  has_many :followships, dependent: :destroy

  has_many :passive_followships, foreign_key: :followee_id, class_name: 'Followship', dependent: :destroy
  has_many :followers, through: :passive_followships

  has_many :active_followships, foreign_key: :follower_id, class_name: 'Followship', dependent: :destroy
  has_many :followees, through: :active_followships

end

In setting up my associations in the User model, I created the connection between the two tables. I then created two seperate associations, one indicating the current users followers (:passive_followship) and the other indicating the users the current user is following (:active_followship). Similar to the Followship model, I used the class_name to specify the Followship table and also specifying the foreign_key. I was then able to make a direct relationship between the user and their followers with has_many :followers, through: :passive_followships and a direct relationship between the user and who they follow with has_many :followees, through: :active_followships.

Hooray!

This process did take me some time to wrap my head around, but I enjoyed the journey. Working through the project for the last couple of weeks has had its ups and downs, but I feel accomplished with the work I have been able to do thus far!

Third Project Blog

Sid Saythongphet — Fri, 25 Feb 2022 21:58:15 +0000

In this post we will be talking about what got me through my third project at the Flatiron School. Before starting on this phase, my coding knowledge was pretty limited to the frontend. I enjoyed my time with JavaScript and even more so with React. I've found myself truly engaged in the process of learning how to code and my interest continued to grow even more during this phase as we delve into the backend. We were starting to learn a new language, and that language was Ruby.

So what is Ruby?

Ruby is...
A dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.
Source: https://www.ruby-lang.org/en/

For me, I enjoyed Ruby a lot. The code looked cleaner and the syntax seemed easier to read. At first, I thought I would dread not being able to see how my code was working in a browser, but I found that I actually enjoyed just having the tools to just run my code in my terminal. It also gave me a different incite on debugging. To be honest, I am not particularly fond of the debugger tool in JavaScript, and I mostly just added a console.log in whenever I needed to check stuff out. However, with Ruby's "Pry" gem, I quickly made a new best friend.

Pry is a runtime developer console and IRB alternative with powerful introspection capabilities. Pry aims to be more than an IRB replacement. It is an attempt to bring REPL driven programming to the Ruby language.
Source: https://github.com/pry/pry

I found myself using “binding.pry” a lot in my project. It helped me in creating my models, figuring out how to generate my seed data, and establishing my routes.

One example was when I was trying to find a join table instance based on the ids of its two belongs to tables. In doing so I first created a get route to play around with the code.

Get ‘/users_clubs/user_:user_id/club_:club_id’ do
binding.pry 
end

I then booted up my Postman and made a request to the address. This then opened up a repl for me to check what my params where. I had my params and I went to figuring out the proper syntax to find my UserClub instance where both the user_id and club_id matched my params. After a few tries, I found ...

[2] pry(main)> UserClub.where(['user_id=? and club_id=?', 1, 1])
D, [2022-02-27T15:31:55.728583 #1719] DEBUG -- :   UserClub Load (3.8ms)  SELECT "user_clubs".* FROM "user_clubs" WHERE (user_id=1 and club_id=1)
=> [#<UserClub:0x000055a72e43ca58 id: 11, user_id: 1, club_id: 1, created_at: 2022-02-25 17:45:26.001501 UTC, updated_at: 2022-02-25 17:45:26.001501 UTC>]
[3] pry(main)>

I found what I was looking for, however it still wasn't coming out just right for my request. I continued to figure out what I was missing and it turned out to be that it was returning an array, which meant I needed to pull just one index of the array. so I adjusted my code UserClub.where(['user_id=? and club_id=?', params[:user_id], params[:club_id]])[0] and successfully got my delete route to work.

delete '/users_clubs/user_:user_id/club_:club_id' do
    @user_club = UserClub.where(['user_id=? and club_id=?', params[:user_id], params[:club_id]])[0]
    @user_club.destroy
    @user_club.to_json(include: [:user, :club])
end

This continued for a lot of my progress during this project and made the process of finding out how everything could connect fun.

The Journey to My Second Project

Sid Saythongphet — Wed, 02 Feb 2022 20:12:10 +0000

Another month, another project! This time, we strayed away from regular JavaScript and dove into React! And my REACTion to that was pure bliss! From the first introduction to components, I was hooked.

With React, we are creating components in which we can nest other components in like Russian dolls. We then can pass "props" from a parent to a child.

The type-A persona in me was so happy to be able to have a way to organize my code into sections and then to be able to reuse it multiple times. And lets not forget how much cleaner the code looks. Take the following example of creating a button the normal way:

const createButton = (name, id) => {
    const btn = document.createElement('button')
    btn.id = id
    btn.innerText = name
    return btn
}

Now, in React:

function Button({ id, text }) {
    return(
        <button id={ id }>{ text }</button>
    )
}

Simpler to read and understand the end result. Bonus, less to write out too. And don't get me started on the redundancy of creating an element and assigning attributes to lets say a form! I really loved the process of using React!

Now this time around, with the idea of having a hierarchy for which my components resided in, I felt I had a little more control in organizing my thoughts and ideas. With this new control, I decided to actually map out my brainstorming ideas. Which led me to...

An introduction to the world of mind mapping. Of course I have always brainstormed, but most of that never actually made it onto page. It was all in my head which I would say "I'll remember for later"... Yeah, I never remembered. So, as I initiated the thought process into my project this time around, I decided I should first sit down and download a mind mapping software. That turned out to be XMind. Once in, I started just writing away my ideas. And boy did this process help. It aided tremendously to visualize my idea and see how everything worked, separately and together. I loved seeing how my app hierarchy branched out and to see how each of my components worked together. It made figuring out where my state lived, where my requests to my API were being handled, and where my props needed to be passed down to. To also gave me a bit more confidence into exploring external APIs, which being the superhero fanatic that I am, I chose to use the Marvel API.

With the help of mind mapping, figuring out how to incorporate an external API was easier. I was able to pinpoint where I needed to pull requests and how to integrate it into my own RESTful API.

From this map, I was able to start up a mock editor and just play around and see what worked and what didn't. I troubleshooted how to work with an external API, how my components worked with each other, and how I wanted the general style to look.

Once I felt ready with my ideas and had a clearer understanding of how the whole thing was put together, I opened up my command line and...

npx create-react-app

First Project

Sid Saythongphet — Wed, 12 Jan 2022 18:17:25 +0000

A month ago I started on an endeavor, to become a Software Engineer. I had no experience in coding before making this decision, but the idea had always intrigued me. Little did I know, this was going to be quite the knowledge overload! However, after the last four weeks, and still knowing I have a long way to go, I feel like I can get a hang of this!

I began this process by joining the Flatiron Flex Software Engineer Bootcamp in mid December, where we have been mainly focused on JavaScript for this first phase. Looking back, I had no idea what I was getting into. Functions, arrays, objects, and methods had no context to me. The complexity of running an application began to unfold.

For my first project, I created a single-page website for journaling. Now with this journaling application, I wanted to take into consideration the Two Minute Rule, which I became familiarized with after reading "Atomic Habits" by James Clear. With this rule stating a new habit shouldn't take more than 2 minutes to do, this website takes that into account and binds you to journal for only a few short minutes.

What originally started out as an interactive page that would include a timer, text input, and a collection of past entries, became a far more complex puzzle that I thoroughly enjoyed solving.

It amazed me how many different ways the code could be constructed to build a functioning webpage. As I continued to work on it, I found different ways to write a code to eliminate the redundancy. I particularly became fond of the use of functions to reduce repetition. In the beginning, for example, I was doing things such as:

const secOne = document.createElement('section')
secOne.id = 'section-one'
secOne.className = 'col s12'
const secTwo = document.createElement('section')
secTwo.id = 'section-two'
secTwo.className = 'col s12'
const secThree = document.createElement('section')
secThree.id = 'section-three'
secThree.className = 'col s12'

This process became time consuming, but was easily fixed by making a function that took in some arguments!

const createSection = (id, className) => {
    const section = document.createElement('section')
    section.id = id
    section.className = className
    return section
}

const secOne = createSection('section-one', 'col s12')
const secTwo = createSection('section-two', 'col s12')
const secThree = createSection('section-three', 'col s12')

This helped tremendously to clean my code and I know there may be even better ways to refactor the code for simplicity, but it was a really good feeling to know all the learning from the last month was starting to click.

Once I knew I was getting more comfortable working with functions and arguments, the project process continued faster than before. I began to try different ways of writing my existing code. It became even more interesting to refactor the code than it was to write it the first time!

Now that I am at a point that I believe my first project is complete, I am eager to work on my next! The future is looking bright for this new adventure I am on and hope to soak up as much knowledge I can!