初识package.json，两个重要字段不能忽略

开发环境的搭建有很多种方式。

我选择在本地搭建 React 开发环境，这与实践更加接近。在初学时，我们可以通过 Create React App 创建项目。它是 React 初学者创建单页应用的最佳方式。

使用之前，请确保你的电脑上安装了比较新版本的 Node.js 。否则可能会出现一些问题

将新项目取名为 zapp，在命令行工具中，我们只需要执行如下指令，就可以创建一个 React 项目

npx create-react-app zapp

本书会结合 TypeScript 来编写所有案例，因此，我们使用如下指令安装基于 TypeScript 的项目。

npx create-react-app zapp --template typescript

具体的操作指令在命令行工具中已经告诉了我们。

// 进入项目所在文件夹
cd zapp

// 启动项目
yarn start

// 打包项目
yarn build

// 暴露出项目的具体配置，以便于在此基础上扩展/修改更多配置
yarn eject

进入并启动项目，在浏览器中输入 http://localhost:3000，「通常该页面会自动打开」，我们会看到如下界面。

注意关注命令行工具的提示。

我们可以直接在浏览器地址栏输入 http://localhost:3000 访问项目。

也可以输入 http://192.168.2.101:3000 访问项目。如果你的手机与电脑处于同一局域网中，我们也可以通过该地址在手机上访问项目，这对于移动端开发的调试非常有用。

认识项目

package.json

项目的配置文件。在初学时我们只需要认识如下两个重要的字段即可。

dependencies

该项目的所有依赖包及其版本的描述。当我们在命令行工具中执行如下指令时，依赖包会重新安装

// 使用 npm
npm install

// 使用 yarn
yarn install

例如当前我们项目中，使用了 React ，在该字段下就会有如下配置

"react": "^18.0.0",

当你在阅读该文章时，此处的依赖包以安装时的最新版本为主，本书后续所有的案例都基于 React 18 来展开

react 表示该依赖包的名称，18.0.0 表示该依赖包的版本号。版本号之前我们看到有一个 ^ 符号。该符号表示在安装依赖包时，会安装当前包的最新版本。

这个细节在实践中非常重要。一个大型项目中，依赖包比较多，如果某个依赖包更新之后产生了破坏性的更新，我们无法感知，当你重新安装依赖包之后，有一定的风险导致之前的调试好的功能出现 bug。因此实践中建议在项目创建之初删除该符号，以确保依赖包版本稳定。

也可以使用 yarn.lock 锁住版本

• scripts

我们启动项目时，使用的是 yarn start。这里的指令就是从 scripts 字段中来的。我们可以在该字段中定义属于我们自己的指令，例如，我们要区分不同环境时，可以自定义如下指令启动项目

也可以使用 npm start

// 针对 dev 环境的启动指令
"start:dev": "react-scripts start && node build.js dev",

// 针对 test 环境的启动指令
"start:test": "react-scripts start && node build.js test"

然后配合自定义的 build.js 中分别处理不同的环境变量，我们就可以用 npm start:dev 启动开发环境的项目，用 npm start:test 启动测试环境的项目。

// 启动开发环境的项目
yarn start:dev

// 启动测试环境的项目
yarn start:test

node_modules

该文件夹是项目所有依赖包的存放地址。除了在项目初始化时安装的所有依赖包之外，后续通过 yarn/npm 安装的包都存放在该目录下。

需要注意的是，当我们使用 git 管理项目时，该文件夹必须被忽略掉，我们应该在 .gitignore 中添加如下的配置

// .gitignore
/node_modules

我们不需要把该依赖包中的内容上传到 git 仓库中，而应该在首次拉取 git 项目代码之后，执行 yarn install 重新安装依赖包。

public

项目的入口文件。通常我们会将 index.html 存放在该目录中。构建工具会自动帮助我们补全一些逻辑，例如引入必要的 JavaScript 代码。

对于 React 项目来说，index.html 中通常在初始情况下，只会提供如下代码

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

项目的更多内容，会通过 React 的 API 插入到该根节点中

由于当前时间 React 18 刚更新不久，所以你使用 create-react-app 创建的项目可能还在使用老版本的 API ReactDOM.render，调整成下面代码的内容即可

import React from 'react';
// @ts-ignore
import { createRoot } from 'react-dom/client'
import App from './App';
import './index.css';

const root = createRoot(document.getElementById('root'))
root.render(<App />)

但是 React 逻辑都被打包在一个 JavaScript 文件中，页面初始化时，需要等到该 JavaScript 文件加载完成之后才会执行。在这个空档时间页面会出现白屏，因此为了填充这个白屏时间，我们往往在初始化时，往 root 根节点中写入一些默认内容：loading、骨架等

<div id="root">
  <span>页面加载中...</span>
</div>

src

所有的 React 模块与组件代码都存放在该目录下。index.tsx 是所有 React 逻辑的入口文件。在该文件的逻辑中，所有的 React 组件被最终聚合成为一个组件 App，并通过如下代码渲染到页面中

const root = createRoot(document.getElementById('root'))
root.render(<App />)

在该项目中，每一个文件都可以是一个独立的模块，React 中使用 ES6 Modules 语法来引入别的模块/组件。

在该项目的默认代码中，我们可以看到，App 组件由如下几个部分组成

• logo.svg
• App.css
• 一个 html 片段

在 App.tsx 中这些部分被聚合在一起形成一个组件。index.tsx 在使用时，只需要引入该组件即可

import App from './App';

这一章基础内容就介绍到这里，下一章我们将通过认识标签元素的本质来进一步学习。