DEV Community: brianko1850

Understanding react Components as an electrician

brianko1850 — Tue, 11 Oct 2022 18:26:43 +0000

Coming from electrical background, I have noticed that many elements of programming resembles electrical systems (which makes sense since at the fundamental level, all programming is a series of electrical signals). Functions that perform tasks on inputs to produce outputs, importance of sequence of operations, and tracing errors in order to troubleshoot were not totally foreign concepts to me as I was familiar with them in electrical field.
Of course, as with all allegory, comparisons starts to break down if you dig too deep but I found thinking of coding as laying down a wiring schematics pretty helpful.
Here are few examples about components that might help you if you're also coming from electrical background.

React Components

Components in react acts as JavaScript functions but in isolation. It takes an input, performs a task or tasks and gives an output. It can be very simple as this example

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

from

w3schools.com

or more complex. This is an example of an component from my recent project.

function Pending({ pendings }) {

    const displayPending =  pendings.map(data => {
      return (
        <>
          <ul>
            <h2>{data.name}</h2>
            <h3>{data.city}</h3>
            <li>{data.street}</li>
            <li>{data.directions}</li>
            <br/>
          </ul>
        </>
      )
    })

    return (
    <>    
      { displayPending }
    </>    
    )
}

In this example, Pending component is taking the input of { pendings } and picking out and organizing the values (name, city, street etc) that I want to display (TASK) and displaying them on the page in easy to read fashion (OUTPUT), which is definitely more extensive than the first example.

I think of the first example Car as equivalent to something like a light bulb in electrical system: simple device that performs binary task of on or off. There is no specific input it's looking for. If there is power, light bulb will light up, as will the Car Component will render "Hi, I am a Car!" if it is invoked.

once the switch closes, light bulb gets power input and produces output.

Meanwhile, Pending component example is more like a fan motor that can be set to specific speed: still pretty simple device but it expects a specific input of { pendings } prop object to produce output depending on the input. Just like how variable resistor gives motor specific input and motor outputs at the RPM corresponding to the input.

variable resistor determines input to the motor which will run at corresponding speed.

Thinking of Components as electrical devices that perform specific tasks helped me tremendously. Think about it, in order for an electrical system to work, you have to have correct electrical devices in the system (what's it rated? what's the function?) and in specific way in the schematic so that the sequence of operation is correct. It's the same thing in react. Components have to work correctly on their own, but also work in correct order in order for it to work.

Why isolation?

One of the differences between react Component and Javascript function is that Components are isolated. So why isolate Components? isn't it just extra work?

It is, but there are good reasons for doing it.
One is organization. Organization is more than about just looking pretty (although that is nice).
While I was an EM on the Navy ships, I came across multiple control panels that looked like this

Yes, most of them still worked, but once they didn't troubleshooting was a painful process because of the total chaos that you can see. Digging through all those cables made repairs twice as long as if they were organized.

With Isolated components, we are avoiding large part of this problem all together. In the real world, we would run out of space if we were to make a panel for each device you see in there, but we don't have to worry about that in digital space as much and isolate them as much as we'd like. Organized Isolated components makes working on them much easier down the line, especially when there are multiple people working on the project.

Second reason is maintainability.

Think of a box fan, all the devices (motor, resistor etc) is all contained in the box, and it moves air. So in this analogy, why can't we just put all components together? they should still work the same right?

Yes, but no. Because most react App is more like ventilation system for a building or a ship, it is a better idea to separate components like how ships will separate motor controller from ventilation motors. This practice makes things easier to maintain, troubleshoot and also aids in damage control. Let's say the motor caused a fired. In the box fan example, you'd have to get a whole new box fan, but in the case of shipboard ventilation system, you'd just need to replace the motor since the controller wasn't on fire.

think of box fan as a small lab in lessons

Engine room ventilation system. controllers and fan motors are separated for maintainability purposes.

Lessons from phase 2 project

brianko1850 — Fri, 09 Sep 2022 19:35:12 +0000

As a beginner, consistent exposure is very important

I started this project back in March intending to create weather app for ski resorts. I did make pretty good progress but a car accident in March caused me to take a pretty long hiatus. When I went back to work on this project, I realized things move fast in the tech world and that I might have been little too ambitious.

React has been updated a few times and I couldn't even initiate npm start . After spending days on stack overflow, I was able to find a workaround by utilizing <React.StrictMode> , only for it to crash again a few days later (possibly due to update in NavLinks) while I was on work trip. I had enough at that point and decided to just start the project over.

These series of events did teach me a pretty valuable lesson, though. In that as a beginner, I need to constantly be coding, even if it's staring at a screen for few hours on a given day because my brain just refuses to work that day. If I was able to just keep tabs on the project, I could've avoided the update and competency issues and also avoided spending another month just brushing up on materials I've already completed to re-learn REACT.

