DEV Community: skkyfallen

Intro to REACT-ROUTER-DOM

skkyfallen — Thu, 16 Jun 2022 09:09:07 +0000

React Router is a client-side and server-side routing module for React, a JavaScript library for creating user interfaces. React Router works with React on the web, node.js servers, and React Native. To add the ability to route components, you'll need to import the BrowserRouter component from React Router.

The react-router-dom package makes creating new routes a breeze. To begin, you wrap the tag around the entire program. This is done so that we may access the browser's history object. Then you define your router links, as well as the components that each route will use. One of the most popular React routing frameworks is React Router. The library is built with user-friendly components to let you create a declarative routing system for your app. As a result, you can specify which of your components has a specific route. Declarative routing allows you to construct human-readable routes, making it easier to maintain your application architecture.
Note: Some components like switch are now outdated in the latest version of react-router-dom but this is just a general tutorial.

INSTALLING AND GETTING STARTED WITH REACT-ROUTER-DOM

The process of Installing react Router is very simple. I will breakdown these steps below.

React router can easily be installed using npm.

npm install – -save react-router-dom

After this is done installing you need to add its components to your react application. This is done through importing and it can be carried out by entering the following:

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

Now let us talk about some core components of the React-Router-Dom which we just imported.

Route Component: Within the Router component, we declare routes as children. We can specify as many routes as we like, but each route, path, and component (or render) must have at least two props:

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

export default function App() {
  return (
    <Router>
      <Route path="/about" component={About} />
    </Router>
  );
}

function About() {
  return <>about</>   
}

The path property describes where a certain route is situated in our app.

For a about page, for example, we could want the path '/about' to be accessible.

To display a specific component for our path, we use the render or component props.

Only a reference to a single component can be passed to component props, however render is more commonly used to add conditional logic to render one component or another. You can either use a reference to a component or a function to render:

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

export default function App() {
  return (
    <Router>
      <Route path="/" render={() => <Home />} />
      <Route path="/about" component={About} />
    </Router>
  );
}

function Home() {
  return <>home</>;
}

function About() {
  return <>about</>;
}

Switch Component: Note: Switch is now outdated. We'll notice something very very very weird when we start adding multiple routes.

Assume we have a route for the home page and a route for the about page. Despite the fact that we define two paths, '/' and '/about,' when I visit the about page, I'll see both the home and about components.
We can fix this with the exact prop, on the home route to make sure that our router matches exactly the path '/' instead of '/about':

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

export default function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

When it comes to switching between different routes that our router should display, there is a dedicated component called Switch that you should use if you have numerous routes in your router.

The router's switch component should be included, and we can use it to place all of our routes:

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

export default function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

The switch component searches all of its child routes for the first one with a path that matches the current URL.

Because we have several routes and multiple plate pages in our app, but only want to show one page at a time, this component is what we want to utilize in most circumstances for most apps.

If you need numerous pages to be displayed at the same time for some reason, you might wish to skip the switch component.

NavLink Component: In addition, the React Router DOM provides a NavLink component, which is useful if we want to apply some custom styles.

If we're on the current path that the link points to, we can use active link styles to tell our users what page they're on just by looking at the link.

If our users are on the homepage, for example, we can inform them of this by utilizing the activeStyle prop to make our link bold and red when they're on the homepage:

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

export default function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

function Navbar() {
  return (
    <nav>
      <NavLink
        activeStyle={{
          fontWeight: "bold",
          color: "red"
        }}
        to="/"
      >
        Home
      </NavLink>
      <NavLink activeClassName="active" to="/about">
        About
      </NavLink>
    </nav>
  );
}

If you don't want to include inline styles or want more reusable styles to serve the same job as activeStyle, you can set the activeClassName prop.

useLocation Hook: The useLocation hook has the same data as the useHistory hook.

It's worth noting that if you need both location data and history to move your user programmatically, you should useHistory. If you only require location data, you can use useLocation or get all of the location data on an object that is identical to the data provided on history. location:

import { useLocation } from "react-router-dom";


function About() {
  const location = useLocation();

  console.log(location.pathname); // '/about'

  return (
    <>
     <h1>The about page is on: {location.pathname}</h1>
    </>
  );
}

useParams: When it comes to routes, one thing we didn't mention is that we can naturally design dynamic routes. This refers to routes that aren't pre-determined and can contain any amount of characters.

In circumstances where we have a blog post with a unique slug, for example, dynamic routes are useful. Given that our blog post slug can be completely different, how do we ensure that we display the relevant data and components?

A colon: must be used to declare a route parameter on a specific route. It may look like this if I wanted to establish a dynamic route for a blog post component, "/blog/:postSlug":

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

