DEV Community: Kosi Iyiegbu

Routing and Using React Router

Kosi Iyiegbu — Mon, 20 Jun 2022 16:22:38 +0000

Routing is the ability to move between different parts of an application when a user enters a URL or clicks an element(link, button, icon, etc.) within the application. To add routing in our react applications we need to install a library called react-router.

React Router is a standard library used for routing in React. It helps developers create single-page applications that are responsive and have a dynamic user-interface. React Router makes it easy to build apps that work well on both desktop or mobile, regardless of where users are browsing from.

To install the react-router in your react application, you have to run the following command in the terminal depending on your packet manager.

$ npm install react-router-dom@6

$ yarn add react-router-dom@6

This will install the latest version which is version 6.

React Router comes with some Components, Hooks, etc. We'll look at some of them and how they're used.

`<BrowserRouter>`:

The <BrowserRouter /> serves as a parent component used to store all other components. It stores the current location in the browser's address bar using clean URLs and navigates using the browser's built-in history stack.

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

function App() {
  return (
    <BrowserRouter>
      {/* The rest of your components will go into this space */}
    </BrowserRouter>
 );
}

In the code above you can see how the <BrowserRouter /> serves as the parent component that wraps all other components for your application.

`<Routes>` and `<Router>`:

<Routes> and <Route> are the primary ways to render something in React Router based on the current location. All <Route> components are wrapped inside the <Routes>. If the "path" of a <Route> matches the current URL, it will render its element.
The "path" of a <Route> is an attribute that specifies the URL of the desired component. Any component whose pathname is a backslash will get rendered first whenever the app loads for the first time. This implies that the "Home" component will be the first component to get rendered.
The second attribute called "element" specifies the component the should render.

Whenever the location changes, <Routes> looks through all the children <Route> elements to find the best match and renders that branch of the UI.

import { BrowserRouter, Routes, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"
import Profile from "./Contact"

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={ <Home /> } />
        <Route path="/about" element={ <About /> } />
        <Route path="/profile" element={ <Profile /> } />
      </Routes>
    </BrowserRouter>
  );
}

export default App

`<Link>`:

This is an element that lets the user navigate to another page by clicking or tapping on it without having to reload the page. It is similar to the anchor element (<a>) in HTML. It's "to" attribute specifies the path that the link takes you to.

import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./Pages/Home";
import About from "./Pages/About";
import Profile from "./Pages/Profile";

export default function App() {
  return (
   <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/profile">Profile</Link></li>
        </ul>
      </nav>

    <Routes>
     <Route path="/" element={ <Home /> } />
     <Route path="/about"  element={ <About /> } />
     <Route path="/profile"  element={ <Profile /> } />
    </Routes>
  </Router>
  );
}

`<NavLink>`:

This is a special kind of <Link> that knows whether or not it is active. It is useful when building a navigation menu where you would want to show which of them is currently selected.

By default, an "active" is added to the <NavLink> component when it is active which provides a simple styling mechanism for users. You can pass a function the the "style" or "className" attributes that will allow you to customize the inline styling or class based on the components active state. The code below shows how it would work:

import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./Pages/Home";
import About from "./Pages/About";
import Profile from "./Pages/Profile";

export default function App() {
  return (
   <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li>
            <NavLink  style={({ isActive }) => (isActive ? { 
            color: "red" } : undefined)}
            to="/about">
             About
            </NavLink>
          </li>
          <li><Link to="/profile">Profile</Link></li>
        </ul>
      </nav>

    <Routes>
     <Route path="/" element={ <Home /> } />
     <Route path="/about"  element={ <About /> } />
     <Route path="/profile"  element={ <Profile /> } />
    </Routes>
  </Router>
  );
}

When the code above is rendered, The <NavLink> would have a color of red when it is active.

`useNavigate`:

This is a hook that returns a function to let you navigate programmatically, for example after a form submission. It can be used to redirect a user to a specific URL and can also be used to go to the previous or next page. If using "replace: true", the navigation will replace the current entry in the history stack instead of adding a new one. It can also accept a 2nd optional argument which is "state" and we can use this to pass values to another component.

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

function Profile() {
  let navigate = useNavigate();
  return (
    <div>
      THIS IS THE PROFILE PAGE
      <button
        onClick={() => {
          navigate("/about");
        }}
      >
        Change to about page
      </button>
    </div>
  );
}

export default Profile;