Don't use external API on these projects

Since I used internal database on last project, I decided to use an external API for the phase 2 project. I found a manageable looking API https://www.refugerestrooms.org/api/docs/#!/restrooms and decided to use that. Presenting data was not that much of a problem.

I looked through the API and found that search function is operated by query parameter. To easily organize the query, I decided to create a query context component

import React, { createContext, useState} from "react";

const QueryContext = createContext();


function QueryProvider({ children }) {
    const [ query, setQuery ] = useState("seattle")


  return <QueryContext.Provider value={{ query, setQuery }}>{children}</QueryContext.Provider>;
}

export { QueryContext, QueryProvider };

...and pass in city names as query down in App component.

 const { query, setQuery } = useContext(QueryContext)

  useEffect(()=>{
      fetch(`https://www.refugerestrooms.org/api/v1/restrooms/search?page=1&per_page=10&offset=0&ada=true&unisex=true&query=${query}`)
      .then(res=>res.json())
      .then(data=>setBathrooms(data))
  },[ query ])

Default was not that important but since I'm based out of Seattle, I just set it to Seattle. With pretty basic display set up, I was able to confirm things were working.

Problem was that I had to have 2 CRUD components per the requirement. This was when I found out that you can't POST to external API without proper authorization.

Workaround

To work around this problem, I created an additional internal data base, db.json, where the posted data will be stored. My plan was to create 2 other components, Post and Pending, former of which will contain POST request and later will render posted data on the page.

I passed down this code to Pending at first to render

 const [ pendings, setPendings ] = useState([])

 useEffect(()=>{
      fetch(`http://localhost:8000/bathrooms`)
      .then(res=>res.json())
      .then(data=>setPendings(data))
  },[ Pendings ])

and used

        fetch("http://localhost:8000/bathrooms", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(newBathroom)
            })
            .then(r => r.json())
             .then(data => setPendings(data))

But Quickly I learned that this was causing an error because (I think) the POST request was throwing the codes in loop, causing the pending page to re-render over and over again.

After a few days of trying different ways of restructuring the same code, I finally came up with a workaround of creating another state newPendings that will separate two codes. In the end they looked like this.

 const [ newPendings, setNewPendings ] = useState([])

useEffect(()=>{
      fetch(`http://localhost:8000/bathrooms`)
      .then(res=>res.json())
      .then(data=>setPendings(data))
  },[ newPendings ])

   fetch("http://localhost:8000/bathrooms", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(newBathroom)
            })
            .then(r => r.json())
             .then(data => setNewPendings(data))

Solved?

After utilizing another state variable, code was working as intended. However I'm still not sure what actually caused an issue and would like to find that out. Also I'm almost sure that what I did was just a workaround and not the "right" solution. I'd like to find that out as well.

phase 1 project

brianko1850 — Thu, 24 Feb 2022 15:36:02 +0000

-Started the project by looking through the free API lists to see if anything would jump out at me. I wanted to pick something straightforward to make my project simple. I found https://www.thecocktaildb.com which gave me an idea of single page application that lists cocktail cards.

-Upon looking into API, I found that most of it was behind a paywall. I did not want to give up the idea though so I did some search on git hub and found https://gist.github.com/renandanton/8d99dab65bf9fb5b4465ded7ab73a7df which is json DB file that also lists cocktails. I copied part of it and made json file cocktails.json

-To fetch JSON data, I made function getDrinks.

This function sends fetch request to JSON server, then when promise is fulfilled, takes the response and parses it as JSON file that JS can use.
Once that is done, getDrinks function will take that array and calls back renderDrink function to iterate each item through renderDrink function to render cards.
If the promise errors out, catch will console log error on the browser console.

-renderDrink function is a callback function which will take the object and create and append card into main body.

It creates document element card, and it will input values from the object to link image, write name and short preparation.
then It will append the card as child under drink-collection DIV

-to have submit form hidden by default, and have it show up when an user clicks a button, I used
First, I made a variable called addDrink and declared it false, then I added an click event listener to a button that I ID'd as new-drink-btn.
Each time the button is pressed, it will change the addDrink variable state from false to true and vice versa.
I added conditional statement to display the form in block form if addDrink is true, and to not display if it is false.
Since the default state is false, it will hide the form before the button is pressed.

For my functionality of the SPA, I chose to go with creating and appending a new card when an user submits the previously hidden form. I made handleSubmit function, and declared a variable object drinkObj which contains the inputs of the user. then the function calls renderDrinks function to render and append new card from the inputs.