Switch ts-loader to babel and add hmr

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "main": "src/index.ts",
   "scripts": {
+    "start": "webpack serve --mode=development",
     "build": "webpack --mode=development",
     "dev": "webpack --mode=development --watch"
   },
@@ -10,6 +11,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "fork-ts-checker-webpack-plugin": "^9.1.0",
     "handlebars-loader": "^1.7.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -17,9 +19,15 @@
     "webpack-cli": "^6.0.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.27.0",
     "@eslint/js": "^9.25.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.16",
     "@types/react": "^19.1.1",
     "@types/react-dom": "^19.1.2",
+    "babel-loader": "^10.0.0",
     "copy-webpack-plugin": "^13.0.0",
     "css-loader": "^7.1.2",
     "eslint": "^9.25.1",
@@ -29,9 +37,11 @@
     "globals": "^16.0.0",
     "html-webpack-plugin": "^5.6.3",
     "prettier": "3.5.3",
+    "react-refresh": "^0.17.0",
     "style-loader": "^4.0.0",
     "ts-loader": "^9.5.2",
     "typescript": "^5.8.2",
-    "typescript-eslint": "^8.31.0"
+    "typescript-eslint": "^8.31.0",
+    "webpack-dev-server": "^5.2.1"
   }
 }

src/pages/home/banner/index.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { arrowEl } from './arrow';
 import './style.css';
 
 const Banner = () => {
+
   return (
     <div className="container hero">
       <div className="hero-main">
         <div className="hero-line"></div>
         <h1 className="hero-title">Discover And Create NFTs</h1>
         <p className="hero-description">
-          Discover, Create and Sell NFTs On Our NFT Marketplace With Over
-          Thousands Of NFTs And Get a{' '}
-          <span className="hero-description__bold">$20 bonus</span>.
+          Discover, Create and Sell NFTs On Our NFT Marketplace With Over Thousands Of NFTs And Get
+          a <span className="hero-description__bold">$20 bonus</span>.
         </p>
         <div className="hero-buttons">
           <button className="button">Explore More</button>

webpack.config.js

@@ -1,5 +1,8 @@
+const webpack = require('webpack');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 module.exports = {
   entry: './src/index.tsx',
@@ -8,15 +11,24 @@ module.exports = {
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
+  devServer: {
+    hot: true,
+  },
   resolve: {
     extensions: ['.js', '.ts', '.jsx', '.tsx'],
   },
   module: {
     rules: [
-      { test: /\.(ts|tsx)$/, loader: 'ts-loader' },
       {
-        test: /\.hbs|html$/,
-        loader: 'handlebars-loader'``,
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            plugins: [require.resolve('react-refresh/babel')],
+            presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
+          },
+        },
       },
       {
         test: /\.css$/i,
@@ -29,5 +41,7 @@ module.exports = {
       template: './src/index.html',
       filename: 'index.html',
     }),
+    new ReactRefreshWebpackPlugin(),
+    new ForkTsCheckerWebpackPlugin(),
   ],
 };