https://github.com/kingzez/react-template

🥳A full feature admin template with React 🚀
https://github.com/kingzez/react-template

antd css-modules react react-admin react-router-v5 react-template redux rtpl typescript

Last synced: about 1 month ago
JSON representation

🥳A full feature admin template with React 🚀

• Host: GitHub
• URL: https://github.com/kingzez/react-template
• Owner: kingzez
• Created: 2019-08-09T10:04:02.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-02-10T19:01:01.000Z (almost 3 years ago)
• Last Synced: 2023-02-28T04:26:18.509Z (over 1 year ago)
• Topics: antd, css-modules, react, react-admin, react-router-v5, react-template, redux, rtpl, typescript
• Language: TypeScript
• Homepage: https://kingzez.com/react-template/
• Size: 3.19 MB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
English | [简体中文](./README.zh-CN.md)

# React Template

### Use Package

- react

- react-router v5

- redux

- react-redux

- connected-react-router

- antd

- prop-types

### TODO

- [x] antd ui

- [x] custom theme

- [x] react-router

- [x] react-redux

- [x] admin layout

- [x] sidebar support nest

- [x] create-rtpl ([create-rtpl](https://github.com/kingzez/create-rtpl) template installer)

- [x] typescript version priority

- [x] pipeline

- [x] redux-saga (side effect model)

- [x] fetch package (use axios)

- [ ] permission

- [ ] multi api

- [ ] sso

- [ ] graphql

- [ ] redux-logger

### Usage

install dependency

```shell

npm i

```

dev

```shell

npm start

```

build

```shell

npm run build

```

analyze build

```shell

npm run analyze

```

serve static, need build first

```shell

npm run serve

```

#### [CSS Modules](https://github.com/css-modules/css-modules)

> [Naming](https://github.com/css-modules/css-modules#naming)

> [Learn more](https://css-tricks.com/css-modules-part-1-need/)

**Button.module.css**

```css

.error {

  background-color: red;

}

```

**another-stylesheet.css**

```css

.error {

  color: red;

}

```

**Button.js**

```js

import React, { Component } from 'react';

import styles from './Button.module.css'; // Import css modules stylesheet as styles

import './another-stylesheet.css'; // Import regular stylesheet

class Button extends Component {

  render() {

    // reference as a js object

    return Error Button;

  }

}

```

`typescript-plugin-css-modules` vscode can intelligence