ReactJS - 自定义代码

自定义代码

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

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

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

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

让我们创建一个新组件 HelloWorld 来确认我们的设置工作正常。创建一个文件，HelloWorld.js components 文件夹下，编写一个简单的组件来发出 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 folder* 下），这将是应用程序的入口点。


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

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

> expense-manager@0.1.0 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: 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 应用程序。

要创建自定义项目，我们需要具备 4 项的基本知识。

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

打印本页