il y a 6 ans · 91584a365f
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,4 @@ yarn-debug.log*
 
				 yarn-error.log*
			
 
				 
			
 
				 yarn.lock*
			
 
				+.idea/
			
--- a/package.json
+++ b/package.json
@@ -4,6 +4,8 @@
 
				   "private": true,
			
 
				   "dependencies": {
			
 
				     "@babel/core": "7.4.3",
			
 
				+    "@material-ui/core": "^3.9.3",
			
 
				+    "@material-ui/icons": "^3.0.2",
			
 
				     "@svgr/webpack": "4.1.0",
			
 
				     "@types/jest": "24.0.12",
			
 
				     "@types/node": "12.0.0",
			
@@ -39,6 +41,7 @@
 
				     "jest-environment-jsdom-fourteen": "0.1.0",
			
 
				     "jest-resolve": "24.7.1",
			
 
				     "jest-watch-typeahead": "0.3.0",
			
 
				+    "logrocket": "^0.6.21",
			
 
				     "mini-css-extract-plugin": "0.5.0",
			
 
				     "node-sass": "^4.12.0",
			
 
				     "optimize-css-assets-webpack-plugin": "5.0.1",
			
@@ -70,7 +73,9 @@
 
				   "scripts": {
			
 
				     "start": "node scripts/start.js",
			
 
				     "build": "node scripts/build.js",
			
 
				-    "test": "node scripts/test.js"
			
 
				+    "test": "node scripts/test.js",
			
 
				+    "fix-code": "prettier-eslint --write 'src/**/*.{js,jsx}' ",
			
 
				+    "fix-styles": "prettier-stylelint --write 'src/**/*.{css,scss,sass}' "
			
 
				   },
			
 
				   "eslintConfig": {
			
 
				     "extends": "react-app"
			
@@ -137,5 +142,19 @@
 
				       "react-app"
			
 
				     ]
			
 
				   },
			
 
				-  "devDependencies": {}
			
 
				+  "devDependencies": {
			
 
				+    "prettier-eslint": "^8.8.2",
			
 
				+    "prettier-eslint-cli": "^4.7.1",
			
 
				+    "prettier-stylelint": "^0.4.2"
			
 
				+  },
			
 
				+  "stylelint": {
			
 
				+    "extends": [
			
 
				+      "stylelint-config-idiomatic-order",
			
 
				+      "./node_modules/prettier-stylelint/config.js"
			
 
				+    ],
			
 
				+    "rules": {
			
 
				+      "indentation": 2,
			
 
				+      "string-quotes": "single"
			
 
				+    }
			
 
				+  }
			
 
				 }
			
--- a/public/index.html
+++ b/public/index.html
@@ -19,6 +19,11 @@
 
				       work correctly both with client-side routing and a non-root public URL.
			
 
				       Learn how to configure a non-root public URL by running `npm run build`.
			
 
				     -->
			
 
				+    <!-- Material-UI -->
			
 
				+    <!-- Icon -->
			
 
				+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
			
 
				+    <!-- Fonts -->
			
 
				+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
			
 
				     <title>React App</title>
			
 
				   </head>
			
 
				   <body>
			
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,29 +1,15 @@
 
				 import React from 'react';
			
 
				-import logo from './logo.svg';
			
 
				+// import logo from './logo.svg';
			
 
				 import './App.sass';
			
 
				-import CountCon from './container/CounterCon';
			
 
				+// import CountCon from './container/CounterCon';
			
 
				+
			
 
				 
			
 
				 const App: React.FC = () => {
			
 
				   return (
			
 
				     <div className="App">
			
 
				-     
			
 
				-      <header className="App-header">
			
 
				-        <img src={logo} className="App-logo" alt="logo" />
			
 
				-        <p>
			
 
				-          Edit <code>src/App.tsx</code> and save to reload.
			
 
				-        </p>
			
 
				-        <CountCon />
			
 
				-        <a
			
 
				-          className="App-link"
			
 
				-          href="https://reactjs.org"
			
 
				-          target="_blank"
			
 
				-          rel="noopener noreferrer"
			
 
				-        >
			
 
				-          Learn React
			
 
				-        </a>
			
 
				-      </header>
			
 
				+      <h3>App</h3>
			
 
				     </div>
			
 
				   );
			
 
				-}
			
 
				+};
			
 
				 
			
 
				 export default App;
			
