Как добавить шаблоны html & js в компоненте react?

Question

[SaidvaliS]

Я следую и читаю все руководства по преобразованию шаблона (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

Comments

[Иван В]

Судя по коду, вы просто взяли HTML и скопировали в React-компонент. Это так не работает.
Если у вас уже есть какая-то логика на чистом JS, ее придется переписать под React.