## React网站和Create React App 网站的区别
React网站和create React App网站是两个不同的实体。React是一个用于构建用户界面的JavaScript库，由Facebook开发并维护。它提供了一种声明式的、高效的、灵活的方式来构建用户界面。而create React App是一个由Facebook官方提供的用于快速搭建React应用的脚手架工具。它帮助开发者快速启动一个新的React项目，提供了一套预置的配置和工具，使得创建和管理React应用变得更加简单和高效。
create React App网站提供了详细的文档和指南，帮助开发者了解如何使用这个工具来初始化、开发和部署React应用。它还包含了一些最佳实践和建议，以及与React生态系统相关的最新动态和更新。总的来说，React网站提供了React库的相关信息和文档，而create React App网站则专注于提供与使用create React App工具相关的信息和资源。
在实际开发中，开发者可以通过React网站学习React库的知识和技能，然后使用create React App工具来快速搭建和管理自己的React应用。这两个网站共同构成了React开发生态系统的重要组成部分，为开发者提供了丰富的资源和工具来构建现代化的Web应用程序。
**注意**：我们建议使用 `create-react-app` 来专注于学习 React。你将能够在这里学到的东西应用到[像 Next.js](https://nextjs.org/) 这样的 React 框架中。
## 安装 create-react-app
1. 更新[[Node.js]]，用[[nvm]]工具
2. 更新 [[Node.js|nvm]]
3. 安装`create-react-app`
```
npx create-react-app myfirstreactapp //myfirstreactapp为文件夹命名，随意更改
```
## 命令
```
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd myfirstreactapp
npm start
```
## 文件结构
```
myfirstreactapp
├── node_modules
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── serviceWorker.js
│ └── setupTests.js
├── .gititgnore
├── package.json
├── package-lock.json
└── README.md
```
您所看到的大部分内容对于您的网络应用程序的访问者来说是不可见的。 React 使用一个名为 [[Webpack]]的工具，它将此处的目录和文件转换为静态资源。您网站的访问者将获得这些静态资产。
- [[GitHub gitignore File]] :忽略不能上传到 GitHub 的项目，例如`.DS_Store`
## package.json
- `name` 是应用程序的名称
- `version`是当前版本
- `private": true` 是一种故障安全设置，以避免意外将您的应用程序发布为 npm 生态系统中的公共包。
- `dependencies` 包含**应用程序所需的所有必需的节点模块和版本**。
- 在上图中，您将看到六个依赖项。前三个是用于测试的目的。
- 接下来的两个依赖项允许我们在 JavaScript 中使用 `react` 和 `react-dom`。
- 最后，`react-scripts` 提供了一组有用的开发脚本来使用 React。
- `scripts` 指定别名，您可以使用这些别名以更有效的方式访问某些 `react-scripts` 命令。例如，在命令行中运行 `npm test` 将在幕后运行 `react-scripts test --env=jsdom` 。
- `eslintConfig` 和 `browserslist`。这两个都是 Node 模块，有自己的一组值。 `browserslist` 提供有关应用程序的浏览器兼容性的信息，而 `eslintConfig` 负责[代码检查](https://stackoverflow.com/questions/8503559/what-is-linting)。
## node_modules
该目录包含当前 React 应用程序使用的包的依赖项和子依赖项，由 **package.json** 指定。共生成 853 个子文件夹。该文件夹会自动添加到.gitignore文件中。
## package-lock.json
此文件包含安装在 **node_modules/** 中的确切依赖关系树。这为开发私有应用程序的团队提供了一种方法，以确保他们具有相同版本的依赖项和子依赖项。它还包含 **package.json** 的更改历史记录，因此您可以快速回顾依赖项更改。
## public
```
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
```
该目录包含将直接提供的资源，无需 webpack 进行额外处理。 **index.html**提供 [[Web app]]的入口点。项目中还包括：**网站图标**、**mainfest.json**。**mainfest.json**将 Web 应用程序添加到 Android 用户的主屏幕后的行为方式。
## src
```
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── serviceWorker.js
│ └── setupTests.js
```
此文件夹包含将由 webpack 处理的 JavaScript，是 React 应用程序的核心。其中，**registerServiceWorker.js**。该服务工作者负责为最终用户缓存和更新文件。它允许在初次访问后提供离线功能和更快的页面加载。有关此方法的更多信息，请参见[此处](https://developers.google.com/web/fundamentals/primers/service-workers)。
## component/ view/
随着 React 应用程序的增长，通常会添加 **components/** 目录来组织组件和组件相关文件，以及添加 **views/** 目录来组织 React 视图和视图相关文件。
# Next Steps下一步
如果您想了解有关 `create-react-app` 的更多信息，请从 [create-react-app 网站上的文档](https://create-react-app.dev/docs/getting-started)开始。
由于创建 React 应用程序后重要的下一步是设置环境来调试它，因此请考虑查看我们的 [[React 开发人员工具]]。在那里，我们使用 `create-react-app` 创建的初始框架让您准备好开始调试 React 应用程序。
# 参考资料
- [Creating a React App](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-react-components-860d3f06-e0ad-456f-b7fa-d5aef4dd565d/articles/how-to-create-a-react-app)
- [webpack 核心概念的高级概述](https://webpack.js.org/concepts/)
- [Service Worker 概览]([https://developer.chrome.com/docs/workbox/service-worker-overview?hl=zh-cn]())
- [React 开发人员工具](https://readwise.io/reader/shared/01hhwyb17rywd8hwyqqnhrr4xp)