--- a/src/actions/index.tsx
+++ b/src/actions/index.tsx
@@ -1,22 +0,0 @@
 
				-import { DECREMENT, INCREMENT } from '../constants';
			
 
				-
			
 
				-export interface IINCREMENTAction {
			
 
				-  type: INCREMENT;
			
 
				-}
			
 
				-
			
 
				-export interface IDECREMENTAction {
			
 
				-  type: DECREMENT;
			
 
				-}
			
 
				-
			
 
				-// 定义 modifyAction 类型，包含 IINCREMENTAction 和 IDECREMENTAction 接口类型
			
 
				-export type ModifyAction = IINCREMENTAction | IDECREMENTAction;
			
 
				-
			
 
				-// 增加 state 次数的方法
			
 
				-export const increment = (): IINCREMENTAction => ({
			
 
				-  type: INCREMENT,
			
 
				-});
			
 
				-
			
 
				-// 减少 state 次数的方法
			
 
				-export const decrement = (): IDECREMENTAction => ({
			
 
				-  type: DECREMENT,
			
 
				-});
			
--- a/src/components/Counter/Couter.sass
+++ b/src/components/Counter/Couter.sass
@@ -1,15 +0,0 @@
 
				-p
			
 
				-  color: white
			
 
				-.btn-wrapper
			
 
				-  display: flex
			
 
				-  & > div
			
 
				-    flex: 1
			
 
				-    border: 1px solid white
			
 
				-    border-radius: 5px
			
 
				-    margin: 0 10px
			
 
				-    line-height: 30px
			
 
				-    text-align: center
			
 
				-    transition: all .2s
			
 
				-    &:active
			
 
				-      color: #000
			
 
				-      background: #eee
			
--- a/src/components/Counter/Couter.tsx
+++ b/src/components/Counter/Couter.tsx
@@ -1,24 +0,0 @@
 
				-import * as React from 'react';
			
 
				-import './Couter.sass';
			
 
				-
			
 
				-// 创建类型接口
			
 
				-export interface IProps {
			
 
				-  value: number,
			
 
				-  onIncrement: () => void,
			
 
				-  onDecrement: () => void
			
 
				-}
			
 
				-
			
 
				-// 使用接口代替 PropTypes 进行类型校验
			
 
				-const Counter = ({ value, onIncrement, onDecrement }: IProps) => {
			
 
				-  return <p>
			
 
				-    Clicked: {value} times
			
 
				-    <br />
			
 
				-    <br />
			
 
				-    <div className="btn-wrapper">
			
 
				-       <div onClick={onIncrement}> + </div>
			
 
				-      <div onClick={onDecrement}> - </div>
			
 
				-    </div>
			
 
				-  </p>;
			
 
				-};
			
 
				-
			
 
				-export default Counter;
			
