React 入门（4）React+TypeScript

序言

 

设置淘宝镜像

npm config get cache

npm config get prefix

npm config get registry

npm config set registry https://registry.npmjs.org

npm config set registry https://registry.npm.taobao.org

npm

如果没有create-react-app命令行脚手架，可以先下载个

npm install -g create-react-app

然后我们使用其创建一个typescript项目

create-react-app my-app --tempalte typescript

进后项目，启动

npm start

yarn

注意：建议不要放在node的文件夹里，将其放在另一个文件夹，否则会影响node安装的全局命令使用。

yarn config set global-folder "D:\Web\Node\yarn\global"

yarn config set cache-folder "D:\Web\Node\yarn\cache"

创建项目

yarn create react-app react-typescript-app --typescript

yarn

yarn start

集成

less

https://www.cnblogs.com/lyzw-Y/p/11566631.html

webpack

yarn add webpack

ant design

yarn add antd

Redux 

yarn add redux

yarn add react-redux

yarn add redux-thunk  yarn add redux-saga

yarn add redux-logger

yarn add react-router-dom

DvaJS

 

Umi

全局安装umi,版本是2.0.0或以上

yarn global add umi

yarn create umi

umi block list

https://pro.ant.design/docs/block

 

创建页面

umi g page index

umi g page users

启动本地服务器

umi dev

概念

useState

import React, { useState } from 'react'
import './App.css'
 
export default function App() {
  
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Star');
  
  // 调用三次setCount便于查看更新队列的情况
  const countPlusThree = () => {
    setCount(count+1);
    setCount(count+2);
    setCount(count+3);
  }
  return (
    <div className='App'>
      <p>{name} Has Clicked <strong>{count}</strong> Times</p>
      <button onClick={countPlusThree}>Click *3</button>
    </div>
  )
}
复制代码

View Code