DEV Community: Aoppman

useState - don't get Hooked 🪝

Aoppman — Sat, 07 Oct 2023 07:09:47 +0000

Hooks are tools in the React library that allows developers to "hook into" React "state" when writing function components.

React Hooks consist of..

useState Hook
useEffect Hook
useRef Hook
useCallback Hook
useMemo Hook
useContext Hook
useReducer Hook

useState is one of the two main React hooks I learned on my coding journey so far. Although useState is only one of the many React hooks, it is an important one, as it allows you add a state variable to a component.

The first step that is required to utilize React Hooks such as useState, is to import the Hook of choice from the React library.

= = = = = = = = = = = = = = = = = = = = = = = = = = = =

We write this line of code in an "out of the ordinary" format using an array that is then destructured, providing two variables in one declaration.
(useState declaration)

The syntax for declaring a state variable with useState looks quite odd and can be confusing, but with practice, it becomes familiar.

The first variable in the array is always the 'state' variable.
The second is a variable that will be used as the 'setter function', for updating the state variable.

It is good practice to name the "setter function" variable after the state variable, using the term "set".
Initializing with the const declarative, we define the array of two variables to equal 'useState()'. Inside the parenthesis we pass in the default value for the state variable.

= = = = = = = = = = = = = = = = = = = = = = = = = = = =

const [timer, setTimer] = useState("00:00")

Here we set the initial value *(of any data type) for the state variable (first variable in the array) "timer" to hold the constant value of a string - "00:00"
Also, we have the setter function (second variable in the array) that is used to update the value of the state variable, hence the clear and concise name - "setTimer".

Constant "const" variable declarations assign a value that cannot be re-assigned after declaring it. This is where we see the power of the setter function, as it is the only way to update/change the value of the state variable.

I bet that funky array declaration syntax is making a little more sense now, right? 🤔

.. One crucial piece of information I cannot forget to mention, is where to declare useState! The useState declaration must be at the top most level of a function component, prior to the "return".

(continuing the code from the example snip above) - let's see the setter function in action!

Here we have a function called "handleClick" - with just a little logical thinking and coding knowledge, we can assume that this function refers to the click of a 'button' UI element.

Upon clicking said button, the "handleClick" function, will return the 'setter function' for updating the value of the state variable. Provided with a new designated 'state' value passed into the setter function (encapsulated in the parenthesis)...

Now with the click of the button element, useState does its thing, and re-renders the component onto the DOM with the new/updated state value for the variable "name".

= = = = = = = = = = = = = = = = = = = = = = = = = = = =

State can pertain to a single component, or can be declared and held in one parent component, that returns multiple child components - in which state, and useState can be passed down as props. In doing so we can access, utilize and update state via child components. This gives us the option to re-render these different components/UI elements based off the original state and the ability to change the value/functionality within a child component individually.

Variety with Variables 😏

Aoppman — Wed, 02 Aug 2023 03:13:39 +0000

Throughout my journey in front-end software development, and learning the computer language that is known as JavaScript, it has been a bumpy and rewarding road. One of my favorite things about coding in JavaScript, and also one of the most basic things that coders will learn in the very beginning, is variables!

A JavaScript "variable" is basically a container to store data to later be called on for utilization.

