React App入门教程：从创建到部署

### 知识点详解 #### Create React App入门 **Create React App** 是一个用于设置React应用程序的官方开发环境。它提供了一个零配置的脚手架工具，可以帮助开发者快速开始创建单页应用程序。通过Create React App，开发者可以避免复杂的配置过程，专注于编写应用代码。 #### 可用脚本 在Create React App项目目录中，通常会有几个预设的脚本来帮助开发者管理项目的运行状态。 - `yarn start`：这个脚本用于启动项目的开发服务器。当运行这个命令后，应用程序会在开发模式下运行，通常会打开默认的浏览器窗口指向应用的根URL。开发者在编写代码时，任何更改都会自动触发浏览器页面的重新加载。同时，控制台中会显示错误信息，这对于快速发现并修复代码问题非常有帮助。 - `yarn test`：这个脚本用于启动测试运行器。在Create React App中，默认使用Jest作为测试工具，并且支持快照测试、单元测试以及集成测试等。交互式监视模式意味着，只要有任何代码变化，测试就会重新执行，从而帮助开发者保持代码质量。 - `yarn build`：执行这个脚本后，React应用会被打包构建到`build`文件夹中，用于生产环境。这个构建过程会对React应用进行优化，例如代码分割、提取公共资源以及压缩等。构建完成后，应用的文件名会包含哈希值，以确保浏览器能够加载最新版本的应用，同时避免缓存问题。构建完成后，开发者可以将应用部署到生产服务器。 - `yarn eject`：这是一个单向操作，一旦执行，项目会从Create React App的封装中“弹出”，你可以查看到完整的构建配置和依赖关系。通常，这一步是必要的，当你需要自定义构建配置，比如添加特殊插件或者调整webpack配置时。然而，一旦执行了`eject`，就无法返回到封装状态，因为相关的配置和依赖文件已经被复制到你的项目中。 #### JavaScript 在这个上下文中，`JavaScript`是项目的核心技术之一。Create React App生成的项目默认支持使用ES6+语法，并且可以通过Babel转译成ES5，以确保代码在所有浏览器中运行。JavaScript不仅用于构建组件逻辑，还可以通过各种库和框架（如React、Redux、Axios等）来增加项目的功能和效率。JavaScript在React应用中承担了数据流动、事件处理、状态管理以及用户界面渲染等关键角色。 #### 压缩包子文件的文件名称列表：crwn-clothing-master 这里的“压缩包子文件的文件名称列表”暗示了一个名为“crwn-clothing-master”的文件压缩包。在开发中，我们可能会遇到需要上传或分享源代码的情况，这时通常会将整个项目目录压缩成一个文件以便传输。在这里，“crwn-clothing-master”很可能是一个示例项目名称，而`-master`表明这是主分支的代码。开发者在进行版本控制时，往往会有不同的分支来代表项目的不同阶段或版本。主分支通常是项目的核心分支，承载着最新的、准备发布的代码。在进行项目共享时，压缩整个分支的代码可以确保接收者能够完整地获取项目的所有文件，包括源代码、配置文件、依赖项等。