Routing with React - not v6 compatible (yet)

katbruce — Tue, 25 Apr 2023 22:34:36 +0000

One of the most useful attributes of React is the ability to navigate between multiple pages or views is a fundamental element of any website. Routing in React allows us to create and navigate between different routes in our application adds even more functionality to your React apps. The routing protocol within React's routing library makes the process much more streamlined than it is with vanilla JavaScript.

React Router

React Router is a third-party library that provides routing functionality in React applications. It is the most popular routing library for React and is widely used in production applications.

This tutorial is assuming that you already have a react app created, if not: create a new app before starting any of the below instructions.

File Structures

Assuming there's already a src folder, inside of that create a file for each of the routes you'll need, a header file, and your App.js.

Routes

In this example our routes will be Home, About, and Contact.

A framework for each of those files should follow the example below:

import React from "react";

function Home() {
  return (
    <h1>Home Page</h1>;
    //anything else you think should go in this component
  );
}
export default Home;

Header

Next we focus on a Header file. Create Header.js in the src folder and we will create a navigation bar to make a user-friendly way to navigate between pages in your application. _

We import Link from "react-router-dom" and React from "react". Then, using an unordered list we identify the relative links to all of the pages we have.

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

function Header() {
  return (
    <>****
      <header>
        <ul >
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </header>
    </>
  );
}
export default Header;

App.js

Then, we move to the App.js file. This is where we use the router to route to each of the pages we linked in the header.

To define routes in React, we need to import the react-router-dom library's key elements: Switch and Route. Next, we import the Header and each component we are routing to. If there are issues with this part, make sure you exported the functions created in their respective files.

import { Route, Switch } from "react-router-dom";
import Header from './Header'
import Home from './Home';
import About from './About';
import Contact from './Contact';

To use what we've imported, we use the code below to get a functioning router.

function App() {
  return (
    <div className="App">
      <Header />

      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route exact path="/about">
          <About />
        </Route>
        <Route exact path="/contact">
          <Contact />
        </Route>
      </Switch>
    </div>
  );
}

export default App;

Index.js

Then, update your index.js to use BrowserRouter:

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

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  rootElement
);

Styling

After this we should have a functioning nav-bar. But to make it even better, we should add some css styling. By adding flexbox, each routing link should be inline with each other, which is objectively how any nav-bar should look. In the css file, add the following code:

header ul {
  display: flex;
}

header ul li {
  list-style: none;
  padding: 10px;
}

header li a {
  text-decoration: none;
}

To see the code in Action: check out the code on Code Sandbox

Variable Scope in JavaScript: Beginner's Guide

katbruce — Thu, 06 Apr 2023 20:41:25 +0000

For any code more complex than console logging "Hello world!", variables are necessary for programming in JavaScript. The scope of a variable is the region in which each variable can be called and used.

A few factors affect a variable's scope: where it is initially declared and what declaration keyword is used when initializing the variable.

Variable Types

The three types of declarations are const, let, and var.

const
Const, or constant, variables are permanently set to whatever value they are initially declared with. When a value will not change within the scope of the program (or code block), a const variable is ideal to prevent accidental reassignments. Some common uses for the const variable are for mathematic constants, names (that are unchanging), and for grabbing HTML elements for DOM manipulation (which is what I’ve been using const variables for the most lately). These constant variables can be either block or global scope, depending on where they are declared in your code.

let
Let variables can be reassigned as many times as needed within the scope. Some examples of where this works well are for iterators, variables taking inputs and summations, along with countless others. Let variables, like const variables, can be either block or global scoped.

var
Var is a function-scope variable that is similar to let in that it lets you reassign the variable to any value as many times as needed. The issue with the var keyword is that there is a potential for hoisting, or using the variable before the declaration, which can create bugs related to scope. These can be irritating to debug, so the best practice is to use let or const declarations instead.

Scope

Global
A global variable is declared outside any curly brackets. It belongs to no function, loop, or other blocks of code, which means that every code block in your program will have access to that variable. A global variable can be declared with any declaration: var, let, or const.

Block
A block variable is any variable declared with let or const within a code block. This variable is only accessible within the code block it was declared in. A code block is anything within curly brackets; this could be a function, for loop, if statement, etc.

Function
A function scope variable that is declared with var. It works similarly to a block scope but is only applicable to functions, not other types of code blocks. Noted above, it is typically best to just use a block scope variable in place of a function scope variable to avoid scope related bugs.

Example

const test1 = 1; //constant global variable
let test2 = 2; //not constant global variable
function foo(){
   let test3 = 3; //not constant block scope variable
   const test4 = 4;//constant block scope variable
   let test5 = test1 + 5;//block scope variable using 
                         //globally declared variable
   console.log(test1, test2, test3, test4, test5);
     //returns 1 2 3 4 6, all variables log to console
} 
console.log(test1, test2, test3, test4, test5)
   //returns 1 2 and errors(out of scope) for test3, test4, test5

The code above shows how each type of variable is declared and how it performs in global and block scope.

DEV Community: katbruce