Web Knowledge Store

Appearance

意义 ​

现代的 Web 应用要考虑的问题很多，除了编写业务代码之外，还要考虑代码规范、预编译、压缩合并、打包上线等工作，需要有一套完整的解决方案来辅助我们快速开发，而 React 脚手架 就是这么一套完整的解决方案，它零配置，开箱即用，让我们从繁杂的 Webpack 配置当中解脱出来，更关注于业务本身。

使用 ​

使用 create-react-app 这个命令行工具，它是 React 官方团队出的一个构建 React 应用的脚手架工具。

方法一 (不推荐)

  1. 全局安装npm i -g create-react-app或者yarn global add create-react-app。
  2. 初始化项目create-react-app my-app，my-app 表示项目名称，可以修改。
  3. 启动项目：yarn startor npm start。

🙁 缺点：全局安装命令无法保证命令一直是最新版本。

方法二（推荐）

  1. 命令：npx create-react-app react-basic。
  2. 启动项目：yarn start or npm start。
  3. npx 是 npm@v5.2 版本新添加的命令，用来简化 npm 工具包的使用流程。

😄 优点：npx 会调用最新的 create-react-app 直接创建 React 项目。

❗ 注意：React 18 中不再支持 ReactDOM.render，请改用 createRoot，参考链接，如下。

js
// Before
import { render } from 'react-dom'
const container = document.getElementById('app')
render(<App tab='home' />, container)

// After
import { createRoot } from 'react-dom/client'
const container = document.getElementById('app')
const root = createRoot(container)
root.render(<App tab='home' />)

渲染自己的界面 ​

目标 ​

掌握通过 React 脚手架渲染页面的基本步骤。

img

步骤 ​

  1. 删除 src 和 public 目录中的所有内容。
  2. 新建 public/index.html。
  3. 新建 src/index.js 文件。
  4. 引入 React 核心库和涉及 DOM 操作的包。
  5. 调用 React.createElement() 方法创建 React 元素。
  6. 调用 ReactDOM.render() 方法渲染 React 元素到页面。

代码 ​

  1. 删除 src 和 public 目录中的所有内容。
  2. 新建 public/index.html。
html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

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

  1. 新建 src/index.js 文件。

  2. 引入 React 核心库和涉及 DOM 操作的包。

js
src/index.js
// create-react-app 脚手架生成的项目中已经下载好了 react 和 react-dom，无需重复下载，直接使用即可
import React from 'react'
import ReactDOM from 'react-dom'
  1. 调用 React.createElement() 方法创建 React 元素。
js
// 参数分别为：标签名、标签属性(对象)、子节点内容。后面的参数均为其后续的子节点。返回的是一个 React 元素（虚拟 DOM）
const title = React.createElement('h1', {color:'red'}, 'Hello World')
  1. 调用 ReactDOM.render() 方法渲染 React 元素到页面。
js
//要渲染的react元素,挂载点
ReactDOM.render(title, document.querySelector('#root'))

渲染自己的界面（React 18） ​

js
import ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<h1>Hello World</h1>)