Я следую и читаю все руководства по преобразованию шаблона (html, css, js) в React компонент, но без какого-либо результата. Это проект электронной коммерции в React, Redux и Node. Все, что я хочу, это добавить адаптивный шаблон, который пользователь может использовать с мобильного устройства, с хорошим пользовательским интерфейсом. Как это преобразовать? В index.html проекта React я связал с файлами .css и событиями .js
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
