Reactjs video #3: Navigation Header using scss and react-router-dom

The below code base is a supporting article for my youtube reactjs series.
Playlist Link

Video Link

Git Link

My plan for creating the entire video series is listed at the end of this article.

Creating Header Navigation

App.js

import React from 'react';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import Home from './components/Home';
import Users from './components/Users/Users';

import './App.css';
import Header from './components/Header/Header';
import Contact from './components/Contacts/Contact';
import About from './components/About/About';

const App = () => {
  return (
    <Router>
      <Header></Header>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/users" component={Users} />
        <Route path="/contact" component={Contact} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
};

export default App;

App.scss

body {
  margin: 0px;
  padding: 0px;
}

.header-wrapper {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 2rem;
  font-size: 15px;
  background-color: #3f3d56;
  border: 1px solid #ccc;
  box-sizing: 0 2px 2px rgba(black, 0.2);
  flex-direction: row;
  text-align: center;
  align-items: center;
  color: #fff;

  .logo {
    .brand {
      color: #fff;
      text-decoration: none;
    }
  }

  .nav-wrapper {
    .navigation,
    .navigation a,
    .navigation a:hover,
    .navigation a:focus {
      color: #fff;
      padding: 5px 10px;
      text-decoration: none;
    }
  }
}

.activeClass {
  border-bottom: 1px solid red;
}

Header.js

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

const Header = () => {
  return (
    <nav className="header-wrapper">
      <div className="logo">
        <NavLink to="/" className="brand">
          Hemant's Website
        </NavLink>
      </div>
      <div className="nav-wrapper">
        <div className="navigation">
          <NavLink to="/about" activeClassName="activeClass">
            About
          </NavLink>
          <NavLink to="/contact" activeClassName="activeClass">
            Contact
          </NavLink>
          <NavLink to="/users" activeClassName="activeClass">
            Users
          </NavLink>
        </div>
      </div>
    </nav>
  );
};

export default Header;

babel.config.json

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  },
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

webpack.config.json

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {test: /\.js?$/, loader: 'babel-loader', exclude: /node_modules/},
      {test: /\.css$/i, use: ['style-loader', 'css-loader']},
      {
        test: /\.svg$/i,
        use: [{loader: 'file-loader', options: {esModule: false}}],
      },
    ],
  },
};

I am planning to create a video tutorial series for ReactJs. Would you be interested ?? Please comment and let me know.

Following would be the plan

• Create a basic app with webpack babel. (Done) Link
• Add routing and get a simple react page ready.(Done) Link
• Adding Sass for css.(Done) Link
• UseFetch Hooks
• Call jsonplaceholder API in the application.
• Input form Validations in react application.
• Firebase application for CRUD.
• Tomcat deployment for ReactJs.
• Advance Topics....

PlayList

Subscribe my channel to watch the videos