DEV Community: guzdaniel

Client-side Routing with React Router v5

guzdaniel — Thu, 15 Dec 2022 11:10:05 +0000

Routing

Web applications today use different types of routing to respond to changing URLs and navigation within the application and help with the complexity of implementing web apps. In a typical or traditional web application, when the user clicks a link or enters a URL in the browser, the browser sends a request for a document to the backend server that maps to that current URL, waits for the server to generate the HTML, waits for the request to come back and then displays the new and ready HTML document. The browser also evaluates the necessary CSS and Javascript code. Then, for every new page navigation or link clicked, the process gets repeated and more requests to the server for new HTML documents are made, which requires constant full-page reloads. In other words, we consult the server for every new page we visit.

Client-side Routing

Today, we develop more efficient single-page applications, where the idea is to get everything we need from the server on the initial request. They are implemented with a single HTML document that's usually paired with a JavaScript bundle, so the data necessary to navigate the app would be available locally already and all the pages of your application might render on the first page load. Route transitions like clicking links and navigation within the application feel much quicker since we wouldn't be making additional server requests for new HTML documents or doing full-page reloads. This is the idea behind client-side routing.

As the name suggests, the routing is done on the client side, rather than relying on the server. It uses client-side code to try to emulate traditional routing by swapping a "view" of the application with another "view" depending on the URL it's currently matching on. It will instantly render some new UI and will then render the page dynamically with new content by making data requests to the server using JavaScript APIs like the 'fetch' method.

With client-side routing, JavaScript code is responsible for handling the routing, fetching, and displaying of the content in the browser.

React Router

We use React as a library for building Single-Page Applications. React, however, mainly focuses on building user interfaces so it doesn't really have a built-in mechanism for routing.

In that case, we use a routing library called React Router DOM, which contains the DOM bindings for React Router (the most popular routing library for React) or in other words, the router components to use on web applications.

React Router allows us to use two things:

Conditional rendering of components based on the URL. So when the URL is currently "/albums" then the <Albums /> Component is rendered.
Programmatic navigation with JavaScript. When a link to the Albums page is clicked by the user, the URL changes to "/albums". Then the page content updates to reflect that, but done internally with JavaScript, without making requests to the server.

Conditional Rendering of Components

Some of the components that React Router DOM provides for us to use in our web applications are :

A Router : <BrowserRouter />
Route Matchers: <Route />, <Switch />

Using React Router Components

To implement routes in our application, we first need to install react-router-dom using npm like so:

$ npm install react-router-dom@5

(Here we are using version 5 of React Router instead of 6, for learning purposes)

After installing, we need to import ReactDOM to render our application.

When looking at our index.js code, we are importing ReactDOM at the beginning of our file to be able to use the ReactDOM.render() method, which will help us render our top level component to the browser. In this case, it is our App component.

import React from "react";
import ReactDOM from "react-dom";

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

Then we can head to our App component where we need to enclose the entire application that is being returned using BrowserRouter.

BrowserRouter Component

We use the BrowserRouter component as the base for our routing in our applications. This is where we declare how React Router will be used. It provides React Router context features to our application. For this reason, we wrap our whole application in it where we can later use the Route component within it as many times as we need to to create our routes for our application.

To use BrowserRouter, we also first need to import it at the beginning of our own component.

We can change the name or give BrowserRouter an alias to use in our component. Here we'll simply use the word "Router" to refer to BrowserRouter in our App component.

This looks like so:

import React from "react";
import { BrowserRouter as Router }  from "react-dom";

function App() {

return (
     <Router>
        <div className="App">
          <Albums />
        </div>
     <Router/>
  )
}

Route Component

The Route component can be used inside our Router component to wrap around our own components to create routes between app components and a specific URL in our application.

When the URL matches a specified path in our Route component, it renders its child component or the component that is enclosed inside Route. So this is where conditional rendering happens.

The Route component uses a built-in prop called path to pass in the path name that the URL needs to match with in order to render its child.

