ReactJS - 使用 Create React App 工具

让我们学习如何使用 Create React App 工具创建费用管理应用程序。

打开终端并转到您的工作区。

> cd /go/to/your/workspace

接下来，使用 Create React App 工具创建一个新的 React 应用程序。

> create-react-app fee-manager

它将创建一个新的文件夹 expense-manager，其中包含启动模板代码。

接下来，转到 expense-manager 文件夹并安装必要的库。

cd fee-manager
npm install

npm install 将在 node_modules 文件夹下安装必要的库。

接下来，启动应用程序。

npm start
Compiled successfully! 
You can now view react-cra-web-app in the browser. 

   Local:            http://localhost:3000 
   On Your Network:  http://192.168.56.1:3000
 
Note that the development build is not optimized. 
To create a production build, use npm run build.

接下来，打开浏览器，在地址栏中输入 http://localhost:3000，然后按 Enter。开发 Web 服务器将提供我们的网页，如下所示。

让我们分析一下 React 应用程序的结构。

文件和文件夹

React 应用程序的内容如下 −

|-- README.md
|-- node_modules
|-- package-lock.json
|-- package.json
|-- 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
   |-- reportWebVitals.js
   `-- setupTests.js

此处，

package.json 是代表项目的核心文件。它配置整个项目，包括项目名称、项目依赖项以及构建和运行应用程序的命令。

{
   "name": "expense-manager",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
      "@testing-library/jest-dom": "^5.11.6",
      "@testing-library/react": "^11.2.2",
      "@testing-library/user-event": "^12.6.0",
      "react": "^17.0.1",
      "react-dom": "^17.0.1",
      "react-scripts": "4.0.1",
      "web-vitals": "^0.2.4"
   },
   "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
   },
   "eslintConfig": {
      "extends": [
         "react-app",
         "react-app/jest"
      ]
   },
   "browserslist": {
      "production": [
         ">0.2%",
         "not dead",
         "not op_mini all"
      ],
      "development": [
         "last 1 chrome version",
         "last 1 firefox version",
         "last 1 safari version"
      ]
   }
}

package.json 在其依赖项部分引用了下面的 React 库。

• react 和 react-dom 是用于开发 Web 应用程序的核心 React 库。

• web-vitals 是用于支持不同浏览器中的应用程序的通用库。

• react-scripts 是用于构建和运行应用程序的核心 React 脚本。

• @testing-library/jest-dom、@testing-library/react 和 @testing-library/user-event 是用于在开发后测试应用程序的测试库。

• public 文件夹 −包含核心文件 index.html 和其他 Web 资源，如图像、徽标、机器人等，index.html 加载我们的 React 应用程序并将其呈现在用户的浏览器中。

• src 文件夹 − 包含应用程序的实际代码。我们将在下一节中检查它。

应用程序的源代码

让我们在本章中检查应用程序的每个源代码文档。

• index.js − 我们应用程序的入口点。它使用 ReactDOM.render 方法来启动和启动应用程序。代码如下 −

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
   <React.StrictMode>
      <App />
   </React.StrictMode>,
   document.getElementById('root')
);

// 如果您想开始测量应用中的性能，请传递一个函数
// 来记录结果(例如:reportWebVitals(console.log))
// 或发送到分析端点。了解更多信息:https://bit.ly/CRA-vitals
reportWebVitals();

这里，

React.StrictMode 是一个内置组件，用于通过分析组件的不安全生命周期、不安全的 API 使用、贬值的 API 使用等来防止意外错误，并引发相关警告。

• App 是我们应用程序的第一个自定义和根组件。所有其他组件都将在 App 组件内呈现。

index.css − 用于整个应用程序的样式。让我们删除所有样式并从新代码开始。

App.js − 我们应用程序的根组件。让我们替换现有的 JSX 并显示简单的 hello react 消息，如下所示 −

import './App.css'; 
function App() { 
   return ( 
      <h1>Hello React!</h1> 
   ); 
} 
export default App;

• App.css − 用于设置 App 组件的样式。让我们删除所有样式并从新代码开始。

• App.test.js − 用于为我们的组件编写单元测试函数。

• setupTests.js − 用于为我们的应用程序设置测试框架。

• reportWebVitals.js − 通用 Web 应用程序启动代码，支持所有浏览器。

• logo.svg − 徽标采用 SVG 格式，可以使用 import 关键字加载到我们的应用程序中。让我们将其从项目中删除。

reactjs_creating_application.html