React 应用构建(环境)

可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么?

一. 环境搭建

  • 工作编辑器:Visual Studio Code。
  • Javascript 解析器、运行环境 Node.js 的安装。
  • npm 安装:npm 是 Node.js 的软件包管理器。

二. 项目构建

1. 脚手架构建项目(JavaScript)

脚手架是快速帮助开发者搭建开发环境,用最简单方式创建一个简单 Hello World 项目。主要步骤分析如下所示。

全局、非全局安装脚手架环境,创建项目:

全局安装脚手架环境 create-react-app:

$ npm install -g create-react-app
# 查看安装版本
$ create-react-app -V
# 创建一个项目
$ create-react-app my-app

非全局安装,可以直接使用 npx(临时安装最新的脚手架):

# 安装、构建 react 项目
$ npx create-react-app my-app

运行项目:

# 运行项目
$ cd my-app
$ npm start

构建项目实际上会安装三个东西:

  • react:react 顶级库。
  • react-dom:因为 react 有很多的运行环境,比如 app 端的 react-native ,我们要在 web 上运行就使用 react-dom。
  • react-scripts:包含运行和打包 react 应用程序的所有脚本及配置。

其他命令:

# 1. 安装依赖 node_modules
$ npm install 缩写 npm i

# 2. nrm 是 npm 包的仓库管理软件,仓库链接地址托管给 nrm 管理,也就是镜像管理
$ npm i -g nrm # 安装 nrm
$ nrm ls # 查看可选源镜像
$ nrm use xxx # 切换镜像
$ nrm current # 查看当前镜像源

# 3. 清除 npm 缓存
$ npm cache clean --force

第一个项目解析 chess-game:

项目入口:index.html 里面加载一个空的 div 节点:

<div id="root"></div>

项目解析:

// 从 React 的包中引入了 React。只要你写 React.js 组件就必须引入 React,因为 React 里有一种语法叫 JSX。要写 JSX 就必须引入 React。
import React from "react";
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去。它是从 react-dom 中引入的。
import ReactDOM from "react-dom"

// ReactDOM 里有一个 render 方法,功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上
// 利用 React DOM 模块 渲染一段 DIV 节点,把整段节点插入到 root 节点中。
ReactDOM.render(<Game />, document.getElementById("root"))

// React 18 替换之前写法如下:
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Game />);

2. 脚手架构建项目(TypeScript)

脚手架是快速帮助开发者搭建开发环境,这里脚手架采用 TypeScript 模版创建一个项目。

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

3. Umi 脚手架构建项目

在工作空间目录下建个空目录用来存放项目:

$ mkdir myapp && cd myapp

通过官方工具创建项目:

$ yarn create @umijs/umi-app
# 或 
$ npx @umijs/create-umi-app

安装依赖:

$ yarn install

启动项目:

$ yarn start

4. Umi + dva + antd + mobile

项目以 UMI + DVA 为底层框架,以 Ant Design Mobile 为 UI 组件库,快速构建 H5 应用。

热门相关:绍宋   黜龙   国破山河在   苍穹龙骑   覆汉