学习React记录篇09--CRA

现在开始正式学习React的脚手架

Create React App（或 CRA）是一种官方支持的创建单页 React 应用程序的方式。这意味着它由 React 支持和维护，并且它是开始构建单页 React 应用程序的一种更简单的方法。

单页应用程序是使用单个 index.html 构建的网站，JavaScript 负责根据 URL 重写内容。CRA 有一个官方文档网站，鼓励您查看：create-react-app.dev

 

它涵盖了基础知识和高级配置（例如模板）。

为什么使用CRA而不是webpack？

编写自己的 webpack 配置既耗时又容易出错，因此建议使用 create-react-app。

 脚本的使用

 

 在package.json可以配置运行的命令

npm run start 这是您在开始使用应用程序时将使用的主要命令。 npm run start 将使用 webpack 启动一个网络服务器，您可以通过 localhost:3000 访问它 该命令将使用 React 的开发版本，这将在本章末尾进行介绍。

npm run build 当你准备好部署你的项目时，你应该运行 npm run build 来创建你的应用程序的优化版本。 它会缩小你所有的脚本，并在你部署你的应用程序之前执行一些优化。优化后的文件将被放置在一个名为 build 的新文件夹中。 我们将在后面的章节中介绍本课程的部署。 该命令将使用 React 的生产版本，这将在本章末尾进行介绍。

npm run test 此命令用于运行测试，帮助您评估您的代码是否仍按预期工作。但是，您必须在开发应用程序时编写这些测试。 开箱即用，您在 src/App.test.js 中获得了一个示例测试。

npm run eject 您可能已经注意到 create-react-app 生成的项目不包含任何 webpack 配置或其他配置文件。那是因为一切都隐藏在反应脚本中。 create-react-app 的目标是让您更轻松地构建 React 应用程序，而无需专注于配置。 npm runeject 允许您取消隐藏这些配置，以便您可以编辑它们。 但是请注意，不建议这样做。 弹出配置是永久性的（意味着您无法撤消），您最终将不得不维护自己的 Webpack 配置。 这对一些大公司来说可能有意义，但如果你是一个单独的开发者或一个小团队，在大多数情况下不建议这样做。

 

 

 

 

 

 React生产环境和测试环境

 

 在React中组件分为有状态和无状态，区别在于组件是否处理状态，也就是无状态组件不会出现useState

为了简化和重构项目，一般会将页面拆分

对于无状态组件，我们会传入props，可以是数据也可以是函数

 在useState返回的状态更新函数中自带一个previousValue，

 

 由于React的数据更新是异步的，所以上面的代码counter等于1

为了避免不必要的错误，可以将代码改写成以下部分