可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么?
一. 环境搭建
- 工作编辑器: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 应用。
标签:npm,react,app,React,构建,应用,脚手架,create From: https://www.cnblogs.com/hubert-style/p/17847207.html