Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/seogeurim/react-typescript-boilerplate
React X TypeScript boilerplate 🌐
https://github.com/seogeurim/react-typescript-boilerplate
babel7 boilerplate eslint react typescript webpack5
Last synced: 9 days ago
JSON representation
React X TypeScript boilerplate 🌐
- Host: GitHub
- URL: https://github.com/seogeurim/react-typescript-boilerplate
- Owner: Seogeurim
- License: mit
- Created: 2021-09-06T14:51:41.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-18T15:07:07.000Z (about 3 years ago)
- Last Synced: 2024-10-29T22:39:09.707Z (about 2 months ago)
- Topics: babel7, boilerplate, eslint, react, typescript, webpack5
- Language: JavaScript
- Homepage:
- Size: 386 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🌐 React X TypeScript Boilerplate
React boilerplate using TypeScript, Babel, Sass with a hot dev server and a production build.
## Prerequisites
- [Node.js](https://nodejs.org/)
- [Yarn](https://yarnpkg.com/)
## Getting Started
### Installation
```bash
git clone https://github.com/Seogeurim/react-typescript-boilerplate.git
cd react-typescript-boilerplate
yarn install
```
### Development server
Webpack dev server runs at `localhost:8000`.
```bash
yarn start
```
### Production build
Build outputs are created in `dist`.
```bash
yarn run build
```
## Features
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [webpack](https://webpack.js.org/)
- [Babel](https://babeljs.io/)
- [Sass](https://sass-lang.com/)
## Dependencies
### webpack
- [`webpack`](https://github.com/webpack/webpack) - Module and asset bundler.
- [`webpack-cli`](https://github.com/webpack/webpack-cli) - Command line interface for webpack
- [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server) - Development server for webpack
- [`webpack-merge`](https://github.com/survivejs/webpack-merge) - Simplify development/production configuration
### Babel
- [`@babel/core`](https://www.npmjs.com/package/@babel/core) - Transpile ES6+ to backwards compatible JavaScript
- [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) - Smart preset for Babel
- [`@babel/preset-react`](https://babeljs.io/docs/en/babel-preset-react) - Preset for React
- [`@babel/preset-typescript`](https://babeljs.io/docs/en/babel-preset-typescript) - Preset for TypeScript
### Loaders
- [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) - Transpile files with Babel and webpack
- [`sass-loader`](https://webpack.js.org/loaders/sass-loader/) - Load SCSS and compile to CSS
- [`sass`](https://github.com/sass/dart-sass) - A pure JavaScript implementation of Sass
- [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolve CSS imports
- [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM
### Plugins
- [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) - Generate HTML files from template
- [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin) - Extracts CSS file per JS file which contains CSS
### Linters
- [`eslint`](https://github.com/eslint/eslint) - Enforce styleguide across application
- [`eslint-config-airbnb`](https://www.npmjs.com/package/eslint-config-airbnb) - Styleguide of Airbnb, including ECMAScript 6+ and React
- [`eslint-config-airbnb-typescript`](https://www.npmjs.com/package/eslint-config-airbnb-typescript) - Enhances Airbnb's ESLint config with TypeScript support
- [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) - Implment prettier rules
- [`eslint-plugin-import`](https://github.com/benmosher/eslint-plugin-import) - Implment import rules
- [`eslint-plugin-jsx-a11y`](https://www.npmjs.com/package/eslint-plugin-jsx-a11y) - Static AST checker for accessibility rules on JSX elements
- [`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier) - Dependency for prettier usage with ESLint
- [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react) - React specific linting rules for ESLint
- [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) - enforces the [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html)
- [`prettier`](https://github.com/prettier/prettier) - code formatter
## License
This project is licensed under the [MIT License](./LICENSE).