(definition according to https://javascript.info)

Variables, in my opinion, are crucial and extremely versatile, as they can store a wide range of types of JS data.

When it comes to variables there are a few ways to declare variables. The declaration words used for variables are :
let & const - with the long forgotten var but we won't focus on that one for now.

the const (otherwise known as "constant") variable declaration, is a concrete declaration, in which the value can not be changed after assignment (as well as the value of the variable must be assigned at time of declaring it).
the let variable declaration on the other hand allows the variable's value to be changed after it is declared - unlike const - (as well as the variable can be declared first, with or without assigning a value - the value can then be assigned later in the code). Variables can store data types such as...

Numbers (ex. 1, 23, 200, 1001, 3.1459)
const age = 15
let number = 11
Booleans (ex. true, false)
const truthyValue = true
let falseyValue = false
Strings (ex. "Hello", "Welcome", "Today's date is:")
const greeting = "Hello"
let thankYouMessage = "Thank you for your service"

Data collections can also be saved to a JS "variable" for easier access in instances where they may be called repeatedly, this saves coders time and typing.
(these include)..

Arrays (ex. [1, 2, 4, 8, 16] ; ["red", "blue", "green", "yellow"])
const lotteryNumbers = [13, 24, 43, 55, 72]
let dogs = ["shih tzu", "pug", "hound", "poodle"]
Objects (ex. {Year: "2019", Make: "Ford", Model: "Fusion"})
let person1 = {
firstName: "Chris",
lasName: "Smith",
age: 27,
sex: "male"
}
Functions (i.e. anonymous/arrow functions) * instead of a function declaration using the "function" keyword, a "variable" can be utilized to store the function - in which you would invoke the function using the variable name followed by "()" similar to a normal function call *
let add = (num1, num2) {
num1 + num2 = sum;
return sum;
}
const newMessage = (string) => `Welcome to ${string}`

Another aspect where variables come into play across the coding environment is when working with HTML, in something called manipulating the DOM. Within this process you are able to grasp HTML 'elements' utilizing Javascript methods that allow interaction with these elements. We can then assign them to a JS variable in which it can be stored for later and accessed or referenced throughout the connecting JS code.

for example:

<p>Hello, Welcome to my website!</p>
say we have a 'paragraph' HTML element that we want to access and manipulate using JS code.
We would grab it with a JS method called the 'querySelector' method. - And we could capture the element and assign it to a variable all in one action!
const p = document.querySelector('p')
this would evaluate to
p = <p>Hello, Welcome to my website!</p>

Lastly, I like to take into consideration when it comes to variables is function 'parameters'.. parameters are what I would consider a "ghost-like" variable that is used as a placeholder for a value that will be passed though a JS function and factor into the conditions of the function. Somewhat of an "anonymous" variable if you will - some may not agree with my wording but this is just me putting my owns thoughts, in my own words, on paper.
(Don't shoot the messenger 😅)

let's use the previous example as it fits the bill :

function add = (num1, num2) {
num1 + num2 = sum;
return sum;
}
here "num1" & "num2" are parameters - ideally place holders for values to be passed into the function and 'added'
... but to the naked eye they resemble variables, no? 🤔
so in the case that I call the function add(3, 4)
I am temporarily assigning "num1" the value of '3' & "num2" the value of '4'. So the function will run and do the job of '3 + 4' to = '7' and set that as the value of "sum".
So.. within the function, logically (in my head at least) we are saying :
num1 = 3;
num2 = 4;
sum = 7;

*Remember this is just within the functions scope, these place holder/temporary "variables" can change value through the function, and can only be accessed and utilized within the scope of the function itself.

With all that aside, as you can see variables have a wide range of functionality and are extremely versatile and flexible. You can make your code shorter and sweeter by using variables to the best of your ability, especially when re-using the same value or data collection repeatedly throughout a website or program. They are a staple in any code and a JavaScript standard. Love 'em or hate 'em, they're here to stay, so it's best to become comfortable creating and utilizing them to the fullest!

JSON

Aoppman — Thu, 08 Jun 2023 07:12:17 +0000

JavaScript Object Notation or "JSON" for short - is a data format that utilizes a syntax that closely resembles that of JavaScript objects. The data is in a "human-readable" text format and usually consists of strings written in the form of JavaScript objects, containing "keys" and "values". Then, we can further group these objects into arrays, another JS data type that is familiar to new and experienced developers. Let's not forget to mention, like in the basic JavaScript object, JSON also allows the use of JS data types such as numbers, booleans and object methods.

(Basic JS object - only the object values *consisting of the string data type require double quotations/quotation)

(Basic JSON string - resembling a JS object but all text must be wrapped in double quotations)

Although appearing as JavaScript, many different programs are able to parse as well as generate JSON. It is used to to send data from a server to the client, as well as send client data to a server.

JSON data can be saved in its own file, consisting of a text document/file using the ".json" tag name. Along with an ".html" file, and a ".js" file - we can manipulate, request and receive data displayed on a webpage.

JSON is another stepping stone in the current learnings I am undergoing in my software development journey. This is another part to the bigger picture I touched base on in my previous blog post about - Manipulating the DOM.

In my next few blog posts I will go over more on this topic and break down how using JSON, we can send and receive data using postman, "fetch" and the different types of HTTP requests they entail, working with the JSON server.

HTML Function-ality

Aoppman — Sun, 14 May 2023 06:19:51 +0000

Continuing the discussion of JavaScript functions, I have covered the general outline of a function - as well as Anonymous functions. I still have to touch base on Callback functions, and now is the perfect time as my current learning topic is manipulating the DOM (The Document Object Model) via HTML using JavaScript code. Over the last week while diving into this subject, I have learned a little more about the inter-connections and functionality shared between HTML and JavaScript languages.

When we are "manipulating the DOM", I am referencing temporarily editing or modifying HTML elements visually on a web page in real time. We do this using the Web Dev Tools to access a console in the browser, and instructing these changes through JavaScript commands.

(pictured below is a webpage in Google Chrome, utilizing the Dev Tools console to implement changes with JavaScript code commands)

When doing this it is crucial to utilize functions, anonymous functions, and callback functions, all of that good stuff. When manipulating the document we usually need to incorporate a callback function.

A Callback Function is a function passed as an argument into another function, and then is invoked inside the outer function to complete an action.

(Taking a look back at the earlier example, here you can see we have defined a function, and then used that function as a callback in another function action.)

As a busy student with a lot of work to do, I don't have enough time to get too in depth on this topic but figured I'd continue to share my new found knowledge.

Until next time... 👋

More "FUN-ctions"

Aoppman — Sun, 30 Apr 2023 05:16:54 +0000

As promised, we are back with some more fun..

Um, I mean functions😅
As, like myself, if you are on the uphill journey that is learning JavaScript - you are aware that trying to master functions is far from fun.

In my last blog post I started discussing the general JavaScript function basics, such as (inputs, actions, and outputs).
For this second iteration, I wanted to touch on other function variations.

First, lets touch on the Anonymous Function, this is relative to the basic function, just in a different format. This type of function is not required to use the declaration of 'function' keyword for creation. But instead can be declared with a variable and assigned a value of a function.

This just makes writing a function a little easier, maybe even cleaner. An added bonus is how the anonymous function factors into writing/utilizing callback functions, as well as arrow functions.

We will cover those variations and in more depth in the next few blog posts, continuing the function saga!

Until then, continuing coding comrades👋

Function(al) Thinking 🧠

Aoppman — Thu, 20 Apr 2023 23:59:24 +0000

Since the beginning of my coding journey, JavaScript functions have been an uphill battle.

Though, as the weeks have gone on, little by little I have been able to get bits and pieces of basic function structure to stick inside my scrambled brain.
- This has been no little feat

It did not come in full, nor all at once. As I had to get flustered even further, to the point of total confusion before grasping the basic concept of functions.

Inevitably, without full understanding of the basic function expression, the course work dove straight in to more variations of JS functions. Such as...

Callback functions
Anonymous functions
Arrow functions ... etc.

In this blog post I'll start with further describing how we write a basic Javascript function.

Lets begin with basic JS function!

Functions are blocks of code that take in inputs, perform specific actions, and produce outputs.

Here we see the function keyword and then a variable name "sum" which holds the value of the function. Next we have inputs such as "num1" and "num2" which are variables holding values of their own. By placing these values in the parentheses "()", we are passing them into the function as parameters to hold an argument. Then within the function body we have the action, which is to add the two values together using the (+) arithmetic operator. In return we will get the result of adding the two values, which is the output.

In my next few blog posts I will dive further into explain the other type of functions different ways they can be written.

Kind comments😉

Aoppman — Tue, 18 Apr 2023 07:05:20 +0000

While I am still new to coding, as a Software Development student at Flatiron School, I am learning tips and tricks that best suit my learning experience.

Although, I was hesitant at first, I am now a firm believer in commenting inside my code. I have realized it is crucial for my note taking style of self learning. Each person learns differently and incorporates their own strategies for success in soaking up the necessary knowledge.

At the start of my learning, instructors introduced comments as a means for communication between coders, to leave directions/instructions for the code and what it does. This relays easy explanation to new eyes on a project, and was questionable and confusing to me at first.

As I was still unaware visually, of what I was interpreting, comments confused me further.
While my coding practice is evolving and I'm continuously beating this new found knowledge into my head, over and over until it finally soaks up, commenting has become a staple.

Even though VS Code has become the main entity for my coding projects, it has also become my personal notebook for my course notes. The ability to comment notes in my own terminology as well as write out code examples in all its colorful glory is dynamic. This helps immensely, when having my personal learning material match the visual aesthetic that I encounter anytime I write code for coursework. It tickles my brain so good, as I'm a very "visual-to-hands on learner. (i.e. Monkey see and do 🐵)

I am able to further breakdown difficult equations and explain them to myself, in my own words and understanding in a line of comment - in real time as I am problem solving.

I highly recommend getting comfortable with incorporating comments into your code along the way!

Coding Subconsciously 🤯

Aoppman — Wed, 12 Apr 2023 02:49:32 +0000

Flashback to 2008, when Myspace ruled the internet and we publicly ranked our friends on merit due to how we were feeling that day.
- I know TOXIC right? 😅

The only thing better than the feeling of re-arranging my friends list to make a statement, was editing my Myspace layout. I got such a creative thrill from the method of totally changing the visual aesthetic of my page. With the ability to modify just about every aspect of the layout and design, I felt free enough to express my individual creativity across the board. Receiving compliments on my page, as well as requests for tips and assistance in customization among others users, instilled confidence.

All the while I was doing something bigger than I could even imagine... without even realizing it I was coding!

Unknowingly I was writing and editing code in HTML (HyperText Markup Language) utilizing CSS (Cascading Style Sheets). This was invigorating as it was like writing a foreign language that I could not speak or barely understand, yet mindfully and visually I could yield results.

Little did I know, I was dealing with exactly that, a language - a computer language!

Since starting this Software Development cohort, I have revisited that feeling of self exploration. Although the road has just begun, we have already dabbled in HTML and CSS, on top of learning the beast that is the "JavaScript" language. One of the first assignments we have accomplished was creating a custom website, which is what re-activated the nostalgia. The deeper I dive into this endeavor, the more I realize my Myspace days were just the tip of the iceberg and coding goes so far beyond that surface.

This is just a little back story in what got me interested in coding to begin with.

Present day, as a logistic specialist for Amazon who has been doing this work for for a few years now, I am surrounded by code in everything I do and I have only become more invested in getting my hands dirty. While working with multiple Amazon software outlets, shared docs and spreadsheets that are all jam packed with code below the face-level. I am determined to gain the ability to peel back the outer most layer and really learn what lies beneath.

Won't you come along for the ride? 🏎️💨

DEV Community: Aoppman

useState - don't get Hooked 🪝

Variety with *Variables* 😏

JSON

HTML Function-ality

More "FUN-ctions"

Function(al) Thinking 🧠

Kind comments😉

Coding Subconsciously 🤯

Variety with Variables 😏