To use Route, we also need to import it at the beginning of our component along with BrowserRouter.

Here is an example:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";

function App() {
  return (
     <Router>
        <div className="App">
          <Route path="/albums">
              <Albums />
          </Route>
        </div>
     <Router/>
  )
}

If we wanted to add additional Routes to our routing logic it could look like this:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";

function App() {
  return (
     <Router>
        <div className="App">
          <Route path="/">
             <Home>
          </Route>
          <Route path="/albums">    
             <Albums />
          </Route>
        </div>
     <Router/>
  )
}

When seeing how this code gets rendered on the browser, we see this:

The <Home /> component is being rendered even though we can clearly see our URL is currently on "/albums". This is because <Route path> is rendering all routes that match the beginning of the current URL, not the whole thing. Since "/albums" contains a slash at the beginning, <Home /> component is rendered along with the <Albums /> component.

Another example of this is: If we used a URL with "/albums/new" in the browser to be able to render an <AlbumForm /> component, all three components (Home, Albums, and AlbumForm) would get rendered because their corresponding routes would all match with "/albums" in the beginning of their paths.

To avoid this unpredictable behavior, we turn to use our Switch component.

Switch Component

When the <Switch> component is rendered, it searches through its children <Route> elements to find one whose path matches the current URL. When it finds the first one, even if it's a partial match, it renders that route and ignores the rest.

So the best practice is to put routes with more specific paths before the less-specific ones. We put the "/" route at the end since all of them include the slash.

If we wanted to match the route exactly to our URL to avoid any partial matches, we could use a special prop called exact. This can be useful for the "/" route, so that it can only render the <Home> component when the URL is exactly "/" and nothing else.

To use Switch, we also need to import it at the beginning of our component along with BrowserRouter and Route.

Here is an example of using the Switch component with best practices:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
     <Router>
        <div className="App">
          <Switch>
            <Route path="/albums/new">
               <AlbumForm>
            </Route>
            <Route path="/albums">    
               <Albums />
            </Route>
            <Route exact path="/">    
               <Home />
            </Route>
          </Switch>
        </div>
     <Router/>
  )
}

Programmatic Navigation with `<Link/>` and `<NavLink/>` Components

So far, users will have to manually change the URL to see different views or trigger certain routes to render. However, React Router also improves the user experience by giving us a way to let users trigger those routes without having them know the paths.

In this sense, React Router uses programmatic navigation by providing us with two components to use in our applications:

<Link> : ideal for creating hyperlinks
<NavLink>: ideal for creating Navigation Bars

We call <Link> and <NavLink> components route changers because they help us change routes quickly and efficiently.

Using `<Link>` and `<NavLink>`

Whenever the <Link> component is rendered, an anchor tag (<a>) will be rendered to the DOM. So when the link is clicked by the user, the URL in the browser changes to the path in the "to" prop of the <Link> component. The routes then get re-rendered, displaying the right component for the route at the new URL. This is done all internally with JavaScript code, without making requests to the server or refreshing the page.

We also have the choice to use a <NavLink>component which works similar to the <Link> component but that knows whether or not it is "active". It is used for creating links that add styling attributes to indicate to the user which route is currently active and which link is currently selected. They are ideal for creating navigation bars in our application.

The <Link> component is used to navigate the different routes on our application, but <NavLink> is also used to add the style attributes to the active routes.

<NavLink> uses a prop called activeClassName that applies a class name whenever the route is active. So it styles the links when they are active. The NavLinks can style themselves as "active" when the path at its "to" prop matches the current URL location.

Here is an example of a NavLink where we pass in the name of a style class "selected" to the activeClassName prop of the NavLink to use for when it becomes active:

<NavLink to="/" activeClassName="selected">Home</NavLink>

We can also use an activeStyle prop that takes in an object (or a function in some cases) and applies a specified style to the NavLink for when it is active. This is useful for applying a style that isn't related to a class, or in other words, inline styling. Here is an example of using inline styling for the NavLink to use for when it is active:

<NavLink to="/" activeStyle={{ color: "white" }}>Home</NavLink>

In order to use <Link> or <NavLink>, we also need to import them at the top of our component.

Here is an example of a component that uses <NavLink> to implement a navigation bar. It gives the basic styling of the NavBar inline by setting the style attribute to an object of styles attributes. It then also adds styling for when the link is active by adding some inline styling object to the activeStyle prop:

import React from "react";
import { NavLink } from "react-router-dom";

const linkStyles = {
    display: "inline-block",
    padding: "1rem 4rem 1rem",
    margin: "0.2rem",
    background: "Black",
    textDecoration: "none",
    color: "lightgreen",
    fontsize: "1.2em"

};


function Navigation() {
    return (
        <div>
            <NavLink
                to="/"
                exact
                style={linkStyles}
                activeStyle={{
                    color: "white",
                }}
            >
                Home
            </NavLink>
            <NavLink
                to="/albums"
                exact
                style={linkStyles}
                activeStyle={{
                    color: "white",
                }}
            >
                My Albums
            </NavLink>
       </div>
     )
}

export default Navigation

"exact"
You can notice that we use the exact prop here for each NavLink to make sure that it knows to only set activeStyle when the route is exactly equal to the link. Otherwise we can have multiple links changing styles.

Summary

With client-side routing, although initial loading time could be a negative factor as the whole application needs to load on the first server request, routing between concise components can provide a big advantage as the amount of data it renders is less on the page. All data is handled locally and so a lot of the rest of the data needed to render can also be handled very quickly by the DOM. The user experience is also better, with more seamless page transitions and navigation that easily happens by just switching between components. It helps keep the feel of a single-page application as well, as the page doesn't need to keep refreshing when it renders a new view.

References:

React Router - Client Side Routing
React Router v5 - Primary Components
React Router v5 - NavLink

useEffect() & useState() in React

guzdaniel — Fri, 02 Dec 2022 19:33:29 +0000

Purpose of using hooks

When React 16.8 was released, support for Hooks was first introduced as a way for developers to use certain existing features of React in an even more declarative manner. These features range from managing a component's state to performing an after-effect or side effect when the state or states of a component change.

Hooks help us write better, clearer and more concise components. They are simpler to work with and test and also help us write more reusable stateful logic. This is all possible without the need to write classes and or implicitly tell React every step of the process.

For managing a component's state, we can use the Hook useState() in our components and for performing side effects after rendering our components to the DOM, we can use the Hook
useEffect().

UseState()

State is used in our components whenever we need dynamic data in our applications. This is data whose values change over time. All the state for our applications is held in React's internal code. So when we have components that need to keep track of information between renderings, the component itself can create an initial state for itself, which can then be updated, and used. This is done by calling the useState Hook inside the component.

Import useState

To use the Hook, we must first import it at the very beginning of a component like so:

import React, { useState } from 'react';

function App() {
  return (
    <h1> My Favorite Coldplay Album </h1>
  )
}

There are a two rules that come with using Hooks:
1) Only call Hooks at the top level : Never call Hooks inside conditional statements such as if/else, inside loops, or inside nested functions. This is because React relies on the order of the Hook calls.
2) Only call Hooks in React function components or from custom Hooks.

Call useState

After importing the Hook, we can now call the useState() Hook inside our function component.

import React, { useState } from 'react';

function App() {

const [album, setAlbum] = useState("")

  return (
    <h1> My Favorite Album </h1>
  )
}

Calling useState: By calling useState(), React declares and initializes a state variable. This is how some values get preserved between function calls.

The useState argument: We can pass in an argument to useState of any primitive type that will be used as the initial state. In this case, we are setting the initial state as an empty string. It could easily be an array or a integer or an object too.