The code above is one of the use cases of the navigate function. We can also pass in numbers like this: navigate(1) or navigate(-1) which would take you to the next page or previous page respectively.

`useParams`:

The useParams hook helps us to get the parameter passed on the URL without using the props object. It returns an object of key/value pair of the dynamic params from the URL that was matched by the <Route path>.

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}

function App() {
  return (
  <Router>
    <Routes>
        <Route path="/" element={ <Welcome /> } />
        <Route path="/profile/:userId" element={ <Profile /> } />
        <Route path="/services" element={ <Services /> } />
    </Routes>
  </Router>
  );
}

`useLocation`:

This hook returns the current location object. The object represents the current URL and it is immutable. This can be useful if you'd like to perform some side effect whenever the current location changes. Some of its use includes extracting the query parameters from the URL and doing something depending on the query parameters. The “search” property of the location object returns a string containing the query part of the URL.

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

export default function App() {
  const location = useLocation();
  useEffect(() => {
    console.log(location.pathname);
  }, [location]);

  return (
    <Router>
      <Routes>
        <Route path="/" element={ <Home /> } />
        <Route path="/about"  element={ <About /> } />
        <Route path="/profile"  element={ <Profile /> } />
      </Routes>
    </Router>
  );
}

In the code above, the "pathname" contains the user's current location and it would change depending on the current <Route path>.

Conclusion

So far, React Router v6 is very promising. The new features and Hooks will definitely encourage cleaner code. I hope you enjoyed this article and found it useful!

State Management, React Hooks and Component Lifecycles

Kosi Iyiegbu — Fri, 10 Jun 2022 15:00:05 +0000

State management is simply a way to communicate and share data across components. You can simply say, State is a JavaScript object that represents the part of a component that can change based on the action of a user.
In React, there are different kinds of state as well as ways for managing each of them. There are 4 kinds of React state to manage which are:

Local State
Global State
Server State
URL State

Let's cover what each of them are,

Local State: This is the state we manage in one or another component. It allows to instantiate a plain JavaScript object for a component and hold information that might affects its rendering. This is managed in React using the useState Hook. For example, local state would be needed to track values for a form component, such as form submission or can be used to show or hide a modal component.

In a component built with ES6 classes, whenever the state changes (only available through setState function), React triggers a re-render which is essential for updating the state of the application.

Global State: The global state is the data we manage across multiple components. Sometimes state we think should be local would become global.

For example, the authenticated state of a user. If a user is logged into the app, it is necessary to get and change their data throughout the application.

Server State: This is a simple concept, but can be hard to manage alongside the global and local UI state. Here, data comes from an external server which must be integrated with the UI state.

Fortunately, tools such as SWR and React Query help to make managing the server state easier.

URL State: Data exists on the URL such as query parameters and pathnames. In many cases, a lot of major parts of our application rely upon accessing URL state. Imagine building a blog without being able to fetch a post based off of its id that is located in the URL.

These States are the most which are focused on for most applications that are being built.

Managing Local State in React

The local state is probably the easiest to manage in React, this is because of the tools built into the React library used for it.

One of the tools is the useState hook, it can accept any valid data value which includes object and primitive values. It's setter function can be passed to other components as a callback function. Let's look at a quick example of using it

import React, { useState } from "react";

const StateTutorial = () => {
  const [inputValue, setInputValue] = useState("Kosi");

  let onChange = (event) => {
    const newValue = event.target.value;
    setInputValue(newValue);
  };

  return (
    <div>
      <input placeholder="enter something..." onChange={onChange} />
      {inputValue}
    </div>
  );
};

export default StateTutorial;

So here we have the inputValue state which is a variable and we set the initial value to a string, then the setInputValue function which is it's setter function.

So basically, what the code does is whenever we write in the input, the value of the state will change to match what we are writing. We're basically grabbing the value of the input on the onChange function and changing it to match what we're typing with the setter function.

This is just a small example of how we manage states locally. There are other scenarios which we can make use of the useState hook which you can look up.

React Hooks

Hooks are new features which was introduced in 16.8 version of React. They helped to bring "state" to functional components and also help us to use other react features without writing a class component.

We've see one of the React hooks which is the useState hook, I'll talk about the useEffect and useMemo hooks.

useEffect

The useEffect hook is used to perform side effects in react components. A functional React component uses props and/or state to calculate the output. If the functional component makes calculations that don't target the output value, then these calculations are named side-effects. Some examples of side-effects are: fetching data, directly updating the DOM, etc.