export default function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/blog/:postSlug" component={BlogPost} />
      </Switch>
    </Router>
  );
}

function Home() {
  return <>home</>;
}

function BlogPost() {
  return <>blog post</>;
}

The relevant component, or whatever the slug is, is now being matched. But how do we get that post slug data into our BlogPost component?

Using the useParams hook, we may access any route params of a declared route and its associated component.

useParams will return an object with properties matching our route parameters (in this case, postSlug). We can use object destructuring to access and define postSlug as a variable right away:

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

export default function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/blog/:postSlug" component={BlogPost} />
      </Switch>
    </Router>
  );
}

function Home() {
  return <>home</>;
}

function BlogPost() {
  const [post, setPost] = React.useState(null);
  const { postSlug } = useParams();

  React.useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/posts/${postSlug}`)
      .then((res) => res.json())
      .then((data) => setPost(data));
  }, [postSlug]);

  if (!post) return null;

  return (
    <>
      <h1>{post.title}</h1>
      <p>{post.description}</p>
    </>
  );
}

Intro To creating a React App and Understanding React Folder Structure.

skkyfallen — Mon, 23 May 2022 16:37:52 +0000

Good Day Everyone ! . My name is Kene. I'm relatively new to world of javascript and Web Development in general but today i have decided to Write a bit on the javascript framework which is ReactJs. I would like to shed some light on the processes of creating a ReactJs application and also understanding the Folder Structure of ReactJS.

INSTALLING REACT ON LOCAL MACHINE

Before we start talking about creating a react app, there are some prerequisites which we would need to install to get our react app up and running. The steps to installing these prerequisites are as follows :

NodeJs: Node.js provides a runtime environment to execute JavaScript code from outside a browser. NPM, the Node package manager is used for managing and sharing the packages for React.

NPM (Node Package Manager) will be installed along with Nodejs. Node.js can be downloaded and installed from the official NodeJs website.

Create-React-App Tool: This tool is used to create react applications easily from our system. You can install this at the system level or temporarily at a folder level. We will install it globally by using the following command.

npm install -g create-react-app

CREATING A REACT APP

After the create-react-app has been installed we can now create our first react app. Depending on where we would like to create our react app we can lets say create a folder where we would like to save our react app. For example we can create a folder C:\React-Stuff. We can then direct our Command prompt to this folder using the command cd C:\React-stuff.note:CD stands for Change Directory. Then we can now create our new react app using the command

yarn create react-app my-react-app

npx create-react-app my-react-app

Also note that you can't use Uppercase letters in the naming of your react app. Once the whole initialization of the app is done you should see the following in your VsCode Explorer .

This is not yet done since you still need to get your react app running. In order to do this have to go to your terminal to initiate your react app by entering the following commands:

cd my-react-app

then

npm start

yarn start

depending on which you used to create the react app.
This should then automatically open your browser and you should be met with the initial react landing page with the address usually as
http://localhost:3000. If it doesn't open automatically you can still visit http://localhost:3000.The page you are met with should Look like this:

The contents of the my-react-app folders will be explained in the next section.

React Folder Structure

package.json: The way the entire react app is meant to look and behave is contained in the package.json file:

We can see the following attributes:

name - Represents the app name which was passed to create-react-app.
version - Shows the current version.
dependencies - List of all the required modules/versions for our app. By default, npm would install the most recent major version.
devDependencies - Lists all the modules/versions for running the app in a development environment.
scripts - List of all the aliases that can be used to access react-scripts commands in an efficient manner. For example, if we run npm build in the command line, it would run "react-scripts build" internally.
The dependencies which are shared by our application can go to the assets directory. These can include images, etc. They would represent a single location for files external to our main project itself.

manifest.json This file is used to describe our app e.g. On mobile phones, if a shortcut is added to the home screen

When our web app is added to user's home screen, it is this metadata which determines the icon, theme colors, names, etc.

favicon.ico This is the icon image file used by our project. It is also linked inside index.html and manifest.json.

gitignore: gitignore file tells Git which files to ignore when committing your project to the GitHub repository.
logo.svg: This contains the logo which is currently being used on intitial react landing.
Apptests.js: When you create a new project with create-react-app it comes with a basic test for App. js component called App. test. js. This is the normal naming for tests with Jest.
reportWebVitals.js: Create React App includes a built-in tool for measuring the real life performance of your app. It is called reportWebVitals and it measures a set of metrics that aim to capture the user experience of a web page.
App.js:

App.js is basically an embodiment of all your components in your react App. App Component is the main component in React which acts as a container for all other components.

Index.js: Index.js is basically the entry point to your react application.

Conclusion

These explanations are aimed at explaining the basic steps to creating a react app and understanding its basic folder structures.
For more Information you can visit ReactJs.org