Forem: Erica Mayes

Navigating React.js with useNavigate

Erica Mayes — Tue, 11 Oct 2022 01:46:36 +0000

In the process of building my first two end-of-phase projects at Flatiron, I happened upon a handful of terms and concepts outside of my curriculum that proved quite useful.

This was no different in Phase 3, and my project partners and I soon stumbled across a very helpful little React hook called useNavigate. Below I've included a brief overview and a specific use case for the useNavigate hook.

Under the Hood

At first glance, useNavigate functions very similarly to its predecessor - useHistory - in that it gives you the ability to navigate programmatically. Prior to React v6, useHistory would hook into React Router's history object and utilize push and replace methods to maneuver to other routers. useNavigate performs similar functionality, but with better compatibility and built-in convenience functions.

Specifically, useNavigate is a hook that affords access to the navigation object. While every screen component in an application is provided with the navigation prop by default, it is often inconvenient or not functional to pass the navigation prop to a child component directly - enter useNavigate!

useNavigate in Action

Let's take a look at a specific use case scenario.

To start, we'll set up a React app with the latest version of the react-router-dom installed by running these two terminal commands (if using npm):

npx create-react-app <project_name>
npm install react-router-dom

To demo the capabilities of useNavigate, we'll set up a basic App with two components as children of App.js - About & Contact.

Next, we have to import React and useNavigate to every file we plan to use them - in our case, both About.js and Contact.js.

import React from 'react';
import { useNavigate } from "react-router-dom";

Let's create some boiler-plate code:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import Contact from "./components/Contact";

function App() {

  return (
      <div>
        <Router>
          <Routes>
            <Route exact path="/" element={
              <Home/>
            }/>
            <Route exact path="/about" element={
              <Contact/>
            }/>
          </Routes>
        </Router>
      </div>
    );
}

export default App;

At the top level, we've imported React Router and set up our various routes.

import React from 'react';
import { useNavigate } from 'react-router-dom';

const Home = () => {
    const navigate = useNavigate();

    return (
        <div>
            <h1 style="text-align:center; color:green">The Fellowship of the Ring</h1>
                <ul>
                    <li>Frodo</li>
                    <li>Sam</li>
                    <li>Merry</li>
                    <li>Pippin</li>
                    <li>Aragorn</li>
                    <li>Boromir</li>
                    <li>Legolas</li>
                    <li>Gimli</li>
                    <li>Gandalf</li>
                </ul>
            <button onClick={ () => navigate("/contact")}>Contact</button>
        </div>
    )
};

export default Home;

In the Home component, we passed useNavigate a specified route ("/contact"), and then called it inside a click event.

import React from 'react';
import { useNavigate } from "react-router-dom"

const Contact = () => {
  const navigate = useNavigate();

  return (
  <div>
     <h1 style="text-align:center; color:red">To contact:</h1>
        <p>The Council of Elrond</p>
        <p>Rivendell</p>
     <button onClick={()=>navigate("/home")}>Home</button>
  </div>
  )
};

export default Contact;

In this demo, the useNavigate hook is being used to toggle between a "Home" and "About" page via a button click.

Further Color

A few notes about the above code:

The navigate function can be passed two types arguments:

A 'to' value (in the same style as the '' tag
A delta to point to a location in the history stack

For example: navigate(-1) is used to redirect the user to the previous page in history, while navigate(1) points them to the next page.

Additionally, the navigate prop has a number of convenient built-in functions. To outline a few:

reset - replaces the current state with a new route
goBack - moves back in the stack in history
setParams - alters the route's params
setOptions - edits the screen's options
isFocused - confirms the screen is focused

Overall, a very useful hook with lots of built-in functionality! Happy coding!

React for Beginners

Erica Mayes — Mon, 19 Sep 2022 07:03:25 +0000

On the heels of my Phase 2 completion at Flatiron, I have become intimately familiar with React App over the last three weeks.

For any novices, React is a widely-used JavaScript library maintained by Meta (yes, library - though it functions similarly to a framework in many respects). React has become the most favored front-end library and continues to grow in both popularity and demand.

For posterity's sake, I've put together a list of tips and tricks to benefit newcomers to the React world:

1) Use Create React App to initialize projects

One of the most efficient functionalities of the React app is the ability to create a new project with a single command line using Create React App. Depending on your package manager of choice, you can do this with one of the following three commands:

"npx create-react-app my-app"
"npm init react-app my-app"
"yarn create react-app my-app"

This is the best way to initialize single-page applications, as it only requires one build dependency. Running this command will save a folder entitled "my-react-app" to your computer with all required packages.

After installation, you will make use of several other handy-dandy terminal commands inside your project directory.

"npm start" or "yarn start": will run your app in development mode. Your app will now be viewable on port 3000 in your browser.
"npm run server": will start your backend server
"npm test" or "yarn test": will run tests concerning files altered since the most recent commit

2) Understand basic syntax

As user-friendly as React is, there are a few buzz words necessary to learn:

Props: Refers to data of any type that gets passed down to a child component. Without restructuring, basic syntax looks like this:

function Links (props) {
    return (
        <div>
            <h3>Links</h3>
                <a href={props.github}>{props.github}</a>
                <a href={props.linkedin}>{props.linkedin}</a>
        </div>
    );
}

