https://github.com/wangkailang/react-typescript-template
React typescript template.
https://github.com/wangkailang/react-typescript-template
reactjs typescript webpack
Last synced: 2 months ago
JSON representation
React typescript template.
- Host: GitHub
- URL: https://github.com/wangkailang/react-typescript-template
- Owner: wangkailang
- Created: 2020-12-29T07:01:29.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-12-30T07:46:41.000Z (over 5 years ago)
- Last Synced: 2024-10-05T15:41:07.689Z (over 1 year ago)
- Topics: reactjs, typescript, webpack
- Language: JavaScript
- Homepage:
- Size: 17.6 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React typescript template
## Branch Support
- [main](https://github.com/wangkailang/react-typescript-template/tree/main) Building application Basic React typescript template.
- [electron](https://github.com/wangkailang/react-typescript-template/tree/electron) Building electron application with React typescript template.
## Usage
```bash
# Development
yarn start
# Bundle
yarn build
# Bundle Analyze
yarn build-analyze
# open dist/analyze.html file analyze build size.
```
## Install
### Install React and React DOM
```bash
yarn add react react-dom
```
### Install Webpack, Webpack CLI and Webpack Dev Server
```bash
yarn add --save-dev webpack
yarn add --save-dev webpack-cli
yarn add --save-dev webpack-dev-server
```
### Install Babel
```bash
yarn add --save-dev @babel/core babel-loader
yarn add --save-dev @babel/preset-env @babel/preset-react
```
- `@babel/core` Babel compiler.
- `babel-loader` Babel module loader for webpack.
- `@babel/preset-env` Babel preset for each environment.
- `@babel/preset-react` Babel preset for all React plugins.
### Install Typescript
```bash
yarn add --save-dev typescript
yarn add --save-dev @babel/preset-typescript
yarn add --save-dev @types/react @types/react-dom
```
- `@babel/preset-typescript` Babel preset for TypeScript.
### Install Style loader
```bash
yarn add --save-dev style-loader css-loader
```
### Else
```bash
# Webpack env
yarn add --save-dev @types/webpack-env
# Hot loader, Html plugin
yarn add --save-dev react-hot-loader html-webpack-plugin
# Bundle analyze
yarn add --save-dev webpack-bundle-analyzer
```
## Configures
### Babel Setting
Create `.babelrc` file and the following configuration:
```json
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
}
```