React学习: 01 创建React应用和安装Material-UI

安装 Node.js

macOS系统下先安装Node.js,否则无法进行以下的操作(当然其他操作系统亦然),

Nodej.s官方的下载地址:
http://nodejs.cn/download/

创建项目 Create React App

在项目的目录上层,终端下运行:

npx create-react-app my-app

就是这么简单! 不过首次运行会加载一些相关的包,可能会很慢,建议换成淘宝的镜像.

推荐安装nrm

在命令行执行命令， npm install -g nrm ，全局安装nrm。
执行命令 nrm ls 查看可选的源。
如果要切换到taobao源，执行命令 nrm use taobao 。
然后再次运行npx create-react-app my-app就会发现创建及下载资源的速度很快了.

安装 Material-UI 5.1

常规的安装可能会由于React的版本过高造成安装失败,可以尝试以下命令:
npm： npm install @mui/material @emotion/react @emotion/styled
yarn： yarn add @mui/material @emotion/react @emotion/styled
SVG 图标:
npm： npm install @mui/icons-material
yarn： yarn add @mui/icons-material

启动

npm start

测试Material-UI

在app.js中引入
import Button from '@material-ui/core/Button'

代码中加入一个按钮测试

<Button variant="contained" color="secondary">
        Secondary
</Button>

大功告成!

接下来,会通过一些实例来体验react的魅力.