├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── .prettierignore ├── .prettierrc.json ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.test.tsx ├── App.tsx ├── Child.tsx ├── assests │ ├── fonts │ │ ├── Poppins-Medium.ttf │ │ ├── Poppins-Regular.ttf │ │ └── Poppins-SemiBold.ttf │ └── images │ │ └── FaSun.png ├── index.css ├── index.tsx ├── react-app-env.d.ts ├── reportWebVitals.ts └── setupTests.ts ├── tsconfig.json └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | src/service-worker.ts 2 | src/serviceWorkerRegistration.ts -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | jest: true, 6 | }, 7 | extends: [ 8 | "plugin:react/recommended", 9 | "airbnb", 10 | "prettier", 11 | "plugin:import/typescript", 12 | ], 13 | parser: "@typescript-eslint/parser", 14 | parserOptions: { 15 | ecmaFeatures: { 16 | jsx: true, 17 | }, 18 | ecmaVersion: 13, 19 | sourceType: "module", 20 | }, 21 | plugins: ["react", "@typescript-eslint", "security"], 22 | rules: { 23 | "import/extensions": [ 24 | "error", 25 | "ignorePackages", 26 | { ts: "never", tsx: "never" }, 27 | ], 28 | "no-use-before-define": "off", 29 | "@typescript-eslint/no-use-before-define": "error", 30 | "react/react-in-jsx-scope": "off", 31 | "react/jsx-filename-extension": ["error", { extensions: [".tsx"] }], 32 | "arrow-body-style": ["error", "always"], 33 | "react/function-component-definition": [ 34 | 2, 35 | { 36 | namedComponents: "arrow-function", 37 | unnamedComponents: "arrow-function", 38 | }, 39 | ], 40 | }, 41 | }; 42 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | .eslintcache 11 | 12 | # production 13 | /build 14 | 6 15 | 16 | # misc 17 | .DS_Store 18 | .env 19 | .env.local 20 | .env.development.local 21 | .env.test.local 22 | .env.production.local 23 | 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | yarn run format:fix 6 | yarn run validate 7 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | src/service-worker.ts 2 | src/serviceWorkerRegistration.ts -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSameLine": false, 4 | "bracketSpacing": true, 5 | "embeddedLanguageFormatting": "auto", 6 | "htmlWhitespaceSensitivity": "css", 7 | "insertPragma": false, 8 | "jsxSingleQuote": false, 9 | "printWidth": 80, 10 | "proseWrap": "preserve", 11 | "quoteProps": "as-needed", 12 | "requirePragma": false, 13 | "semi": true, 14 | "singleQuote": false, 15 | "tabWidth": 2, 16 | "trailingComma": "es5", 17 | "useTabs": false, 18 | "vueIndentScriptAndStyle": false 19 | } 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## A react-typescript boilerplate including 2 | 3 | - `prettier` 4 | - `eslint` 5 | - `lint-staged` 6 | - `husky` 7 | 8 | # ![React Typescript Setup](https://img.shields.io/badge/React--Typescript-044289?style=flat) 9 | 10 | [Docs](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup/) 11 | 12 | - TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. 13 | - Also a powerful compiler tool which converts typescript to javascript 14 | - It also adds feature of idetifying errors at compile time rather than scratching our head at runtime🥲 15 | 16 | # ![Prettier](https://img.shields.io/badge/Prettier-%23DB7093?style=flat) 17 | 18 | [Docs](https://prettier.io/) 19 | 20 | - An Code formatter 21 | - Supports many languages 22 | - Generate prettier rules [here](https://prettier.io/playground/) 23 | 24 | # ![Eslint](https://img.shields.io/badge/Eslint-4B32C3?style=flat) 25 | 26 | [Docs](https://eslint.org/) 27 | 28 | - Find and fix problems in your JavaScript code making code more consistent. 29 | - We already have `eslint` as an inner-dependency from react-scripts 30 | - To init eslint config run & choose options accordingly 31 | 32 | ``` 33 | npx eslint --init 34 | ``` 35 | 36 | 38 | 39 | # ![Lint-Staged](https://img.shields.io/badge/Lint--Staged-49C41C?style=flat) 40 | 41 | [Docs](https://www.npmjs.com/package/lint-staged) 42 | 43 | - Linting makes more sense when run before committing your code. By doing so you can ensure no errors go into the repository and enforce code style. 44 | 45 | # ![Husky](https://img.shields.io/badge/Husky-yellow?style=flat) 46 | 47 | [Docs](https://www.npmjs.com/package/husky) 48 | 49 | - Whenever we inti Git in our project, it automatically comes with features called hooks. 50 | - hooks ex: `pre-commit`, `pre-push`, etc. 51 | - If we want to ensure before we actually create a commit using the `git commit`, that our code was properly `linted` and `formatted`, we could write a `pre-commit` Git hook. 52 | 53 | # ![Installation](https://img.shields.io/badge/Installation-38427A?style=flat) 54 | 55 | 1. Clone / Download [this](https://github.com/ShubhamSj07/react-typescript-boilerplate) repo. 56 | 2. Inside the project open a terminal and run: 57 | 58 | ``` 59 | yarn install 60 | ``` 61 | 62 | This will install all the project dependencies. 63 | 64 | 3. To start the development server run: 65 | 66 | ``` 67 | yarn start 68 | ``` 69 | 70 | 4. Prettier commands 71 | 72 | - Run the below command to get a list of all unformatted code in the project. 73 | 74 | ``` 75 | yarn run format:check 76 | ``` 77 | 78 | - Run the below command to fix the unformatted code! 79 | 80 | ``` 81 | yarn run format:fix 82 | ``` 83 | 84 | 5. Eslint commands 85 | 86 | - We can run the below script present in package.json 87 | 88 | ``` 89 | yarn run lint 90 | ``` 91 | 92 | 6. Run parallel commands at once using [concurrently](https://www.npmjs.com/package/concurrently) 93 | 94 | - #### Syntax 95 | 96 | ``` 97 | concurrently \"yarn 1st-cmd\" \"yarn run 2st-cmd\" \"yarn run nth-cmd\"" 98 | ``` 99 | 100 | 7. Another great thing about lint-staged is that it automatically does the git add on the modified files. So, if we are doing prettier — write or eslint — fix, we don't have to stage the changes manually. 101 | 102 | - #### We do format:fix & run our validate script on the staged files 103 | 104 | - #### After `git add .` and `git commit -m "message"` 105 | 106 | the lint-staged kicks in and runs🚀 107 | 108 | # ![Author](https://img.shields.io/badge/Author-FF3031?style=flat) 109 | 110 | [![Twitter](https://img.shields.io/badge/follow-%40shubhamsj077-1DA1F2?style=flat&logo=Twitter)](https://twitter.com/shubhamsj077) 111 | 112 | [![LinkedIn](https://img.shields.io/badge/connect-%40shubhamjadhav-%230077B5?style=flat&logo=LinkedIn)](https://www.linkedin.com/in/shubham-jadhav-77a588192/) 113 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-typescript-boilerplate", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^12.0.0", 8 | "@testing-library/user-event": "^13.2.1", 9 | "@types/jest": "^27.0.1", 10 | "@types/node": "^16.7.13", 11 | "@types/react": "^17.0.20", 12 | "@types/react-dom": "^17.0.9", 13 | "concurrently": "^7.0.0", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2", 16 | "react-scripts": "5.0.0", 17 | "typescript": "^4.4.2", 18 | "web-vitals": "^2.1.0" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject", 25 | "prettier": "prettier . --ignore-path .gitignore", 26 | "format:check": "prettier . --ignore-path .gitignore --check", 27 | "format:fix": "prettier . --ignore-path .gitignore --write", 28 | "lint": "eslint --ext .tsx,.ts .", 29 | "validate": "concurrently \"yarn run lint\" \"yarn run type:check\" \"yarn run format:check\"", 30 | "type:check": "tsc", 31 | "prepare": "husky install" 32 | }, 33 | "eslintConfig": { 34 | "extends": [ 35 | "react-app", 36 | "react-app/jest" 37 | ] 38 | }, 39 | "browserslist": { 40 | "production": [ 41 | ">0.2%", 42 | "not dead", 43 | "not op_mini all" 44 | ], 45 | "development": [ 46 | "last 1 chrome version", 47 | "last 1 firefox version", 48 | "last 1 safari version" 49 | ] 50 | }, 51 | "devDependencies": { 52 | "@typescript-eslint/eslint-plugin": "^5.9.0", 53 | "@typescript-eslint/parser": "^5.9.0", 54 | "eslint": "^8.6.0", 55 | "eslint-config-airbnb": "^19.0.4", 56 | "eslint-config-prettier": "^8.3.0", 57 | "eslint-plugin-import": "^2.25.4", 58 | "eslint-plugin-jsx-a11y": "^6.5.1", 59 | "eslint-plugin-react": "^7.28.0", 60 | "eslint-plugin-react-hooks": "^4.3.0", 61 | "eslint-plugin-security": "^1.4.0", 62 | "husky": "^7.0.4", 63 | "lint-staged": "^12.1.5", 64 | "prettier": "^2.5.1" 65 | }, 66 | "lint-staged": { 67 | "*.{tsx,ts}": "eslint --fix", 68 | "*.{js,css,md}": "prettier --write" 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/948a17d7c7a9836141f4659dc684c15b392653a6/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React TypeScript Boilerplate 28 | 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/948a17d7c7a9836141f4659dc684c15b392653a6/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/948a17d7c7a9836141f4659dc684c15b392653a6/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/948a17d7c7a9836141f4659dc684c15b392653a6/src/App.css -------------------------------------------------------------------------------- /src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render, screen } from "@testing-library/react"; 3 | import App from "./App"; 4 | 5 | test("renders learn react link", () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | // 2 | import FaSun from "./assests/images/FaSun.png"; 3 | import "./App.css"; 4 | 5 | const App = () => { 6 | return ( 7 |
8 |

