finish setting webpack

src/App.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { RouterProvider } from "react-router-dom";
+import router from "./router/router"
+import classes from "./assets/styles/app.module.scss"
+import NavBar from "./components/NavBar.jsx";
+
+const App = () => {
+    return (
+        <div className={classes.main}>
+            <div className={classes.container}>
+                <div className={classes.header}>
+                    <NavBar/>
+                </div>
+                <div className={classes.content}>
+                    <RouterProvider router={router}/>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default App;

src/assets/styles/app.module.scss

@@ -0,0 +1,23 @@
+@import url('./base.css');
+
+.main {
+    width: 100%;
+    height: 100%;
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+}
+
+.header {
+    background-color: rgb(240, 240, 240);
+    width: 100%;
+    height: 50px;
+    box-shadow: 0 0 5px 1px rgb(210, 210, 210);
+}
+
+.content {
+    width: 100%;
+    height: 90%;
+}

src/assets/styles/base.css

@@ -0,0 +1,57 @@
+* {
+    padding: 0;
+    margin: 0;
+    border: 0; }
+  
+*, *:before, *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box; }
+  
+:focus, :active {
+    outline: none; }
+  
+a:focus, a:active {
+    outline: none; }
+  
+nav, footer, header, aside {
+    display: block; }
+  
+html, body {
+    height: 100%;
+    width: 100%;
+    font-size: 100%;
+    line-height: 1;
+    font-size: 14px;
+    -ms-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%; }
+  
+input, button, textarea {
+    font-family: inherit; }
+  
+input::-ms-clear {
+    display: none; }
+  
+  button {
+    cursor: pointer; }
+  
+  button::-moz-focus-inner {
+    padding: 0;
+    border: 0; }
+  
+  a, a:visited {
+    text-decoration: none; }
+  
+  a:hover {
+    text-decoration: none; }
+  
+  ul li {
+    list-style: none; }
+  
+  img {
+    vertical-align: top; }
+  
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: 400; }

src/assets/styles/components/myButton.module.scss

@@ -0,0 +1,6 @@
+.main {
+    button {
+        font-size: 15px;
+        padding: 10%;
+    }
+}

src/assets/styles/components/myInput.module.scss

@@ -0,0 +1,5 @@
+.main {
+    input {
+        
+    }
+}

src/assets/styles/components/navbar.module.scss

@@ -0,0 +1,9 @@
+.main {
+    width: 100%;
+    height: 100%;
+}
+
+.wrapper {
+    width: 100%;
+    height: 100%;
+}

src/assets/styles/forms.module.scss

@@ -0,0 +1,23 @@
+.main {
+    width: 100%;
+    height: 100%;
+    padding: 4% 8%;
+}
+
+.wrapper {
+    width: 100%;
+    height: 100%;
+    border: 1px solid red;
+}
+
+.panel {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.listForms {
+
+}

src/components/MyButton.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import classes from "../assets/styles/components/myButton.module.scss"
+
+const MyButton = () => {
+    return (
+        <div className={classes.main}>
+            <button type="button">Создать</button>
+        </div>
+    )
+}
+
+export default MyButton;

src/components/MyInput.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import classes from "../assets/styles/components/myInput.module.scss"
+
+const MyInput = () => {
+    return (
+        <div className={classes.main}>
+            <input type="text" />
+        </div>
+    )
+}
+
+export default MyInput;

src/components/NavBar.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import classes from "../assets/styles/components/navbar.module.scss"
+
+const NavBar = () => {
+    return (
+        <navbar className={classes.main}>
+            <div className={classes.wrapper}>
+                
+            </div>
+        </navbar>
+    )
+}
+
+export default NavBar;

src/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(
+    <App/>
+);

src/pages/Forms.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import classes from "../assets/styles/forms.module.scss"
+import MyButton from "../components/MyButton.jsx";
+import MyInput from "../components/MyInput.jsx";
+
+const Forms = () => {
+    return (
+        <div className={classes.main}>
+            <div className={classes.wrapper}>
+                <div className={classes.panel}>
+                    <MyInput/>
+                    <MyButton/>
+                </div>
+                <div className={classes.listForms}></div>
+            </div>
+        </div>
+    )
+}
+
+export default Forms;

src/pages/Home.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Home = () => {
+    return (
+        <div>
+            <span>Home</span>
+        </div>
+    )
+}
+
+export default Home;

src/pages/NewForm.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const NewForm = () => {
+    return (
+        <div>
+            NEW
+        </div>
+    )
+}
+
+export default NewForm;

src/router/router.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { createBrowserRouter } from "react-router-dom";
+import Forms from '../pages/Forms.jsx';
+import NewForm from '../pages/NewForm.jsx';
+import Home from "../pages/Home.jsx";
+
+const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <Home/>,
+    },
+    {
+        path: "/forms",
+        element: <Forms/>,
+    },
+    {
+        path: '/new',
+        element: <NewForm/>
+    }
+]);
+
+export default router