The useEffect hook accepts 2 arguments which are a callback and the dependencies. The callback function contains the side-effect logic, while the dependecy is used to control when you want the side-effect to run.

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

function EffectTutorial() {
  const [data, setData] = useState("");
  const [count, setCount] = useState(0);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/comments")
      .then((response) => {
        setData(response.data[0].email);
      });
  }, []);

  return (
    <div>
      <h1>{data}</h1>
      <h1>{count}</h1>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click
      </button>
    </div>
  );
}

export default EffectTutorial;

The code above uses Axios to fetch data from an api. If you didn't know, In ReactJS, Axios is a library that we use to get data from an eternal source by creating HTTP requests. So we grab the response from the api and display part of the data which is the email.

The count state is used to show that when the state changes, the useEffect will make the call once since we gave it an empty dependency array. We can use the useEffect for many things, this is just an example of a use for it.

useMemo

The useMemo is used to return a cached value so that it does not need to be recalculated. The whole point of using it is to improve performance and decrease latency on huge computations made throughout the application.

import axios from "axios";
import { useEffect, useState, useMemo } from "react";

export default function MemoTutorial() {
  const [data, setData] = useState(null);
  const [toggle, setToggle] = useState(false);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/comments")
      .then((response) => {
        setData(response.data);
      });
  }, []);

  const findLongestName = (comments) => {
    if (!comments) return null;

    let longestName = "";
    for (let i = 0; i < comments.length; i++) {
      let currentName = comments[i].name;
      if (currentName.length > longestName.length) {
        longestName = currentName;
      }
    }


    return longestName;
  };

  const getLongestName = useMemo(() => findLongestName(data), [data]);

  return (
    <div className="App">
      <div> {getLongestName} </div>

      <button
        onClick={() => {
          setToggle(!toggle);
        }}
      >
        {" "}
        Toggle
      </button>
      {toggle && <h1> toggle </h1>}
    </div>
  );
}

So here, we have the same api call we used in the useEffect that returns a list of comments and we set the state of the data to the actual list. Then, we have a function findLongestName which calculates the longest name among the author of the comments

The useMemo hook is used here in the getLongestName variable to store(memoize) the value that the function calculates and put the data state in the dependecy array so that the calculation is only made whenever the data changes. This means even if the toggle state that is set was to be changed, the function wouldn't have to make calculation again.

There are more React hooks you can look up to know their uses.

Component Lifecycles

React web applications are a collection of independent components that run according to the interactions made with them. There are different lifecycle methods that React provides at different phases of a component's existence.

A component's lifecycle can be classified into 4 parts:

Initialization
Mounting
Updating
Unmounting

Let's see what happens at each phase

Initialization

This is where the component starts it's journey by setting up the state and it's props. This is generally done in the constructor of the component. The following code describes the process

class Clock extends React.Component { 
    constructor(props) 
    { 
        // Calling the constructor of 
        // Parent Class React.Component 
        super(props); 

        // Setting the initial state 
        this.state = { date : new Date() }; 
    } 
}

Mounting

This is the phase in which the React component is created and inserted into the DOM and rendered for the first time. The two methods available in this phase are:

componentWillMount()
This method as the name suggests is called just before the component is mounted on the DOM or before the render method is called. API calls or any data changes shouldn't be made using this.setstate in this method because it is called before the render method. Nothing can be done with the DOM (i.e. updating the data with API response) as it has not been mounted. Therefore, we can’t update the state with the API response.
componentDidMount()
This method is called after the component is mounted on the DOM. It is called once in a lifecycle and before it's execution the render method is called.

This is how this phase would look:

class LifeCycle extends React.Component {
  componentWillMount() {
      console.log('Component will mount!')
   }
  componentDidMount() {
      console.log('Component did mount!')
      this.getList();
   }
  getList=()=>{
   // method to make api call
  }
  render() {
      return (
         <div>
            <h3>Hello mounting methods!</h3>
         </div>
      );
   }
}

Updating

This is the phase where the component state changes and a re-render takes place. In this phase, the states and props of a component are updated following user events such as clicking, typing, etc. The methods in this phase are:

componentWillReceiveProps() This is a props exclusive function. It is invoked before a mounted component gets its props reassigned. The function is passed the new state of props which may or may not be identical to the original props. This is a use-case:

componentWillReceiveProps(newProps) 
{ 
    if (this.props !== newProps) { 
        console.log(" New Props have been assigned "); 
        // Use this.setState() to rerender the page. 
    } 
}