The useState return values: useState returns a pair of values (an array with two values), the current state, and a function that can be called to update the current state. (Updating a state variable will always replace it instead of merging it like with class components.) We used some array destructuring to access the first item of the pair and the second item of the pair and then assign them to our newly created const variables. In this case, they're album and setAlbum.

Every time we call the updater function setAlbum to change the state value, React replaces the state value of album with the value passed by the updater function setAlbum. React then knows the state value has changed so it must re-render the component. If the component calls useState for a second time, React will ignore the initial value argument and return the updated current state value and the updater function. The component can now use the updated state variable.

Read State

Here is an example of reading state in a component. The
album state variable can be used by the component like any other variable:

import React, { useState } from 'react';

function App() {

const [album, setAlbum] = useState("Viva La Vida")

  return (
    <h1> My Favorite Coldplay Album : {album} </h1>
  )
}

Updating State

Here is an example of updating state in a component. After the user clicks the button "Parachutes", the state variable album will have a value of "Parachutes" when setAlbum("Parachutes") gets called. Since the state changed from "Viva La Vida" to "Parachutes", the component gets re-rendered:

import React, { useState } from 'react';

function App() {

const [album, setAlbum] = useState("Viva La Vida")

  return (
    <h1> My Favorite Coldplay Album : {album} </h1>
    <button type="button" onClick={() => setAlbum("Parachutes")}> 
     Parachutes
    </button>
  )
}

UseEffect()

When a function is called and the function causes things to change outside of the function itself, it's considered to have caused a side effect.

Examples of side effects can be things like accessing data from a database, network requests, writing to a file system, or interacting with browser APIs. Function components are impure when their output gives unpredictable results which can happen if they reach outside of themselves. The useEffect Hook then lets us interact with the outside world but without affecting the rendering or performance of the component that it's in.

The UseEffect Hook is used to tell React that your component needs to run an "effect" or an additional set of instructions after every render or update to the DOM. When this happens React remembers the "effect" function within the useEffect hook and calls it later after rendering the DOM updates. The effect function still has access to the variables within the component because it's in the same scope.

As we saw before, a re-render of the component can happen when the state changes within a component. So the useEffect() hook by default will run every time the component gets rendered.

Import useEffect

To use the Hook, we must first import it at the very beginning of a component like so:

import React, { useEffect } from 'react';

function App() {
  return (
    <h1> My Favorite Coldplay Album </h1>
  )
}

Call useEffect

After importing it, we can then call it inside our component. When calling it, we can pass it two arguments, an "effect" function, and a dependency array.

If no dependency array is passed in, the side effect function will run by default every time our component renders and can lead to an infinite loop. In other words, the effect will synchronize with all state.

useEffect(() => {})

If you pass in an empty array, the side effect function will run only the first time the component renders, when the component first mounts. In other words, the effect will synchronize with no state:

useEffect(() => {}, [])

If the dependencies array has elements inside, then the side effect will run anytime those dependency variables change. React will re-run the effect even if just one of them is different from the last render. In other words, the effect will synchronize with the state of the dependencies. Always make sure the array includes all the values from the component (like props and state) that change over time and are used by the effect.

useEffect(() => {}, [variable1, variable2])

Incorporating useEffect

In this example, I'm using useEffect to fetch some data from a database, then storing that fetched data in state for later use with the updater function. We use fetch inside useEffect so that in case the fetch request fails, we have a safe space to do so, and won't affect the rendering or performance of the component. I'm also using the empty dependencies array to run the effect only once after the first render. We're storing the fetched data in state so there's no need to fetch the data more than once:

import React, { useEffect } from 'react';

