❮ ReactJS 创建 React 应用程序 ReactJS 创建 React 应用程序 ❯

ReactJS - 自定义代码

更新于 2025/3/23 8:37:17

自定义代码

让我们删除应用程序的默认源代码并引导应用程序，以便更好地了解 React 应用程序的内部结构。

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

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

应用程序的最终结构如下 −

|-- 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

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

> expense-manager@0.1.0 start D:\path	o\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	o\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:            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。应用程序的结果如下所示 −

使用自定义解决方案

正如我们之前所了解的，Create react app 是启动 React 应用程序的推荐工具。它包括开发 React 应用程序的所有内容。但有时，应用程序不需要 Crzzeate React App 提供的所有功能，我们希望我们的应用程序小巧整洁。然后，我们可以使用我们自己的定制解决方案来创建 React 应用程序，只需足够的依赖项来支持我们的应用程序即可。

要创建自定义项目，我们需要掌握四项基本知识。

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