Component: A function that takes props as an argument and returns JSX. These are usually split up into separate files in React for better scalability and reusability. Although historically written using class syntax, the new functional syntax is best practice moving forward in React.

State: dynamic data in your component that will change over time via user interaction.

React hooks: Special functions that allow us to 'hook' into React's internal state. To use, we must first import them, then call them inside of the component. Two prominent hooks:

"useState": used to access and modify state inside of our components

import React, { useState } from "react";

const [button, setButton] = useState(false)

"useEffect": used to perform any side effects outside of the main purpose of a function - i.e. data fetching, updating parts of the page outside of React, etc.

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

useEffect (() => {
    if (timeRemaining === 0) {
        setTimeRemaining(10);
        onAnswered(false);
        return;
    };
}

Component hierarchy: a diagram resembling a tree used to illustrate the relationship between parent and child components.

3) Keep components small

React best practice is to keep components as small as functionally possible, without over-abstracting. As a rule, I like to start at the top - generally the App component - and break out additional components as I begin to add smaller UI capabilities. This is for a variety of reasons:

Easier to debug
Your code is more understandable to other developers
Allows for greater reusability and scalability of components

4) Don't overuse state

One of the biggest mistakes I see in React is the utilization of state when props or conditional logic would suffice. Call state sparingly, as it can add unnecessary complexity to your code.

When considering whether to add state to a component, it helps to consider a few things - is the component static and unchanging? Can you calculate the desired behavior based on any other state or props? If so, your component most likely doesn't need state.

5) Avoid asynchronous errors

When using state in React, It is essential to understand that setting state is asynchronous. What does this mean? Simply that the useState hook doesn't change state immediately - it must wait for the component to re-render (which is triggered by a change in the component).

This re-render also causes any children components to be re-rendered as well.

Understanding the life cycle of components in React is essential to accurately rendering components and can save you countless hours of troubleshooting and debugging.

Conclusion

While there's still a ton to learn about React syntax and functionality, the above list was a good place to start for me. Hope it helps you as you dip your toes in the React App world - happy coding!

Think Like a Coder

Erica Mayes — Thu, 25 Aug 2022 06:31:20 +0000

What's this all about, anyway?!

A lot of words come to mind when I think about Phase 1 of Flatiron School's Software Engineering bootcamp - 'rewarding', 'exhausting', and 'fast-paced' among them - but none more so than extremely challenging. I had anticipated the heavy demand of the 15-week program, and I was prepared... with my flash cards, pneumonic devices, and very thorough note-taking habits at my disposal.

During my second week, our tech coach, Sam Waters, made a comment that stuck with me.

'The point of this bootcamp is not for you to memorize all the terms, methods, and syntax - you can Google that,' he said. 'The point is for you to think differently, and understand the logic required to communicate with a computer.'

And he was right - my flash cards couldn't help me to conceptualize the flow of logic through a callback function (much less reproduce it).

This became clear in my early struggle with - of all things - parameters, particularly after utilizing a loop or iteration method. Consider the below illustration from the Phase 1 Code Challenge:

Although a simple code block, I struggled to remember which parameters to use in subsequent functions - animalData vs. animal - and to follow the line of reasoning through the end of the code. When I mentioned this to another student after the challenge, his response echoed Sam's: 'Yeah, that just involves getting used to a certain way of thinking.'

As I've advanced through the curriculum and the material has become more complex, attempting to adapt my thinking to better align with the computer's has only become more essential.

A Strategy

In response, I developed an approach when confronted with chaotic code or a confusing ask.

1) Take a beat and breathe

It's easy for me to focus solely on what I don't know immediately, and inevitably miss instructions or easy solutions. My husband calls it 'panic mode.' This step reminds me to focus, read any instructions, and not rush into premature work.

2) Fall back on what you know best

One of the really great things about code is that there are usually innumerable ways to reach a solution. I've learned that it generally serves me well to invest in what I know best, instead of trying to learn unfamiliar or seemingly 'better' methods.

3) Formulate a plan & begin to execute

To this end, I focus on two questions: 'What's my end goal?' and 'What is the general roadmap to get there?' As the most involved, and least specific, step, I first rely on pseudocoding (an informal description of the process with no specific syntax) to conceptualize a solution. Then, moving from least to most specific, I identify functions, variables, and methods to build in to my roadmap - and start to code!

To illustrate with an example...

In the below code, I was asked to build an object containing a large volume of sports players' data and then to return a list of jersey numbers. To start, I identified my end goal: build an array of jersey numbers. Through pseudocoding, I decided that my plan of action would be to establish an empty array, isolate players' jersey numbers via a 'for' loop, and then use the .push( ) method to dump all the numbers into the empty array. With that in mind, I began to narrow down on my exact variables and functions, and started writing code!

4) Look up what you don't know

For any methods, language, or processes I can't fully remember, this step is where I do the work to research them.

In the above example, if I didn't remember the syntax for the .push( ) method or specifics on bracket and dot notations, this is when I would look that up.

5) Log, log, log

Check your work! I'm learning to be a bit obsessive about console logging as I go, simply to confirm that each step of my code is working like I want it to. Better to know early on than find out something is broken after 50 more lines of code!

Moving Forward

Although I may still struggle with turning my pseudocode into written code, this approach seems to be helping me internalize the mindset shift that is required to be a good developer.

Overall, I'm very excited to see where this takes me in the next four phases at Flatiron School, and in my career beyond that!