react-typescript boilerplate!

9 |
testing lint stage!!
10 | 11 | FaSun 12 |
13 | ); 14 | }; 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /src/Child.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Child = () => { 4 | return ( 5 |
6 |

testing lint staged for unstaged files:)

7 |
8 | ); 9 | }; 10 | 11 | export default Child; 12 | -------------------------------------------------------------------------------- /src/assests/fonts/Poppins-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/948a17d7c7a9836141f4659dc684c15b392653a6/src/assests/fonts/Poppins-Medium.ttf -------------------------------------------------------------------------------- /src/assests/fonts/Poppins-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/948a17d7c7a9836141f4659dc684c15b392653a6/src/assests/fonts/Poppins-Regular.ttf -------------------------------------------------------------------------------- /src/assests/fonts/Poppins-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/948a17d7c7a9836141f4659dc684c15b392653a6/src/assests/fonts/Poppins-SemiBold.ttf -------------------------------------------------------------------------------- /src/assests/images/FaSun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/948a17d7c7a9836141f4659dc684c15b392653a6/src/assests/images/FaSun.png -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Poppins-Medium"; 3 | src: url("assests/fonts/Poppins-Medium.ttf"); 4 | } 5 | 6 | @font-face { 7 | font-family: "Poppins-Regular"; 8 | src: url("assests/fonts/Poppins-Regular.ttf"); 9 | } 10 | 11 | @font-face { 12 | font-family: "Poppins-SemiBold"; 13 | src: url("assests/fonts/Poppins-SemiBold.ttf"); 14 | } 15 | 16 | * { 17 | margin: 0; 18 | padding: 0; 19 | box-sizing: border-box; 20 | } 21 | 22 | body { 23 | margin: 0; 24 | font-family: Poppins-Medium, -apple-system, "Segoe UI", "Roboto", sans-serif; 25 | -webkit-font-smoothing: antialiased; 26 | -moz-osx-font-smoothing: grayscale; 27 | } 28 | 29 | code { 30 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 31 | monospace; 32 | } 33 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | import reportWebVitals from "./reportWebVitals"; 5 | import "./index.css"; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById("root") 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from "web-vitals"; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import "@testing-library/jest-dom"; 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | --------------------------------------------------------------------------------