React JS Working Navbar Component in Bootstrap

Make a working Navbar component in react.

First import the links 

    
        
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" rel="stylesheet"></link>
<link crossorigin="anonymous" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


React

    
        
import React from 'react'
import { Link } from 'react-router-dom'

export default function Navbar() {
    return (
        &lt;&gt;
            <nav classname="navbar navbar-expand-md bg-light navbar-light">
                <link classname="navbar-brand" to="/"></link>Social
                <button classname="navbar-toggler" data-target="#collapsibleNavbar" data-toggle="collapse" type="button">
                    <i classname="fal fa-bars"></i>
                </button>
                <div classname="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul classname="navbar-nav">
                        <li classname="nav-item">
                            <link classname="nav-link" to="/"></link>Home
                        </li>
                        <li classname="nav-item">
                            <link classname="nav-link" to="/about"></link>About
                        </li>
                    </ul>
                    <div classname="d-flex navbar-nav">
                        <li>
                            <link classname="nav-item btn-danger btn mx-3" to="/login"></link>Login
                        </li>
                        <li>
                            <link classname="nav-item btn border border-primary" to="/"></link>Sign Up
                        </li>
                    </div>
                </div>
            </nav>
        &lt;/&gt;
    )
}



How to Learn React Step by Step:
React JS is a very popular web framework. It is a free and open-source front-end JavaScript library for building user interfaces or UI components. React JS is maintained by Facebook. So, if you are a web developer, you should be aware that everythin gwe see on the web is just html, css and the functioning things are simply javascript. You must have worked with html and css to make simple websites or standalone pages. But, what if you are building a large commercial website with many pages. There are a lot things to know about web development and many compplexitie4s in doing them like routing without reloading the pages.

So, React makes things much more easier and developer friendly to handle. Thus for a modern UI developer, you should learn this. Not only for UI, React helps in making a complete web app structure. This is not just for React. There are other JS libraries also like Angular, that you can learn to create modern web apps. But, in this post, we are discussing about React JS... Further Reading

0 Comments