router

@types/assets/index.d.ts

@@ -2,3 +2,9 @@ declare module '*.png' {
   const path: string;
   export default path;
 }
+
+declare module '*.svg' {
+  const path: string;
+  export default path;
+}
+

package.json

@@ -14,8 +14,12 @@
   "dependencies": {
     "fork-ts-checker-webpack-plugin": "^9.1.0",
     "handlebars-loader": "^1.7.3",
+    "install": "^0.13.0",
+    "npm": "^11.4.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.56.4",
+    "react-router": "^7.6.0",
     "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1"
   },

src/app.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router';
+import HomePage from './pages/home';
+import CreatePage from './pages/create';
+import { routes } from './routes';
+
+
+const App = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path={routes.home} element={<HomePage />} />
+        <Route path={routes.create} element={<CreatePage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default App;

src/components/logger.ts

@@ -1 +0,0 @@
-console.log('hello world');

src/index.tsx

@@ -2,11 +2,13 @@ import { createRoot } from 'react-dom/client';
 import React from 'react';
 import './style.css';
 import HomePage from './pages/home';
+import App from './app';
 
 const rootHtmlElement = document.getElementById('root');
 if (rootHtmlElement) {
+  console.log('Запуск react');
   const root = createRoot(rootHtmlElement);
-  root.render(<HomePage />);
+  root.render(<App />);
 }
 
 // import { initCarusel } from './components/carusel'

src/pages/create/index.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import Header from '../../widgets/header';
+import { useForm, SubmitHandler } from 'react-hook-form';
+
+const CreatePage = (): React.ReactElement | string => {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm({
+    mode: 'onBlur',
+  });
+  const onSubmit = (data: unknown) => console.log(data);
+
+  return (
+    <>
+      <Header />
+      <main>
+        <h1>Create</h1>
+        <form
+          style={{ display: 'flex', flexDirection: 'column' }}
+          onSubmit={handleSubmit(onSubmit, (errors) => {
+            console.log('valid form', errors);
+          })}
+        >
+          <label>
+            Name
+            <input
+              type="text"
+              placeholder="DD.MM.YYYY"
+              {...register('name', {
+                required: 'Поле обязательно для заполнения',
+              })}
+            />
+            {errors.name && <span style={{ color: 'red' }}>{errors.name.message?.toString()}</span>}
+          </label>
+          <label>
+            description
+            <input type="text" name={'description'} />
+          </label>
+          <label>
+            Age
+            <input type="number" name={'age'} />
+          </label>
+          <button>Submit</button>
+        </form>
+      </main>
+    </>
+  );
+};
+
+export default CreatePage;

src/pages/home/banner/components/cubs/cubs.tsx

@@ -24,7 +24,6 @@ const Cubs = () => {
   useEffect(() => {
     const interval = setInterval(() => {
       const newTime = new Date().getTime();
-      console.log(`+${newTime - prevTime}`);
       prevTime = newTime;
       setCurIndex((prevIndex) => {
         return prevIndex === CubItem.FIRST ? CubItem.SECOND : CubItem.FIRST;

src/routes.ts

@@ -0,0 +1,4 @@
+export const routes = {
+  home: '/',
+  create: '/creators/:city?',
+};

src/widgets/header/index.tsx

@@ -1,24 +1,28 @@
 import React from 'react';
+import logoUrl from '../../images/logo.svg';
+import { generatePath, NavLink } from 'react-router';
+import { routes } from '../../routes';
 
 const Header = (): React.ReactElement => {
+
   return (
     <header className="header container">
-      <a href="index.html">
+      <NavLink to={routes.home} end>
-        <img className="logo" src="./images/logo.svg" alt="" />
+        <img className="logo" src={logoUrl} alt="" />
-      </a>
+      </NavLink>
       <nav>
         <ul className="nav-list">
           <li>
-            <a href="./discover.html">Discover</a>
+            <NavLink to="/discover">Discover</NavLink>
           </li>
           <li>
-            <a href="./creators.html">creators</a>
+            <NavLink to={generatePath(routes.create, { city: '12345' })}>creators</NavLink>
           </li>
           <li>
-            <a href="./creators.html">Sell</a>
+            <NavLink to="/creators">creators</NavLink>
           </li>
           <li>
-            <a href="./creators.html">stats</a>
+            <NavLink to="/creators">creators</NavLink>
           </li>
         </ul>
       </nav>

webpack.config.js

@@ -8,9 +8,11 @@ module.exports = {
   output: {
     filename: 'index.js',
     path: path.resolve(__dirname, 'dist'),
+    publicPath: '/',
     clean: true,
   },
   devServer: {
+    historyApiFallback: true,
     hot: true,
   },
   resolve: {
@@ -19,7 +21,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.png/,
+        test: /\.png|.svg/,
         type: 'asset/resource',
       },
       {