shouldComponentUpdate()
By default, every state or prop update re-renders the page but you may not always want to do this. This method lets React know whther the component will be affected by the update or not. t receives arguments like nextProps and nextState which help us decide whether to re-render by doing a comparison with the current prop value. It is invoked before rendering an already mounted component when new props or state are being received. If returned false then the subsequent steps of rendering will not be carried out.
componentWillUpdate()
This method is called before the component is re-rendered. It is invoked once before the render() function is executed after updating the State or Props.
componentDidUpdate()
Similarly, this function is called just after the component is re-rendered. This method receives arguments like prevProps and prevState.

To better understand the updating methods, it would look like this

class LifeCycle extends React.Component {
      constructor(props)
      {
        super(props);
         this.state = {
           date : new Date(),
           clickedStatus: false,
           list:[]
         };
      }
      componentWillMount() {
          console.log('Component will mount!')
       }
      componentDidMount() {
          console.log('Component did mount!')
          this.getList();
       }
      getList=()=>{
       // method to make api call
       fetch('https://api.mydomain.com')
          .then(response => response.json())
          .then(data => this.setState({ list:data }));
      }
       shouldComponentUpdate(nextProps, nextState){
         return this.state.list!==nextState.list
        }
       componentWillUpdate(nextProps, nextState) {
          console.log('Component will update!');
       }
       componentDidUpdate(prevProps, prevState) {
          console.log('Component did update!')
       }
      render() {
          return (
             <div>
                <h3>Hello Lifecycle Methods!</h3>
             </div>
          );
       }
}

Unmounting

This is the last phase of a component's lifecycle which is when the component is unmounted from the DOM. There is only one method in this phase and that is:

componentWillUnmount() This method is invoked before the unmounting of the component takes place. It denotes the end of the components lifecycle

That's all there is to the Component Lifecycles.

Hope you enjoyed the whole write-up, let me know if it helped in the comment section and also let me know if there was anything I missed.

Thanks.

React Components and Props

Kosi Iyiegbu — Fri, 27 May 2022 15:51:13 +0000

Introduction

Component in React are the building blocks of an application. They are reusable code blocks that can be used to build pieces of the UI instead of putting everything under one single file. Also, a component can have other aspects such as states, props, etc.

There are two types of components in React:

Class Components
Functional Components

Let's look at each one now.

Class Components

As the name suggests, a class component is a JavaScript class extended to a React Component. It has a mandatory render() method that returns a JSX element. React was mostly class-based earlier on, so we needed class components for managing states.

This is how it looks:

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

export default App;

Class components aren't really used anymore with the introduction of React hooks. Most professionals recommend using functional components these days.

Functional Components

A functional component is just a regular JavaScript function that returns a JSX element as well but it doesn't use the render() method.

export default function App() {
  return (
   <h1>Hello World</h1>
   );
}

The code above is a functional component that returns a JSX element. Functional components are more easily readable than class components as you can see. It it also easier to work with functional components because class components can be more complex. With the introduction of React hooks, "state" could now be declared in functional components.

Props In React

An important concept of components is how they communicate. React has a special object called props, which means property. It is used to pass data from a parent component to a child component. Props only transport data in a one-way flow, from parent to child component.

Let's look at the use of props in class components, We'll look at a very simple example:

import React from "react";

export class Student extends React.Component {
  render() {
   return (
    <h1>Hello, {this.props.name}</h1>
   );
 }
}

In the code above, we are creating a Student Component that will return the following h1 tag with whatever name property that is passed to it. We will need to import the component into the parent component that is the App.js file and pass the data to it.

import React from "react";
import Student from "./Student"

export default class App extends React.Component {
 render() {
  return (
   <div className="App">
    <Student name="Rex" />
   </div>
  );
 }
}

This would return a simple h1 tag with the name property that was passed to the component as seen below.

Now let's look at how to use props in functional components.

import React from "react";

export default function Student({firstName, lastName}) {
  return (
    <div>
      <h1>First Name: {firstName}</h1>
      <h2>Last Name: {lastName}</h2>
    </div>
  );
}

As you can see, we destructured the props that we want to pass from the parent component.

import React from "react";
import Student from "./Student";

function App() {
  return (
    <div className="App">
      <Student firstName="John" lastName="Doe" />
    </div>
  );
}

export default App;

After passing the props we want in our App.js file what would be rendered will look like this:

Conclusion

We've seen how to pass props between components and why functional components are preferred to class components. Props are useful for passing data but not for manipulating it.

