ReactJS - 自定义代码

自定义代码

让我们移除应用程序的默认源代码并引导应用程序，以便更好地理解 React 应用程序的内部机制。

删除 src 和 public 文件夹下的所有文件。

接下来，在 src 下创建一个名为 components 的文件夹，以包含我们的 React 组件。我们的想法是创建两个文件，`.js` 用于编写组件逻辑，`` 用于包含特定于组件的样式。

应用程序的最终结构如下所示：

|-- package-lock.json
|-- package.json
`-- public
   |-- index.html
`-- src
   |-- index.js
   `-- components
   |  |-- mycom.js
   |  |-- mycom.css

让我们创建一个新的组件 HelloWorld 来确认我们的设置是否正常工作。在 components 文件夹下创建一个名为 HelloWorld.js 的文件，并编写一个简单的组件来输出 Hello World 消息。

import React from "react";

class HelloWorld extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
         </div>
      );
   }
}
export default HelloWorld;

接下来，在 src 文件夹下创建我们的主文件 index.js，并调用我们新创建的组件。

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

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

接下来，创建一个 html 文件 index.html（位于 public 文件夹下*），它将作为我们应用程序的入口点。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Expense Manager</title>
   </head>
   <body>
      <div id="root"></div>
   </body>
</html>

运行应用程序

让我们通过调用 package.json 文件中配置的启动脚本运行应用程序。

> npm start

它将在本地系统中启动应用程序，可以通过浏览器访问 @ https://127.0.0.1:3000。

> [email protected] start D:\path\to\expense-manager
> react-scripts start

i ｢wds｣: Project is running at http://192.168.56.1/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from D:\path\to\expense-manager\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled successfully!

You can now view expense-manager in the browser.

   Local:            https://127.0.0.1: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.

打开您喜欢的浏览器，然后转到 https://127.0.0.1:3000。应用程序的结果如下所示：

使用自定义解决方案

正如我们之前了解到的，Create React App 是启动 React 应用程序的推荐工具。它包含开发 React 应用程序所需的一切。但有时，应用程序不需要 Create React App 提供的所有功能，我们希望我们的应用程序更小巧简洁。然后，我们可以使用我们自己的自定义解决方案来创建 React 应用程序，并仅包含足以支持我们应用程序的依赖项。

要创建自定义项目，我们需要具备以下四个方面的基本知识。

包管理器 - 高级应用程序管理。我们使用 npm 作为默认的包管理器。
编译器 - 将 JavaScript 变体编译成浏览器支持的标准 JavaScript。我们使用 Babel 作为默认的编译器。
打包器 - 将多个源文件（JavaScript、html 和 css）捆绑到一个可部署的代码中。Create React App 使用 webpack 作为其打包器。让我们在接下来的部分学习如何使用 Rollup 和 Parcel 打包器。
Web 服务器 - 启动开发服务器并启动我们的应用程序。Create React App 使用内部 Web 服务器，我们也可以使用 serve 作为我们的开发服务器。

reactjs_creating_application.htm

打印页面