├── .gitignore ├── src ├── App.tsx ├── index.tsx └── components │ └── HelloWorld │ └── index.tsx ├── renovate.json ├── README.md ├── public └── index.html ├── .prettierrc ├── tsconfig.json ├── .eslintrc.json ├── package.json └── webpack.config.ts /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | .cache/ 4 | .idea/ 5 | yarn.lock 6 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import HelloWorld from "components/HelloWorld"; 3 | 4 | const App: React.FC = () => ; 5 | 6 | export default App; 7 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {createRoot} from "react-dom/client"; 3 | import App from "./App"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container!); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "semanticCommits": "enabled", 3 | "ignoreTests": true, 4 | "packageRules": [ 5 | { 6 | "matchUpdateTypes": ["minor", "patch", "pin", "digest"], 7 | "automerge": true 8 | } 9 | ], 10 | "extends": ["config:recommended"] 11 | } 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-typescript-starter 2 | ###### Minimalist React 18 starter template with TypeScript ⚛ without usage of create-react-app. 3 | 4 | Configured with: 5 | - Webpack 6 | - ESLint 7 | - Prettier 8 | 9 | ## Read post on medium: 10 | https://medium.com/@adriancelczynski/react-with-typescript-starter-kit-without-create-react-app-including-webpack-eslint-bef225c35ffa 11 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React TypeScript App 8 | 9 | 10 |