Thank you for Reading!

Creating React App and Understanding Folder Structures

Kosi Iyiegbu — Wed, 18 May 2022 14:07:50 +0000

Hi Everyone! So I'm currently new to using React for web development and decided to write a bit on what I know about creating your first React app as well as some nice folder structures you can incorporate. I'll try to make it easy to understand in this article.

Create React App

So basically React is a JavaScript library for building user interfaces. To get started, you need to open your terminal in the directory you want to create the app and the run the following command:

npx create-react-app my-app

yarn create react-app my-app

You could use anyone of them depending on the packet manager you prefer. I personally prefer using yarn.
This would create a list of files and folders that your app needs to run. When it's done, you should have this:

You can see the list of folders and apps on the left side-bar. If you look at your terminal, you should see the command to start your application. Again depending on your packet manager you should run either of these commands:
npm start or yarn start

You should see your application on your web browser with the spinning React logo.

If you have this on your web browser, Congratulations! you've just created your first React app.

Now let's move on to the folder structures.

Folder Structures

Let's look at the folders that came along with our application.

node_modules : To keep this short, this is a repository of modules/library that your project is using. It contains all dependencies and sub-dependencies specified in package.json used by the React app. This folder shouldn't be tampered with unless of course you're sure of what you are doing.

public: This folder contains static files such as the index.html, assets such as images and audios. You can see the icon image there that shows the react icon on your web browser. This folder also holds a file called manifest.json that holds information about the application such as name, description, author, etc. Inside the index.html file here is where we would import our JavaScript libraries for fonts, our stylesheets and images, you can also set the page title here.

.gitignore: This is the standard file used by the source control tool git to identify the files and folders that are to be ignored while committing the code. Unless this file exists, the create-react-app will not create a git repo in the folder.

package.json: This file contains dependencies and scripts required for the project

This file contains settings for the React app including:

"name" - This is the name of your app.
"version" - This points to the current version your app is using.
"private": true - This is a setting that prevents npm from publishing your react app publicly or accidental publishing of private repositories.
"dependencies" - This contains all the versions and node modules the app needs, allowing the project to install versions of the modules it depends on.
"scripts" - These specify some aliases that are used to access some React commands more efficiently. They're shared amongst everyone using the codebase.

yarn.lock or package-lock.json: Depending on what you used to install your app, you'd have one of these files. It contains information about the dependencies in a project. It helps when working with a team to make sure everyone is working with same version of dependencies and sub-dependencies.

src: This is known as the source folder. They're very important files here such as index.js which is the main JavaScript entry point of the project, App.js which is the main component that contains all the other components. You also have the App.css which is CSS file that corresponds to the App component. The index.css corresponds to the index.js file. The App.test.js file is used to test and verify that the component file renders properly, you can delete this file. The setupTests.js is a file also used for running tests and can be deleted. The last file we have is the reportWebVitals.js which is used to log results to the console or send to particular endpoint and this file can also be deleted.

That's it for the folder structures that we have.

Organizing Folder Structures

The last thing I want to touch is organizing your folders. It's good to adopt a good structure on time. I'll give a list of some extra folders you can make and what to put inside them:

Components: This folder can be used to put reusable components such as buttons, inputs, etc. This way you don't have to recreate the same thing over and over again
Pages: Here you can put the different pages you are working on. You can go ahead to put those pages and their CSS styles in their own individual folders for easier navigation.
Assets: In this folder you can put the images and audio files that will be used in your project.

They are many more folders you can create depending on what you're working on and how far you go but I'll stop here for now.

I hope this article was useful for you guys, please leave a comment and if you liked it, feel free to stay in touch. You can follow me on Twitter

DEV Community: Kosi Iyiegbu

Routing and Using React Router

<BrowserRouter>:

<Routes> and <Router>:

<Link>:

<NavLink>:

useNavigate:

useParams:

useLocation:

Conclusion

State Management, React Hooks and Component Lifecycles

Managing Local State in React

React Hooks

useEffect

useMemo

Component Lifecycles

Initialization

Mounting

Updating

Unmounting

React Components and Props

Introduction

Class Components

Functional Components

Props In React

Conclusion

Creating React App and Understanding Folder Structures

Create React App

Folder Structures

Organizing Folder Structures

`<BrowserRouter>`:

`<Routes>` and `<Router>`:

`<Link>`:

`<NavLink>`:

`useNavigate`:

`useParams`:

`useLocation`: