# common_react_utils_my_repo_adssadsadasd
> ``` yarn add react react-dom yarn add @types/react --dev ``` # 3，安装typescript ``` yarn add typescript --dev
Latest version **1.0.0** (published 2022-04-08) · MIT license · 0 weekly downloads
## Install
```sh
npm install common_react_utils_my_repo_adssadsadasd
pnpm add common_react_utils_my_repo_adssadsadasd
yarn add common_react_utils_my_repo_adssadsadasd
bun add common_react_utils_my_repo_adssadsadasd
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-04-08 |
| First published | 2022-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 8.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xts |
| Maintainers | luckyxts |
## Links
- npm: https://www.npmjs.com/package/common_react_utils_my_repo_adssadsadasd
- npm.io page: https://npm.io/package/common_react_utils_my_repo_adssadsadasd
## Dependencies (3)
- [react](https://npm.io/package/react.md) ^18.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.0.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
## Recent versions
- 1.0.0 (latest) — 2022-04-08
## README
# 1，npm init
# 2，安装react react-dom @types/react
```
yarn add react react-dom
yarn add @types/react --dev
```
# 3，安装typescript
```
yarn add typescript --dev
tsc --init
```
# 4 安装eslint
```
yarn add eslint --dev
eslint --init
```
## package.json添加eslint脚本
```
"lint": "eslint --ext .tsx,.ts,.js src --cache --fix",
```
# 5，创建src目录
```
--
--src
--components
--MyFirstComponent
index.tsx
--index.ts
```
```
import React from 'react';
function FirstComponent() {
return (
这是第一个组件
);
}
export default FirstComponent;
```
```
export * from './components/FirstComponent';
```
# 6，安装ts-jest测试
```
yarn add --dev jest ts-jest @types/jest @testing-library/react
```
## 根目录创建jest.config.js文件
```
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
testMatch: [
'**/*.test.tsx',
],
};
```
## 在组件文件夹下创建FirstComponent.test.tsx
```
--src
--components
--MyFirstComponent
+ FirstComponent.test.tsx
index.tsx
--index.ts
import React from 'react';
import { render } from '@testing-library/react';
import FirstComponent from './index';
test('rende my test', () => {
render();
});
```
## 添加jest 命令
```
"test": "npx jest",
```
# 7 安装 storybook
```
npx sb init
```
## 创建.stoires.tsx文件 ./src/components/FirstComponent/FirstComponent.test.tsx
```
import React from 'react';
import FirstComponent from './index';
export default {
title: 'FirstComponent',
component: FirstComponent,
};
export function FirstComponentStories() {
return ;
}
```
# 8 引入sass
```
yarn add node-sass --dev
yarn add classnames
```
## scss全局变量
```
--src
--styles
_variables.scss
index.scss
```
```
$css-prefix: 'cru'
```
```
@import "variables";
@import './src/components/FirstComponent/style';
```
## 编辑scss文件./src/components/FirstComponent/style.scss
```
$first-component-prefix: 'first-component';
.#{$css-prefix} {
&-#{$first-component-prefix} {
&-red{
color: red;
}
}
}
```
## 组件使用sass
```
import React from 'react';
import classNames from 'classnames';
import getCssPrefix from '../../utils';
function FirstComponent() {
const cssPrefix = getCssPrefix('first-component');
const wrapperClass = classNames(
`${cssPrefix}-red`,
`${cssPrefix}-font-size`,
);
return (
这是第一个组件
);
}
export default FirstComponent;
export default FirstComponent;
```
##
## 安装sass-loader style-loader css-loader
```
yarn add sass-loader@5.0.0 css-loader@3.0.0 style-loader@2.0.0 --dev
```
## storybook引入样式 .storybook/preview.js
```
import '../src/styles/index.scss'
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
```
## 为storybook添加loader .storybook/main.js
```
const path = require('path')
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions"
],
"framework": "@storybook/react",
"webpackFinal": async (config, { configType }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
// Make whatever fine-grained changes you need
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
// Return the altered config
return config;
}
}
```
# 9，打包配置
## ./config/tsconfig.build.json
```
{
"compilerOptions": {
"outDir": "../dist",
"module": "esnext",
"target": "es5",
"declaration": true,
"jsx": "react",
"moduleResolution":"Node",
"allowSyntheticDefaultImports": true
},
"include": [
"../src"
],
"exclude": [
"../src/**/*.test.tsx",
"../src/**/*.stories.tsx"
]
}
```
## 放入命令
```
yarn add rimraf --dev
"build-css": "node-sass ./src/styles/index.scss ./dist/index.css",
"build-ts": "tsc -p ./config/tsconfig.build.json",
"clean": "rimraf ./dist",
"build": "yarn clean && yarn build-ts && yarn build-css",
```
# 9，添加commitlint
```
yarn add @commitlint/cli @commitlint/config-conventional husky --dev
```
## 添加commitlint.config.js
```
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
},
};
```
## 添加package.json
```
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
"pre-commit": "npm run lint && npm run test"
}
}
```
# 10，根据feat,fix等自动更新版本
```
yarn add standard-version --dev
"log": "standard-version"
```
---
_Source: https://npm.io/package/common_react_utils_my_repo_adssadsadasd · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._