11 | 12 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "trailingComma": "none", 4 | "tabWidth": 4, 5 | "semi": true, 6 | "singleQuote": false, 7 | "bracketSpacing": false, 8 | "bracketSameLine": false, 9 | "arrowParens": "always", 10 | "endOfLine": "auto", 11 | "jsxSingleQuote": false, 12 | "proseWrap": "preserve", 13 | "quoteProps": "as-needed", 14 | "useTabs": false, 15 | "htmlWhitespaceSensitivity": "css" 16 | } -------------------------------------------------------------------------------- /src/components/HelloWorld/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const HelloWorld: React.FC = () => ( 4 | <> 5 |

Hello World

6 | 7 |

8 | 9 |

Environmental variables:

10 |

11 | process.env.PRODUCTION: {process.env.PRODUCTION.toString()} 12 |

13 |

14 | process.env.NAME: {process.env.NAME} 15 |

16 |

17 | process.env.VERSION: {process.env.VERSION} 18 |

19 | 20 | ); 21 | 22 | export default HelloWorld; 23 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "noImplicitAny": false, 5 | "module": "esnext", 6 | "target": "es5", 7 | "lib": [ 8 | "esnext", 9 | "dom", 10 | "dom.iterable" 11 | ], 12 | "removeComments": true, 13 | "allowSyntheticDefaultImports": true, 14 | "jsx": "react", 15 | "allowJs": true, 16 | "baseUrl": "./", 17 | "esModuleInterop": true, 18 | "resolveJsonModule": true, 19 | "moduleResolution": "node", 20 | "downlevelIteration": true, 21 | "paths": { 22 | "components/*": [ 23 | "src/components/*" 24 | ] 25 | } 26 | }, 27 | "include": [ 28 | "./src", 29 | "./webpack.config.ts" 30 | ] 31 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "plugins": [ 4 | "@typescript-eslint", 5 | "react", 6 | "react-hooks", 7 | "eslint-plugin-import", 8 | "prettier" 9 | ], 10 | "env": { 11 | "browser": true 12 | }, 13 | "extends": [ 14 | "eslint:recommended", 15 | "plugin:@typescript-eslint/recommended", 16 | "plugin:react/recommended", 17 | "plugin:prettier/recommended" 18 | ], 19 | "parserOptions": { 20 | "project": [ 21 | "tsconfig.json" 22 | ], 23 | "ecmaVersion": 2020, 24 | "sourceType": "module", 25 | "ecmaFeatures": { 26 | "jsx": true 27 | } 28 | }, 29 | "rules": { 30 | "@typescript-eslint/explicit-function-return-type": "off", 31 | "@typescript-eslint/no-unused-vars": ["warn", {"ignoreRestSiblings": true}], 32 | "react/jsx-filename-extension": [ 33 | "warn", 34 | { 35 | "extensions": [ 36 | ".jsx", 37 | ".tsx" 38 | ] 39 | } 40 | ], 41 | "react/prop-types": "off", 42 | "react-hooks/rules-of-hooks": "error", 43 | "react-hooks/exhaustive-deps": "warn", 44 | "no-shadow": ["error", {"builtinGlobals": false, "hoist": "functions", "allow": []}] 45 | }, 46 | "settings": { 47 | "react": { 48 | "version": "detect" 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-typescript-starter", 3 | "description": "Minimalist React 18 starter template with TypeScript ⚛", 4 | "version": "1.0.0", 5 | "main": "src/index.tsx", 6 | "repository": "https://github.com/GR34SE/react-typescript-starter.git", 7 | "license": "MIT", 8 | "scripts": { 9 | "develop": "webpack-cli serve --mode=development --env development --open --hot", 10 | "build": "webpack --mode=production --env production --progress", 11 | "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'", 12 | "lint:fix": "eslint './src/**/*.{ts,tsx,js,jsx}' --fix" 13 | }, 14 | "devDependencies": { 15 | "@types/node": "22.15.22", 16 | "@types/react": "19.1.6", 17 | "@types/react-dom": "19.1.5", 18 | "@types/webpack": "5.28.5", 19 | "@types/webpack-dev-server": "4.7.2", 20 | "@typescript-eslint/eslint-plugin": "8.33.0", 21 | "@typescript-eslint/parser": "8.33.0", 22 | "eslint": "8.57.1", 23 | "eslint-config-prettier": "10.1.5", 24 | "eslint-plugin-import": "2.31.0", 25 | "eslint-plugin-prettier": "5.4.0", 26 | "eslint-plugin-react": "7.37.5", 27 | "eslint-plugin-react-hooks": "5.2.0", 28 | "eslint-webpack-plugin": "4.2.0", 29 | "fork-ts-checker-webpack-plugin": "9.1.0", 30 | "html-webpack-plugin": "5.6.3", 31 | "prettier": "3.5.3", 32 | "ts-loader": "9.5.2", 33 | "ts-node": "10.9.2", 34 | "tsconfig-paths-webpack-plugin": "4.2.0", 35 | "typescript": "5.8.3", 36 | "webpack": "5.99.9", 37 | "webpack-cli": "6.0.1", 38 | "webpack-dev-server": "5.2.1" 39 | }, 40 | "dependencies": { 41 | "react": "^19.0.0", 42 | "react-dom": "^19.0.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /webpack.config.ts: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import webpack from "webpack"; 3 | import HtmlWebpackPlugin from "html-webpack-plugin"; 4 | import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin"; 5 | import ESLintPlugin from "eslint-webpack-plugin"; 6 | import {TsconfigPathsPlugin} from "tsconfig-paths-webpack-plugin"; 7 | import packageJson from "./package.json" with {type: "json"}; 8 | 9 | const webpackConfig = (env): webpack.Configuration => ({ 10 | entry: "./src/index.tsx", 11 | ...(env.production || !env.development ? {} : {devtool: "eval-source-map"}), 12 | resolve: { 13 | extensions: [".ts", ".tsx", ".js"], 14 | plugins: [new TsconfigPathsPlugin()] 15 | }, 16 | output: { 17 | path: path.join(import.meta.dirname, "/dist"), 18 | filename: "build.js" 19 | }, 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.tsx?$/, 24 | loader: "ts-loader", 25 | options: { 26 | transpileOnly: true 27 | }, 28 | exclude: /dist/ 29 | } 30 | ] 31 | }, 32 | plugins: [ 33 | new HtmlWebpackPlugin({ 34 | template: "./public/index.html" 35 | }), 36 | new webpack.DefinePlugin({ 37 | "process.env.PRODUCTION": env.production || !env.development, 38 | "process.env.NAME": JSON.stringify(packageJson.name), 39 | "process.env.VERSION": JSON.stringify(packageJson.version) 40 | }), 41 | new ForkTsCheckerWebpackPlugin(), 42 | new ESLintPlugin({files: "./src/**/*.{ts,tsx,js,jsx}"}) 43 | ] 44 | }); 45 | 46 | export default webpackConfig; 47 | --------------------------------------------------------------------------------