Forem: Jackinthesquare

React Router

Jackinthesquare — Mon, 25 Apr 2022 03:05:22 +0000

Navigation is important in single page applications. One of the important libraries in React is the router library that allows us to switch between components in our application.

First thing first, I need to install the router dom:

 npm install react-router-dom@5

After, I need to import BrowserRouter to index.js:
import { BrowserRouter } from 'react-router-dom';

If a module error about react router dom not found, I will need to install:
npm install react-router-dom --save

Then I need to wrap up the root component with a BrowserRouter tag:

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Next, in the root component, I will import:
import { Switch, Route } from "react-router-dom"

Then I can setup the root component after the return():

function App() {

  return (
    <div className="App">
      <NavBar onChangePage={setPage} />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/project">
          <Project />
        </Route>
        <Route path="*">
          <h1>404 not found</h1>
        </Route>
      </Switch>
    </div>
  );
}

The "exact" in exact path makes it so that the path needs to be exactly what it is in order for it to switch pages. Notice how it is only in the home "/" part. <Routh path="*"> is a wildcard path.

Next, I need to setup the Nav component with an import:
import { Link } from "react-router-dom"
Under the hood, Link performs such as with the "a" anchor tag and onClick event listener to trigger a state change on the path route.

Then there is also:
import { NavLink } from "react-router-dom"
and with NavLink I can also set up css to indicate a link change if it is active:

nav a.active {
  background-color: aquamarine;
  color: red;
}

The return setup in the Nav component follows:

 return (
        <nav> 
            <NavLink exact to="/">Home </NavLink>
            <NavLink to="/about">About </NavLink>
            <NavLink to="/project">Project </NavLink>
        </nav>
    )

and voila! a working Navigation bar.

Oh, the things I would do to an Array

Jackinthesquare — Wed, 13 Apr 2022 01:43:03 +0000

In JavaScript, an array is an object. More often than not, we will be provided with an array of elements or an object that consists of an array of elements that we need to extract and/or modify and this is where some of these methods make our lives easier:

array.mapping() / array.forEach()
array.filter()
array.reduce()

Arr Captain
Why do we use arrays? Arrays were most likely created for us to have an easy way to store a collection of similar data, (It's possible to have mixed datatypes but not recommended - that's why we have objects!) so that we don't need to declare a ton of variables.

const array1 = [1,3,3,7]; //same datatype of integers
const array2 = [1,"3",3,7]; //legal but not recommended

vs.

const variable1 = 1;
const variable2 = 3;
const variable3 = 3;
const variable4 = 7;

Array Iterating
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

More often, you may need to extract information from an array and usually all of it and that's where array.map() and array.forEach() comes in. These functions iterate over every element and returns a callback function. The only difference is map returns a new Array while forEach only iterates over the elements. So what that means is that if you do not need to modify an array, use forEach instead of map.

Here is an example. Recently I had to fetch data from an API database but the array of moves contained a dash "-" and I didn't want that since it obstructed the way my project functions.

const moves = ["karate-chop","double-slap", "comet-punch", "mega-punch"]

I used the array.map() method to iterate over every move to replace the dash with a space and assigned the result to return to a new array, newMoves.

const newMoves = moves.map(move => move.replace(/[^a-zA-Z ]/g, " "))
console.log(moves)
console.log(newMoves)
// (4) ['karate-chop', 'double-slap', 'comet-punch', 'mega-punch'] // (4) ['karate chop', 'double slap', 'comet punch', 'mega punch']

whereas

const newMoves = moves.forEach(move => move.replace(/[^a-zA-Z ]/g, " "))
console.log(moves)
console.log(newMoves)
// (4) ['karate-chop', 'double-slap', 'comet-punch', 'mega-punch'] // undefined

There are ways around that to use forEach but it would be more work.

Array Filtering
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Filtering an array is equally as important since sometimes you may not want to use everything from the array. The array.filter() method, creates a new array returning the condition you set in the callback function. The example in the documentary link is pretty self explanatory but it is also possible to use the ! - not operator to return an array to exclude element(s):

const ids = [1, 2, 3, 4, 5]
const newIds = ids.filter(id => id !== 2)
console.log(ids)
console.log(newIds)
//(5) [1, 2, 3, 4, 5]
//(4) [1, 3, 4, 5]

Array Reducing
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
Less often, we may need to break down an array and return it with one value. Remember, arrays are objects so we may have a list of numbers in an object and we want to return a total number. The parameters that the array.reduce() function takes are a callback function and an optional initialization value.

const numbers = [101, 4, 6, 20, 9];

const reduceFunction = (total, num) => {
  return total - num;
}

console.log(numbers.reduce(reduceFunction))
// 62

console.log(numbers.reduce(reduceFunction, 100))
// -40

console.log(numbers.reduce(reduceFunction, 200))
// 60

I am sure there are many other array manipulation methods out there but these will be the most common, general ones that will be used and it's important to learn how to use them to improve QOL!

My Journey as a student

Jackinthesquare — Tue, 12 Apr 2022 17:42:35 +0000

April 12 2022

Background
Before committing to the path on becoming a software engineer, I was studying electrical engineering. Then Covid-19 hit and during that downtime, I was introduced to the vast digital world where "bots" run amok and certain scams received world recognition cough Crypto-currencies and especially Nfts cough. During these last 2 years, I've learned more about how a certain aspect of the world, functions and computer science has definitely impressed me with how it has advanced since the dotcom age.

Prelude to coding
Anyone can code. Success in coding requires a strong mental mindset to follow logic. It is important to understand that coding is a tool for humans to communicate with machines but the tool is also created by humans...hmm makes you think. The syntaxes for each language is comparable to the jargons that are used by lawyers, doctors, etc. We just need to accept it! (because the humans that created the coding languages made it that way)

cout << "Hello";
console.log("Hello")
<h1>Hello</h1>
print("Hello")

Above, I have listed 4 different coding languages to outputting the string-text "Hello World!" Learning that is comparable to learning:

Hello
你好 (Ni hao)
Hola
Bonjour

Think about it - It's called a coding "language" for a reason! If you are able to understand what I have wrote so far, you can pick up a coding language too!

Making enemies
A coder can always use a second pair of eyes no matter how good he/she is and that is why we need to write in a clean way and use easy-to-understand variables. If others won't hate you, you might hate yourself for wasting time understanding the logic when trying to reference the code months/years later.

This is My Blog
This is my personal blog that will reflect my journey starting as a software developer. I will update it as I come across methods, techniques and or syntaxes that will make my code better. The reason I said it's personal is because it is something I will want to look back one day and be able to see my capacity at the time and reflect on my growth.

*disclaimer: At this time of writing, crypto and nfts have no logistic functions other than an exchange market.