DEV Community

loading...

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

Hemant Govekar
Worked on ASP.Net, React, Javascript, CSS.
・2 min read

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

Alt Text

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;
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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"]
}
Enter fullscreen mode Exit fullscreen mode

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}}],
      },
    ],
  },
};

Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)