react-typescript-redux-router入门

2019-05-15 admin

示例是使用antd组件库作测试的,有react-router和redux穿插,项目比较

基本效果如图

2019-05-15_164507.png

创建项目

> npx create-react-app react-typescript-demo --typescript 

项目结构:

react-typescript-demo
  node_modules
  public
    favicon.ico
    index.html
    manifest.json
  src
    pages
      a.tsx
      b.tsx
    store
      index.js
    App.css
    App.test.tsx
    App.tsx
    index.css
    index.tsx
    logo.svg
    react-app-env.d.ts
    serviceWorker.ts
  .gitignore
  package.json
  README.md
  tsconfig.json
  yarn.lock

package.json

{
  "name": "react-typescript-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.13",
    "@types/node": "12.0.1",
    "@types/react": "16.8.17",
    "@types/react-dom": "16.8.4", // @types/react和@types/react-dom是在create-react-app创建项目时生成的
    "antd": "^3.18.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.0.3",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.1",
    "redux": "^4.0.1",
    "typescript": "3.4.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": { // typescript版本的文件依赖
    "@types/react": "^16.8.17",
    "@types/react-redux": "^7.0.9",
    "@types/react-router": "^5.0.0",
    "@types/react-router-dom": "^4.3.3"
  }
}

index.tsx 主文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// 引入antd相关
import { LocaleProvider } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import 'antd/dist/antd.css';

import { BrowserRouter } from 'react-router-dom';
import {Provider} from "react-redux";
import store from './store';

// ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(
    <Provider store={store}>
        <LocaleProvider locale={zhCN}>
            <BrowserRouter>
                <App/>
            </BrowserRouter>
        </LocaleProvider>
    </Provider>, 
    document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.tsx

import React, {Component} from 'react';
import './App.css';
import { Switch, Route } from 'react-router';
import { NavLink } from 'react-router-dom';
import { Layout } from 'antd';
import A from './pages/a';
import B from './pages/b';
import { Dispatch } from 'redux';
import { connect } from "react-redux";

const { Header, Footer, Sider, Content } = Layout;

interface Props {
  cName: string,
  changeName?: any
}

interface State {
  name: string
}

class App extends Component<Props> {

  // constructor(props: Props){
  //   super(props);
  // }

  render() {
    console.log(this.props.cName);
    return (
      <Layout>
        <Sider>
          <ul>
            <li><NavLink to="/a" activeClassName="selected">page a</NavLink></li>
            <li><NavLink to="/b" activeClassName="selected">page b</NavLink></li>
          </ul>
        </Sider>
        <Layout>
          <Header>Header</Header>
          <Content>
            <Switch>
              <Route exact path="/a" component={A}/>
              <Route path="/b" component={B}/>
              <Route component={A}/>
            </Switch>
            <p style={{fontSize: 24, color: '#f00'}}>{this.props.cName}</p>
          </Content>
          <Footer>Footer</Footer>
        </Layout>
      </Layout>
    )
  }

  componentDidMount() {
    setTimeout(() => {
      this.props.changeName({
        name: 'jack'
      });
    }, 1500);
  }
}

// 把state放到props里
function mapStateToProps(state: State) {
  return {
    cName: state.name
  }
}

// 把方法放到props里
function mapDispatchToProps(dispatch: Dispatch) {
  return {
    changeName: (payload: object)=>dispatch({type: 'CHANGE_NAME', payload: payload})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

store/index.js

import {createStore} from 'redux';

function toDo(state, action) {
  state = state || {name: 'tom'};
  switch (action.type) {
    case 'CHANGE_NAME':
      return {...state, ...action.payload};
    default:
      return state;
  }
}

let store = createStore(toDo);

export default store;

page/a.tsx

import React, {Component} from 'react';
import { Button } from 'antd';

class A extends Component {
  render() {
    return (
      <div>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="danger">Danger</Button>
        <Button type="link">Link</Button>
      </div>
    )
  }
}

export default A;

page/b.tsx

import React, {Component} from 'react';
import { Avatar } from 'antd';

class B extends Component {
  render() {
    return (
      <div>
        <div>
          <Avatar size={64} icon="user" />
          <Avatar size="large" icon="user" />
          <Avatar icon="user" />
          <Avatar size="small" icon="user" />
        </div>
        <div>
          <Avatar shape="square" size={64} icon="user" />
          <Avatar shape="square" size="large" icon="user" />
          <Avatar shape="square" icon="user" />
          <Avatar shape="square" size="small" icon="user" />
        </div>
      </div>
    );
  }
}

export default B;

[转载]原文链接:https://segmentfault.com/a/1190000019190724

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65038.html

文章标题:react-typescript-redux-router入门

相关文章
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
HTML5之WebSocket入门3 -通信模型socket.io
socket.io为什么会诞生呢?请看下面文字说明。 为什么需要socket.io? node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服...
2017-03-29
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
Grunt入门教程(自动任务运行器)
在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时。Grunt就是为了解决这个问题而...
2017-03-27
Windows系统下Node.js的简单入门教程
随着近日Paypal和Netflix宣告 迁移到Node.js, 服务器端Javascript平台已经证明其自身在企业领域的价值. 这对于Node来说是一小步,对于Javascript而言却是一大跨越啊! 来自.NET, Java, PHP...
2017-03-24
当 Egg.js 遇上 Typescript
# 前言 TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript 的静态类型检查,智能提示,IDE 友好性等特...
2018-04-14
c#程序员对TypeScript的认识过程
简介 TypeScript一直发展不错,我们公司在开发新功能时,考虑到程序的可维护性,使用了TypeScript编写浏览器上的程序,我们是从零开始使用TypeScript,甚至我连javascript也是半罐子,本文描述了一个c#程序员认识...
2017-03-25
一个适合新手的react小demo
之前一直都是在用vue,这两个月换了个公司,不过现在又离职了,这里什么框架都用, vue、angular、react,一般公司都是选二项技术去开发已经就够了, 要不是vue+angular或是react+angular个人觉得用了vue还来...
2018-01-11
webpack入门+react环境配置
本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g creat...
2017-03-20
TypeScript 中接口详解
在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScript 的时候,所有的接口都会被擦除掉,因为 JavaScript 中并没有接口这一概念。 先看看一个简单的例子: function printLabel(labe...
2017-03-25
回到顶部