安装typescript:

npm install -g typescript

安装yarn:

npm install -g yarn

安装react-devtools

yarn global add react-devtools

创建React项目：

npx create-react-app my-app
npx create-react-app my-app --template typescript

安装Material-UI，此安装非全局安装，需要在项目目录下执行该指令

npm install @material-ui/core
npm install @material-ui/icons
npm install @material-ui/data-grid
npm install recharts
npm install fontsource-roboto

安装Redux

npm install @reduxjs/toolkit
npm install redux-devtools
npm install react-redux

删除Material-UI

npm uninstall @material-ui/core

npm指令

npm install
npm start
npm run build

非根目录部署

如在机器人Home文件夹的docs子文件夹中部署，需要在package.json配置文件中添加homepage属性：

{
  		"homepage": ".",
}

把build后的程序代码一键复制到机器人的Web服务器目录下

xcopy /Y /S build "C:\Users\CNMIZHU7\Documents\RobotStudio\Virtual Controllers\Controller_Aprol\HOME\docs"

更新已渲染的元素

React 元素是不可变对象。一旦被创建，就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

尽管每次都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容，考虑 UI 在任意给定时刻的状态，而不是随时间变化的过程，能够消灭一整类的 bug。

通过上述两点，可以认为，React元素每次刷新都会重新创建，但是React元素重新创建并不意味着Web页面内容会刷新，这些只是后台程序的处理方式，当React元素全部创建好后，React Dom再根据这些元素确定是否更新页面上显示给用户的内容。如果相同，则不更新，如果不相同，则更新。react的核心思想是虚拟Dom，React Dom才是实际的Dom。

组件名称必须以大写字母开头。

React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而则代表一个组件，并且需在作用域内使用 Welcome。

回调函数中，class的方法默认不会绑定this

通过在constructor构造函数中添加绑定语句实现：this.handleClick = this.handleClick.bind(this);
使用实验性的 public class fields 语法
在回调中使用箭头函数

事件处理

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。