├── .babelrc
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── src
    ├── components
    │   ├── App.tsx
    │   ├── Counter.tsx
    │   └── Hello.tsx
    ├── index.html
    └── index.tsx
├── tsconfig.json
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "@babel/env",
 4 |     "@babel/typescript",
 5 |     "@babel/react"
 6 |   ],
 7 |   "plugins": [
 8 |     "@babel/proposal-class-properties",
 9 |     "@babel/proposal-object-rest-spread"
10 |   ]
11 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React-Webpack-TypeScript-Babel
 2 | 
 3 | > This is sample repository demonstrates how to use React, Webpack, TypeScript and Babel
 4 | 
 5 | ## Starting the development server
 6 | 
 7 | ```shell
 8 | npm start
 9 | ```
10 | 
11 | ## Building the `bundle`
12 | 
13 | ```shell
14 | npm run build
15 | ```
16 | 
17 | ## Type-Checking the repo
18 | 
19 | ```shell
20 | npm run type-check
21 | ```
22 | 
23 | And to run in --watch mode:
24 | 
25 | ```shell
26 | npm run type-check:watch
27 | ```
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-webpack-typescript-babel",
 3 |   "version": "1.0.0",
 4 |   "description": "A sample setup using React, Webpack and Babel to build TypeScript code, and using TypeScript for type-checking.",
 5 |   "scripts": {
 6 |     "type-check": "tsc --noEmit",
 7 |     "type-check:watch": "npm run type-check -- --watch",
 8 |     "build": "webpack --progress --mode=production",
 9 |     "start": "webpack s --config ./webpack.config.js --mode=development",
10 |     "start:prod": "npm run build && http-server dist -p 9999 -o"
11 |   },
12 |   "author": {
13 |     "name": "Oleksandr T.",
14 |     "email": "oleksandr.tarasiuk@outlook.com"
15 |   },
16 |   "license": "MIT",
17 |   "devDependencies": {
18 |     "@babel/core": "7.20.7",
19 |     "@babel/plugin-proposal-class-properties": "7.18.6",
20 |     "@babel/plugin-proposal-object-rest-spread": "7.20.7",
21 |     "@babel/preset-env": "7.20.2",
22 |     "@babel/preset-react": "7.18.6",
23 |     "@babel/preset-typescript": "7.18.6",
24 |     "@types/node": "18.11.18",
25 |     "babel-loader": "9.1.0",
26 |     "fork-ts-checker-webpack-plugin": "7.2.14",
27 |     "html-webpack-plugin": "5.5.0",
28 |     "http-server": "14.1.1",
29 |     "typescript": "4.9.4",
30 |     "webpack": "5.97.1",
31 |     "webpack-cli": "5.0.1",
32 |     "webpack-dev-server": "4.11.1"
33 |   },
34 |   "dependencies": {
35 |     "@types/react": "18.0.26",
36 |     "@types/react-dom": "18.0.10",
37 |     "react": "18.2.0",
38 |     "react-dom": "18.2.0"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Counter } from './Counter';
 3 | import { Hello } from './Hello';
 4 | 
 5 | export const App = () => (
 6 |   <>
 7 |     <Hello name={ 'react-webpack-typescript-babel' } />
 8 |     <Counter />
 9 |   </>
10 | );
11 | 


--------------------------------------------------------------------------------
/src/components/Counter.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | export interface CounterProps {}
 4 | 
 5 | export interface CounterState {
 6 |   value: number;
 7 | }
 8 | 
 9 | export function Counter() {
10 |   const [value, setValue] = useState(0);
11 |   const handleIncrement = () => setValue(value + 1);
12 |   const handleDecrement = () => setValue(value - 1);
13 |   return (
14 |     <>
15 |       <div>{ value }</div>
16 |       <button onClick={handleIncrement}>+</button>
17 |       <button onClick={handleDecrement}>-</button>
18 |     </>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/src/components/Hello.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FunctionComponent } from 'react';
 2 | 
 3 | export interface HelloProps {
 4 |   name: string;
 5 | }
 6 | 
 7 | export const Hello: FunctionComponent<HelloProps> = ({ name }) => (
 8 |   <h1>{ name }</h1>
 9 | );
10 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>react-webpack-typescript-babel</title>
 6 | </head>
 7 | <body>
 8 |   <div id="root"></div>
 9 | </body>
10 | </html>


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createRoot } from 'react-dom/client';
3 | import { App } from './components/App';
4 | 
5 | const root = createRoot(document.getElementById('root')!);
6 | root.render(<App />);
7 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "noFallthroughCasesInSwitch": true,
 5 |     "noUnusedParameters": true,
 6 |     "noImplicitReturns": true,
 7 |     "moduleResolution": "node",
 8 |     "esModuleInterop": true,
 9 |     "noUnusedLocals": true,
10 |     "noImplicitAny": true,
11 |     "target": "ESNext",
12 |     "module": "ESNext",
13 |     "strict": true,
14 |     "jsx": "react"
15 |   },
16 |   "include": [
17 |     "src/**/*"
18 |   ],
19 |   "exclude": [
20 |     "node_modules",
21 |     "dist"
22 |   ]
23 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const path = require('path');
 4 | const APP_PATH = path.resolve(__dirname, 'src');
 5 | 
 6 | module.exports = {
 7 |   entry: APP_PATH,
 8 | 
 9 |   output: {
10 |     filename: 'bundle.js',
11 |     path: path.resolve(__dirname, 'dist'),
12 |   },
13 | 
14 |   resolve: {
15 |     extensions: ['.ts', '.tsx', '.js', '.json']
16 |   },
17 | 
18 |   module: {
19 |     rules: [{ test: /\.(ts|js)x?$/, loader: 'babel-loader', exclude: /node_modules/ }],
20 |   },
21 | 
22 |   plugins: [
23 |     new HtmlWebpackPlugin({ inject: true, template: path.join(APP_PATH, 'index.html') }),
24 |     new ForkTsCheckerWebpackPlugin(),
25 |   ],
26 | 
27 |   performance: {
28 |     hints: false
29 |   },
30 | 
31 |   devServer: {
32 |     open: true
33 |   }
34 | };
35 | 


--------------------------------------------------------------------------------