序言
设置淘宝镜像
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> ) } 复制代码