Intro to React-Router-DOM

If you are new to utilizing React alongside JavaScript in your application, I would like to introduce a very special node package called "react-router-dom".

Today, we will be discussing:

• What is node package manager(NPM)?
• What is a node package?
• How do we install node packages to our application?
• What is "react-router-dom"?
• How can "react-router-dom" elevate an application?

Let's get started!

What is node package manager?

NPM is a manager for Node.js packages. NPM provides countless packages that developers can use -- for free.

What is a node package?

A package is a set of prewritten code that provides instant functionality and standardization.

How doe we install node packages to our application?

We can install node packages using a command in the terminal:

npm install "react-router-dom"

This will automatically give your application the prewritten functionality.

You can see your installed packages in the "package.json" file. This is what is may look like:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
         "react-router-dom": "^5.2.0"
  }
}

Stored under "dependencies", "react-router-dom" is listed with its version.

What is "react-router-dom"?

Now that we can guess that "react-router-dom" is a node package, what does it do?

The node package provides a standard for routing in React. Let's look at an example:

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Home from './Home.js'

export default class App extends React.Component {

   render() {
       return (
         <div className="container">
            <Router>
               <Route exact path='/home' component={<Home/>} />
           </Router>
         </div>
       )
   }

}

Within the example above, I do a few things:

• I import "Route" from 'react-router-dom'.
• I import "BrowserRouter" from 'react-router-dom' and alias it as "Router".
• I import my Home component from it's .js file location.
• I then declare a class component called "App".
• Within my App component, I render and return a div element.
• Within the div, I render a Router component that contains a single route to a component called "Home".

"Router" reflects the collection of navigational components (the Routes) that houses the various URL paths.

"Route" provides the route itself by an "exact path" attribute and provides the component to be rendered using the "component" attribute.

How can "react-router-dom" elevate an application?

React-router-dom does a fantastic job of syncing the UI to the components in a React application. A Route allows a possible URL change to still maintain the same React component. It also provides a standardization that us developers always strive and search for.

In summary, "react-router-dom" shows us another way in which React abides by declarative programming: our Routes tell us what we want to achieve, not how.

⚡Thanks for reading!⚡
☁️Comment below☁️