Develop Reference

Converting Ecommerce template to React componenet

I am following and reading all guides to convert template(html, css, js) to react component but without any result. This is an eccommerce project in react, redux and node. All I want it to add responsive template that user can use from mobile too with good UI.
How to convert it? In index.html of React project I linked to .css and js events files
import { useDispatch, useSelector } from 'react-redux'
import { LinkContainer } from 'react-router-bootstrap'
//import { Navbar, Nav, Container } from 'react-bootstrap';
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import { Container } from 'react-bootstrap'
import { NavDropdown } from 'react-bootstrap'
import Logo from '../assets/images/divano-logo.svg'
const Header = () => {
const dispatch = useDispatch()
const userLogin = useSelector((state) => state.userLogin)
const { userInfo } = userLogin
const logoutHandler = () => {
dispatch(logout())
}
return (
<>
<nav>
<div className='container'>
<a href='index.html' className='logo'>
<img src={Logo} alt='' width='130' height='55' />
</a>
<div className='navigation navigation-top clearfix'>
<ul>
<li>
<a href='#' className='open-login'>
<i className='icon icon-user'></i>
</a>
</li>
<li>
<a href='#' className='open-search'>
<i className='icon icon-magnifier'></i>
</a>
</li>
<li>
<a href='#' className='open-cart'>
<i className='icon icon-cart'></i> <span>4</span>
</a>
</li>
</ul>
</div>
<div className='navigation navigation-main'>
<a href='javascript:void(0);' className='open-login'>
<i className='icon icon-user'></i>
</a>
<a href='#' className='open-search'>
<i className='icon icon-magnifier'></i>
</a>
<a href='#' className='open-cart'>
<i className='icon icon-cart'></i> <span>4</span>
</a>
<a href='#' className='open-menu'>
<i className='icon icon-menu'></i>
</a>
<div className='floating-menu'>
<div className='close-menu-wrapper'>
<span className='close-menu'>
<i className='icon icon-cross'></i>
</span>
</div>
<ul>
<li>
<a href='#'>
Home{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
<div className='navbar-dropdown navbar-dropdown-single'>
<div className='navbar-box'>
<div className='box-full'>
<div className='box clearfix'>
<ul>
<li className='label'>Homepages</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<a href='#'>
Pages{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
<div className='navbar-dropdown navbar-dropdown-single'>
<div className='navbar-box'>
<div className='box-full'>
<div className='box clearfix'>
<ul>
<li className='label'>Addons</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<a href='#'>
Blog{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
<div className='navbar-dropdown navbar-dropdown-single'>
<div className='navbar-box'>
<div className='box-full'>
<div className='box clearfix'>
<ul>
<li className='label'>Blog</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<a href='#'>
Shop{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
<div className='navbar-dropdown navbar-dropdown-single'>
<div className='navbar-box'>
<div className='box-full'>
<div className='box clearfix'>
</div>
</div>
</div>
</div>
</li>
<li>
<a href='#'>
Checkout{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
</li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div className='search-wrapper'>
<input className='form-control' placeholder='Search' />
<button className='btn btn-outline-dark btn-sm'>Search now</button>
</div>
<div className='login-wrapper'>
<div className='h5'>Sign in</div>
<form>
<div className='form-group'>
<input
type='email'
className='form-control'
id='exampleInputEmail1'
placeholder='Email'
/>
</div>
<div className='form-group'>
<input
type='password'
className='form-control'
id='exampleInputPassword1'
placeholder='Password'
/>
</div>
<div className='form-group'>
<a
href='#forgotpassword'
className='open-popup btn btn-main btn-sm'
>
Forgot password?
</a>
<a
href='#createaccount'
className='open-popup btn btn-main btn-sm'
>
Don't have an account?
</a>
</div>
<button
type='submit'
className='btn btn-block btn-outline-primary'
>
Submit
</button>
</form>
</div>
<div className='cart-wrapper'>
<div className='checkout'>
<div className='clearfix'>
<div className='row'></div>
<hr />
</div>
</div>
</div>
</div>
</nav>
</>
)
}
export default Header

React Router Shows Blank Page When Using <Link> . Stuck on this problem since a while

Here is the code of a component named topbar which refers to navbar of a page,
as soon as I save the page it appears to be blank.
Please help me to debug it as I am stuck for a while on it.
As soon as I comment the Link part , the page starts working instantly.
import { Link } from "react-router-dom";
import "./topbar.css";
export default function Topbar() {
const user = true;
return (
<div className="top">
<div className="topLeft">
<i className="topIcon fab fa-facebook-square"></i>
<i className="topIcon fab fa-instagram-square"></i>
<i className="topIcon fab fa-pinterest-square"></i>
<i className="topIcon fab fa-twitter-square"></i>
</div>
<div className="topCenter">
<ul className="topList">
<li className="topListItem">
<Link className="link" to="/">
HOME
</Link>
</li>
<li className="topListItem">ABOUT</li>
<li className="topListItem">CONTACT</li>
<li className="topListItem">
<Link className="link" to="/write">
WRITE
</Link>
</li>
{user && <li className="topListItem">LOGOUT</li>}
</ul>
</div>
<div className="topRight">
{user ? (
<Link className="link" to="/settings">
<img
className="topImg"
src="https://images.pexels.com/photos/1858175/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
alt=""
/>
</Link>
) : (
<ul className="topList">
<li className="topListItem">
<Link className="link" to="/login">
LOGIN
</Link>
</li>
<li className="topListItem">
<Link className="link" to="/register">
REGISTER
</Link>
</li>
</ul>
)}
<i className="topSearchIcon fas fa-search"></i>
</div>
</div>
);
}

how to redirect new page in react js

I am stuck with a problem. When I am trying to click on Signup button which is in inside the Signin dropdown, it's not open new page, it is came below the footer. I want to open new page when I click on signup button.
Can anyone tell me how can I do it
App.js file
This is the app.js file where I create my route
import './App.css';
import Navbar from './components/Navbar';
import Banner from './components/Banner';
import Cards from './components/Cards';
import Chat from './components/Chat';
import Footer from './components/Footer';
import Signup from './components/Signup';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
const App = () => {
return (
<BrowserRouter>
<div className="App">
<Navbar />
<Banner />
<Cards />
<Chat />
<Footer />
<Switch>
<Route exact path='/signup' component={Signup} />
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
Navbar.js
This is the navbar.js file
import React from 'react';
import './Navbar.css';
import {Link} from 'react-router-dom';
const Navbar = () => {
return (
<div className="container">
<nav class="navbar navbar-expand-lg navbar-light ">
<a class="navbar-brand" href=""><img src="https://secure.skypeassets.com/content/dam/scom/images/logos/re1mu3b.png" alt="coco-cola" className="coco mr-3" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="navbar-brand ml-3" href=""><b>Skype</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skype to Phone</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skype Number</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Meet Now</a>
<a class="dropdown-item" href="#">Skype Manager</a>
<a class="dropdown-item" href="#">Skype with Alexa</a>
<a class="dropdown-item" href="#">Skype for content Creator</a>
<a class="dropdown-item" href="#">Skype For Business</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Get Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Skype Support</a>
<a class="dropdown-item" href="#">Blog</a>
<a class="dropdown-item" href="#">Community</a>
<a class="dropdown-item" href="#">About Skype</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link" href="#">Hosting a meeting</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Sign In
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#" style={{textDecoration:'none'}}><i class="fas fa-user"></i> My Account</a>
<Link to='/signup' class="dropdown-item" href="#" style={{textDecoration:'none'}}>Sign Up</Link>
</div>
</li>
</ul>
</div>
</nav>
</div>
)
}
export default Navbar;
Signup.js
this is the page where i want to redirect.
import React from 'react'
const Signup = () => {
return (
<div>
<h1>Hello</h1>
</div>
)
}
export default Signup;

You're misusing react-router-dom within App.js. Any components that you add to App.js outside of a switch will display no matter what. The switch is just used to change what component is being rendered within the tag. So in your App.js code, you are guaranteeing that your page will always have Navbar, Banner, Cards, Chat, and Footer rendered above Signup. react-router-dom is better suited for creating a general page layout in App.js, then rendering different components within it.
For this, you'll want to create two files:
Homepage.js
Signup.js
First, modify App.js and remove any components that will not be universal to every page on your site. Maybe you'll only want to keep the header:
App.js
const App = () => {
return (
<BrowserRouter>
<div className="App">
<Navbar />
<!-- You'll insert your switches here -->
<Footer />
</div>
</BrowserRouter>
);
}
You'll use your Homepage.js file to add in components unique to the homepage:
const Homepage = () => {
return (
<div className="Homepage">
<Banner />
<Cards />
<Chat />
</div>
);
}
You can implement your Signup page however you want. Then modify your new App.js to include the switches:
App.js
const App = () => {
return (
<BrowserRouter>
<div className="App">
<Navbar />
<Switch>
<Route exact path='/homepage' component={Homepage} />
<Route exact path='/signup' component={Signup} />
</Switch>
<Footer />
</div>
</BrowserRouter>
);
}
This design will guarantee that every page has a header and footer, as those are the two components outside of switches in App.js.

Nav Bar not Hiding with react state

I have two navbars in my site. One is only displayed on small screens with a media query which is the one I am having issues with. I have a react context that controls the visibility of both navs with the same boolean variable when a slideshow is displayed. When the slide show is displayed I want to hide the navs. The large nav has this functionality, but the small nav never shows. Before adding this react context the navbar would display as normal but now it is never displayed.
small navbar render:
render() {
return (
<div className="container-fluid">
<div id="initialImage">
<div className="d-fixed d-md-none">
<DisplayContext.Consumer>
{(context) =>
context.state.isNavVisibile ? (
<nav className="navbar bg-dark navbar-dark fixed-top">
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarToggleContent"
aria-controls="navbarToggleContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span></span>
<span></span>
<span></span>
</button>
<div
className="collapse navbar-collapse"
id="navbarToggleContent"
>
<ul className="navbar-nav">
<li className="nav-item">
<a
className="nav-link text-white font-weight-bold"
href="#vintage"
>
Shop Vintage
</a>
</li>
<li className="nav-item">
<a
className="nav-link text-white font-weight-bold"
href="#e"
>
Shop Euiubi
</a>
</li>
<li className="nav-item">
<a
className="nav-link text-white font-weight-bold"
href="#about"
>
A Message from the Creator
</a>
</li>
<li className="nav-item">
<a
className="nav-link text-white font-weight-bold"
href="#"
>
Contact
</a>
</li>
</ul>
</div>
</nav>
) : null
}
</DisplayContext.Consumer>
</div>
<Navigation />
<div id="titles" className="clearfix greeting"></div>
<ScrollAnimation />
</div>
</div>
);
}
}
Display Context:
export const DisplayContext = createContext();
export class ContextProvider extends Component {
state = {
isNavVisible: true,
};
render() {
return (
<DisplayContext.Provider
value={{
state: this.state,
hideNav: () =>
this.setState({ isNavVisible: !this.state.isNavVisible }),
}}
>
{this.props.children}
</DisplayContext.Provider>
);
}
}
on click handler to open and close slideshow
toggleSlideVisibility = () => {
const dcontext = this.context;
dcontext.hideNav();
this.setState({ slidesVisible: !this.state.slidesVisible });
};

React & Bootstrap 4 Navbar not positioning correctly

I am building a web app using React/Redux and Bootstrap4 (I am not reactstrap). The app has a navbar at the top of the page, however, when the navbar renders it is not aligned to the top of the browser but moved down (see below - note: there is another sidebar link above 'patients' that is being covered by the navbar)
I've been through my jsx and cannot figure out what is causing the navbar to not position correctly - it should be at the top and fixed when scrolling (see below).
I've listed the relevant code below (just the components' render funcitons) - if I've missed any relevant parts, comment and I will edit. The react app was built using create-react-app.
index.html
<html>
<head>
...
</head>
<body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>...required scripts...</script>
</body>
</html>
App.js
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<div className="App">
<Route exact path="/login" component={LoginPage} />
<Route exact path="/dashboard" component={Dashboard} />
</div>
</Router>
</Provider>
);
}
}
Dashboard.js
class Dashboard extends Component {
render() {
return (
<>
<Navbar />
<div className="app-body">
<Sidebar path="dashboard" />
</div>
</>
);
}
}
Navbar.js
class Navbar extends Component {
onLogoutClick = e => {
e.preventDefault();
this.props.logoutUser();
};
render() {
const { user } = this.props.auth;
return (
<header className="app-header navbar">
<button className="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
<span className="navbar-toggler-icon" />
</button>
<a href="#" className="navbar-brand">
<img src={logo} className="navbar-brand-full" height="35" alt="expo" />
<img src={sygnet} className="navbar-brand-minimized" height="30" width="30" alt="expo" />
</a>
<button className="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show" >
<span className="navbar-toggler-icon" />
</button>
<ul className="nav navbar-nav ml-auto">
<li className="nav-item dropdown px-3">
<a href="" className="nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >
{user.name}
</a>
<div className="dropdown-menu dropdown-menu-right">
<Link to="/profile" className="dropdown-item">
<i className="fa fa-user" />
Profile
</Link>
<button onClick={this.onLogoutClick} className="dropdown-item" style={{ cursor: 'pointer' }} >
<i className="fas fa-power-off" />
Logout
</button>
</div>
</li>
</ul>
</header>
);
}
}
Sidebar.js
return (
<div className="sidebar">
<nav className="sidebar-nav">
<ul className="nav">
<li className={liDashboard}>
<Link to="/dashboard" className={linkDashboard}>
<i className="nav-icon fas fa-fw fa-columns" /> Dashboard
</Link>
</li>
<li className={liPatients}>
<Link to="/patients" className={linkPatients}>
<i className="nav-icon fas fa-fw fa-users" /> Patients
</Link>
</li>
<li className={liInvoices}>
<Link to="/invoices" className={linkInvoices}>
<i className="nav-icon fas fa-fw fa-dollar-sign" /> Invoices
</Link>
</li>
<li className={liProfile}>
<Link to="/profile" className={linkProfile}>
<i className="nav-icon fas fa-fw fa-user" /> Profile
</Link>
</li>
<li className="nav-title"> Resources</li>
<li className={liDocuments}>
<Link to="/documents" className={linkDocuments}>
<i className="nav-icon fas fa-file" /> Documents
</Link>
</li>
<li className={liEducation}>
<Link to="/education" className={linkEducation}>
<i className="nav-icon fas fa-graduation-cap" /> Education
</Link>
</li>
</ul>
</nav>
<button className="sidebar-minimizer brand-minimizer" type="button" />
</div>
);
};