--- a/src/components/Hello/Hello.tsx
+++ b/src/components/Hello/Hello.tsx
@@ -0,0 +1,44 @@
 
				+import * as React from 'react';
			
 
				+import Button from '@material-ui/core/Button';
			
 
				+export interface Props {
			
 
				+  name: string;
			
 
				+  enthusiasmLevel?: number;
			
 
				+}
			
 
				+export default class Hello extends React.Component<Props, object> {
			
 
				+  constructor(props: Props) {
			
 
				+    super(props);
			
 
				+    this.state = { users: [] };
			
 
				+  }
			
 
				+  render() {
			
 
				+    const that = this;
			
 
				+    const { name, enthusiasmLevel = 1 } = that.props;
			
 
				+    function handleClick() {
			
 
				+      fetch('https://www.easy-mock.com/mock/59801fd8a1d30433d84f198c/example/user/all')
			
 
				+        .then(res => res.json())
			
 
				+        .then(data => {
			
 
				+          console.log(data);
			
 
				+          that.setState({ users: data });
			
 
				+        })
			
 
				+        .catch(e => console.log('错误:', e));
			
 
				+    }
			
 
				+    if (enthusiasmLevel <= 0) {
			
 
				+      throw new Error('You could be a little more enthusiastic. :D');
			
 
				+    }
			
 
				+
			
 
				+    return (
			
 
				+      <div className="hello">
			
 
				+        <div className="greeting">Hello {name + getExclamationMarks(enthusiasmLevel)}</div>
			
 
				+        <Button variant="contained" color="primary" onClickCapture={handleClick}>
			
 
				+          你好，世界
			
 
				+        </Button>
			
 
				+        <ul>
			
 
				+          {this.state.users && this.state.users.map((item, index) => <li key={index.toString()}>{item.name}</li>)}
			
 
				+        </ul>
			
 
				+      </div>
			
 
				+    );
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+function getExclamationMarks(numChars: number) {
			
 
				+  return Array(numChars + 1).join('!');
			
 
				+}
			
--- a/src/constants/index.tsx
+++ b/src/constants/index.tsx
@@ -1,7 +0,0 @@
 
				-// 定义正价 state 类型常量
			
 
				-export const INCREMENT = 'INCREMENT';
			
 
				-export type INCREMENT = typeof INCREMENT;
			
 
				-
			
 
				-// 定义减少 state 类型常量
			
 
				-export const DECREMENT = 'DECREMENT';
			
 
				-export type DECREMENT = typeof DECREMENT;
			
--- a/src/container/CounterCon.tsx
+++ b/src/container/CounterCon.tsx
@@ -1,21 +0,0 @@
 
				-import { connect } from 'react-redux';
			
 
				-import { Dispatch } from 'redux';
			
 
				-
			
 
				-import { decrement, increment } from '../actions';
			
 
				-import Counter from '../components/Counter/Couter';
			
 
				-import { StoreState } from '../types';
			
 
				-
			
 
				-
			
 
				-// 将 reducer 中的状态插入到组件的 props 中
			
 
				-const mapStateToProps = (state: StoreState): { value: number } => ({
			
 
				-    value: state
			
 
				-})
			
 
				-
			
 
				-// 将 对应action 插入到组件的 props 中
			
 
				-const mapDispatchToProps = (dispatch: Dispatch) => ({
			
 
				-    onDecrement: () => dispatch(decrement()),
			
 
				-    onIncrement: () => dispatch(increment())
			
 
				-})
			
 
				-
			
 
				-// 使用 connect 高阶组件对 Counter 进行包裹
			
 
				-export default connect(mapStateToProps, mapDispatchToProps)(Counter);
			
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,20 +1,15 @@
 
				 import React from 'react';
			
 
				 import ReactDOM from 'react-dom';
			
 
				-import { Provider } from 'react-redux';
			
 
				-import { createStore } from 'redux';
			
 
				+// import { Provider } from 'react-redux';
			
 
				+// import { createStore } from 'redux';
			
 
				 import './index.css';
			
 
				-import App from './App';
			
 
				-import reducer from './reducers';
			
 
				+// import App from './App';
			
 
				 import * as serviceWorker from './serviceWorker';
			
 
				-// 1、创建 store
			
 
				-const store = createStore(reducer);
			
 
				-ReactDOM.render(
			
 
				-  // 2、然后使用react-redux的Provider将props与容器连通起来
			
 
				-  <Provider store={store}>
			
 
				-    <App />
			
 
				-  </Provider>,
			
 
				-  document.getElementById('root'),
			
 
				-);
			
 
				+import Hello from './components/Hello/Hello';
			
 
				+import LogRocket from 'logrocket';
			
 
				+LogRocket.init('0hcr8k/react-ts');
			
 
				+
			
 
				+ReactDOM.render(<Hello name="TypeScript" enthusiasmLevel={10} />, document.getElementById('root') as HTMLElement);
			
 
				 
			
 
				 // If you want your app to work offline and load faster, you can change
			
 
				 // unregister() to register() below. Note this comes with some pitfalls.
			
--- a/src/logo.svg
+++ b/src/logo.svg
--- a/src/reducers/index.tsx
+++ b/src/reducers/index.tsx
@@ -1,16 +0,0 @@
 
				-import { ModifyAction } from '../actions';
			
 
				-import { DECREMENT, INCREMENT } from '../constants';
			
 
				-
			
 
				-// 处理并返回 state
			
 
				-export default (state = 0, action: ModifyAction): number => {
			
 
				-  switch (action.type) {
			
 
				-    case INCREMENT:
			
 
				-      if (state > 4) return state
			
 
				-      return state + 1;
			
 
				-    case DECREMENT:
			
 
				-      if (state === 0) return state
			
 
				-      return state - 1;
			
 
				-    default:
			
 
				-      return state;
			
 
				-  }
			
 
				-};
			
--- a/src/types/index.tsx
+++ b/src/types/index.tsx
@@ -1,2 +0,0 @@
 
				-// 定义 state 结构类型
			
 
				-export type StoreState = number;
			
--- a/yarn.lock
+++ b/yarn.lock