ReactJS - 自定义代码
自定义代码
让我们删除应用程序的默认源代码并引导应用程序，以便更好地了解 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 作为我们的开发服务器。
reactjs_creating_application.html