function App() {

const [albums, setAlbums] = useState([])

useEffect(() => {
    fetch("http://localhost:3001/albums")
      .then(res => res.json())
      .then(data => {
        setAlbums(data)
      })
  }, [])

  return (
    <h1> My Favorite Coldplay Albums </h1>
{
  )
}

Optional useEffect cleanup function

The UseEffect Hook has an optional clean up for side effect functions that continue to run in the background when we no longer need them. We clean up in order to prevent unwanted behaviors such as memory leaks and also to optimize application performance. This can be implemented as a cleanup function that is returned by UseEffect.
The cleanup is called after the component re-renders as a result of setting state and before the useEffect callback is called. However, if the component is no longer being returned by its parent, then it becomes unmounted, and the cleanup happens at the end after the re-render.
This clean can range from clearing a timeout, removing listeners, etc.

This is how it looks:

useEffect(() => {
        //effect
        return () => {
            //cleanup
        }
    }, [])

References:

ReactJs - Intro to Hooks
ReactJs - Hooks State
ReactJs - Hooks Effect

Using Functional Components in React

guzdaniel — Wed, 09 Nov 2022 23:50:46 +0000

React components allow programmers to organize the code that we use to render the display of our page and its functionality into independent, modular, reusable pieces.

Each component can be coded alone from the other. This helps programmers think of the application in parts and also helps for updating elements more easily and efficiently when changes need to be made.

There are two main types of components in React:

Class Components
Functional Components

We will be covering functional components mainly and how we use them to make our lives as programmers easier by making them dynamic.

Functional Components

How to write components:

When writing components one must follow 3 rules:

The component must return JSX.
The component takes in one argument called "props", which is an object.
The function component must begin with a capital letter.

Say we have the following javascript:

function Albums() {
  return (
    <div> This a list of your favorite albums</div>
  )
}

Here we can see that the component simply looks like a function whose name begins with a capital letter. However if you notice, a piece of code that looks like HTML is being returned from the function.

This piece of HTML-like code is called JSX.

JSX is code that isn't valid Javascript, it is a syntax extension so a middle step happens before React can run our code. Babel is a package extension of React that works as a transpiler to turn that JSX into javascript that the browser can recognize.

JSX can only return one top level element but you can always add more children, such as another <div> or another <Component />

Using the Components:

function App() {
  return (
    <div>
      <Albums />
    </div>
  )
}

In this code, you can see that App is a component that is using the Albums component that we created earlier.

Because the App component wraps around the Albums component, we can now say that the App component is the "parent" of the Albums component and the Albums component is one of the "children" of the App component.

Dynamic Components

We can make components dynamic by starting to add something called "props" as the argument to the function.

Such as:

function Album(props) {
  return (
    <div>
      {props.title}
    </div>
  )
}

Here we are passing a piece of data (an object) from a different component into a single Album component so that we can use it with the functionality and UI elements created in Album.

** We use {} curly brackets to evaluate a variable or a function when inside JSX **

So here we are evaluating the props object and accessing specifically the key with the title of the album.

Hierarchy of Components

The component that is passing down props to Album is its parent component.

Let's look at the parent component:

function App() {

const title = "Parachutes"
const artist = "Coldplay"

  return (
    <div>
      <Album title=title 
              artist=artist/>
    </div>
  )
}

Here we can see that the title is being passed down to the component through what looks like an attribute of an HTML element. This is how the data gets passed from a parent component to a child component.

More On Dynamic Components

Because components are reusable, we can add multiple ones inside another component.

Such as:

function Albums() {
  return (
    <div>
      <Album />
       <Album />
        <Album />
    </div>
  )
}

But a better way to do this would be to do it dynamically:

function Albums(props) {
   const albumList = props.albums.map(albumObj => <Album key={albumObj.id} album={albumObj} />)

    return (
        <div>
            {albumList}
        </div>
    )
}

Here we are using the map function to map through an array of albums (props.albums) that was passed down through props from another component and then creating a new component of Album for each of those array elements.

If you notice, when we map the array, we are passing a key attribute to each Album component. This is a unique identifier that distinguishes each component from the rest, such as its object id. This is necessary, otherwise, React will through a warning about it, saying that each Component should be distinct/unique.

Final tip:

The only downside of props is that they can only be passed from a parent component to a child component, so plan out the hierarchy of your components before beginning to code your application. For passing data from child to parent, you can use state in the parent component and manipulate it from the child component by passing the set state function in the props.

References:

[ReactJs - Components and Props](https://reactjs.org/docs/components-and-props.html

Add event listeners to multiple DOM elements in Javascript

guzdaniel — Fri, 19 Aug 2022 05:26:00 +0000

Adding an event listener to a DOM element in its simplest form involves doing two things:

Selecting the element from the DOM

Ex. const elem = document.querySelector('#name-of-id')
(here we are selecting the element by its id using the CSS Selector '#' instead of the getElementById() method)
Adding an event listener to the selected element

Ex. elem.addEventListener("click", renderAction)
(where renderAction is the callback function that is called after the event is clicked.)

But what if we wanted to select multiple elements of the DOM where we wanted to add click event listeners to all of the elements without writing addEventListener() for each?

We could achieve this by doing three things,

1. Selecting all the elements using the method querySelectorAll()
2. Traversing the NodeList Collection of elements using a loop like forEach
3. Adding an event listener to each of the elements on the NodeList

Using querySelectorAll() and the NodeList

Say we have the following html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> Instruments </title>
  </head>

  <body>
    <div id="instrument-container">
      <div class="instrument">Piano</div>
      <div class="instrument">Trumpet</div>
      <div class="instrument">Saxophone</div>
      <div class="instrument">Flute</div>
    </div>

    <script src="./index.js"></script>
  </body>
</html>

We can use javascript to select all of the elements with a class of "instrument"

const instElems = document.querySelectorAll('.instrument')

In this case, we are using the CSS selector '.' dot to specify to only select all elements with "instrument" as their class.

The querySelectorAll() method will then add these elements to a NodeList collection. Remember that the DOM is a tree of Nodes so when we select from the DOM we are selecting its Nodes.

Traversing the NodeList with forEach()

Just like arrays use the forEach() loop to traverse its elements, NodeList Object also has a built-in forEach() method for traversal.

In the following javascript we traverse the NodeList instElems:

const instElems = document.querySelectorAll(".instrument")

instElems.forEach(elem => {
    console.log(elem)
})

Let's break that code down:

instElems is the NodeList Collection
forEach traverses each element which is passed as a variable elem to an anonymous function (using arrow notation)
for every element elem of instElems, we call the anonymous function and console.log the element

This is the output:

As you can see, it console logs all of the <div> elements with "instrument" as their class

Adding a Click Event Listener to All Elements in NodeList

Now that we have our NodeList, we will traverse it again but this time we will add an event listener for every node.

The following code does this:

const instElems = document.querySelectorAll(".instrument")

instElems.forEach(elem => {
    elem.addEventListener("click", (event) => {
        console.log(event.target.innerText, "clicked")
    })
})

So for each element of instElems (every instrument <div>) we will add an event listener.
The event listener will call the anonymous function for that <div> when the <div> is clicked.
The anonymous function then console logs the text inside that <div> element and a string saying it was clicked.

Demo:

Conclusion

We explored how to add event listeners such as a "click" to multiple DOM elements in a few lines of code. We did it by using a built-in selector method which then adds the DOM elements to a NodeList collection without having to traverse them ourselves. The only traversing would happen at the point of applying the event listeners to the elements. We did this by using a built-in loop method of NodeList.

Another great thing about having the <div>'s stored in a NodeList Collection is that now you can reference that same collection of <div>'s when you need it without having to select them every time.

Tip: If you ever need to do more with the collection, you can also transform the collection into an array by using the Array.from() method.

References:

MDN Doc - NodeList
W3 Schools - CSS Selectors
MDN Doc - addEventListener
MDN Doc - querySelectorAll
Instruments Image

Why study Software Engineering?

guzdaniel — Fri, 19 Aug 2022 02:09:40 +0000

My former 11 year old self immediately prints to the terminal in my head helping me answer this question. Growing up, if there was a computer around, I wanted to use it, I wanted to mess with it, I wanted to fix it. It could’ve been my curiosity for how things functioned or the amazement in the idea that one machine could do so much to bring me joy. All I know is it got me excited and thinking of a million possibilities for its use. From an early age I knew I loved using computer programs and understanding how they worked. Either for listening to new music, editing family videos and pictures, or using the early stages of the internet to look up information about anything and everything. I wanted to explore it all. Eventually, my love for it lead to studying computer science in college.

I soon went from using programs to actually understanding how to build them. I started to gain a deeper knowledge about code and the tremendous discipline behind it. I learned how powerful knowing a computer language could be to begin taking great ideas from your imagination to a computer screen and beyond. It took dedication in learning a new world of syntax and technologies that worked behind the scenes. Coding became a constant game of trial and error and got me used to the idea that things don’t always work like you intend and that the process to make them work becomes more rewarding than the output sometimes. I started to feel like an artist sculpting for the joy of sculpting knowing his/her art might not appeal to everyone. In my case, the hours of coding would easily lead to bugs and bugs that could lead to an unusable program.

Through my years in college I became especially interested computer architecture. I remember feeling like a kid at chocolate factory in that class as I could finally understand how something displayed on a computer screen could be reduced to something as simple as zeros and ones. Soon I discovered that making software from scratch was just as complex as making a program work in an operating system. I realized it took teams of people to make a good piece of software. For the longest time I thought coding was about one person alone with his/her art, but soon it made sense how crucial a collaboration is for developing the best possible final product. It also made me happy to learn that I could step out of my shell and become part of something greater than myself.

The sad part came when my passion for music clashed with my love for coding during college. Missing out on internships and opportunities to get real world experience lead me down a path that made me less able to obtain a job in software development out of college.

I knew I wanted to get back to it. Back to the excitement of making something out of nothing, of fixing broken things and figuring out how I could break them again if wanted to just to fix them all over again. My love for writing code turned into the sort of a relationship a wizard has with his wand and a coding bootcamp in software engineering at Flatiron seemed like the perfect way to get back to that place.

Today as I move forward in the course, I can start to remember how powerful and enriching it was and is to learn something new in a subject you’re passionate about. Already I’m getting to learn about the front-end development aspect of web development which I especially enjoy since my exposure to it was very minimal during my time in college. Subsequent entries to this blog will follow my progress as I continue in the course, showing technical examples of the processes I take to complete each phase. Join me as I compile and run a new personal journey of creativity and collaboration, populating my human database with new skills, technologies, languages, disciplines, and resources that will eventually allow me to click and drag myself into the job of my dreams.

DEV Community: guzdaniel

Client-side Routing with React Router v5

Routing

Client-side Routing

React Router

Conditional Rendering of Components

Using React Router Components

BrowserRouter Component

Route Component

Switch Component

Programmatic Navigation with <Link/> and <NavLink/> Components

Using <Link> and <NavLink>

Summary

References:

useEffect() & useState() in React

Purpose of using hooks

UseState()

Import useState

Call useState

Read State

Updating State

UseEffect()

Import useEffect

Call useEffect

Incorporating useEffect

Optional useEffect cleanup function

References:

Using Functional Components in React

React components allow programmers to organize the code that we use to render the display of our page and its functionality into independent, modular, reusable pieces.

Functional Components

Dynamic Components

Hierarchy of Components

More On Dynamic Components

Final tip:

References:

Add event listeners to multiple DOM elements in Javascript

Adding an event listener to a DOM element in its simplest form involves doing two things:

But what if we wanted to select multiple elements of the DOM where we wanted to add click event listeners to all of the elements without writing addEventListener() for each?

Using querySelectorAll() and the NodeList

Traversing the NodeList with forEach()

Adding a Click Event Listener to All Elements in NodeList

Conclusion

References:

Why study Software Engineering?

Programmatic Navigation with `<Link/>` and `<NavLink/>` Components

Using `<Link>` and `<NavLink>`