React Project Management
In the article "Beginner's Guide to React - Building a React Runtime Environment", we only introduced how to build a React runtime environment, which is actually how to reference the React library. But I think it is still a bit confusing for novices to just read this article, after all, it is not a complete project. How to manage a React project has become a more difficult problem.
Below I will use my own example to introduce to you how to manage a React project.
For a complete project, we definitely need to build a server. In our project, we use node.js to build web services. Simply speaking, node.js can be considered as Apache+php.
The directory of the entire project is as follows
The api directory is the Node.js interface, src is the React source code, and the builds directory stores the packaged Javascript source code.
It should be noted that although the files in api, src and builds are all js files, the ones in api belong to Node.js, which runs on the server. The js in builds is used for client requests and runs on the browser. Therefore, please do not confuse the two.
As for how to use Node.js to build a web service, I have a simple code in the server.js file above. You can check the server.js file content to see how to build a web service. You can also download the complete code for reference.
So before we start learning, we should first simply build a web service. After building the web service, we can modify the code in src. As for how to modify the code on the server, there are many ways. We can use svn to check out the code on the server to the local, write the React code with the local editor, and then submit it through svn. In this way, the code in src can be modified. In the article "React Introduction - Building React Operating Environment" , we said that using the webpack –watch command can monitor whether the code in src has changed. If it has changed, it will be automatically repackaged into builds. So we only need to modify and submit our code.
If the IP address of my server is 192.168.5.201, the port that the node service listens on is 1001. Then the src in the <script> tag below becomes the http access method.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="content"></div>
<!-- Here type will also be changed to text/javascript or omitted -->
<script type="text/javascript" src="http://192.168.5.201:1001/builds/bundle.js"></script>
</body>
</html>
We can refer to the above article for comparison.
For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.
Related Articles
React Factory Method - Detailed Explanation of createFactory
Publish Date：2025/03/02 Views：88 Category：React
-
React.createFactory returns a function for generating ReactElement of a given type, similar to React.createElement. The type parameter can be an html tag name (for example: "div", "li", etc.) or a ReactClass object.
React Getting Started - Building a React Operating Environment
Publish Date：2025/03/02 Views：62 Category：React
-
React, a front-end framework developed by Facebook, is very popular. There are two ways to run React, one is to use npm, and the other is not to use npm. These involve react-dom, babel, webpack, etc.
Node.js 与 React JS 的比较
Publish Date：2023/03/27 Views：173 Category：Node.js
-
本文比较和对比了两种编程语言，Node.js 和 React。React 和 Node.js 都是开源 JavaScript 库的示例。 这些库用于构建用户界面和服务器端应用程序。
在 TypeScript 中 React UseState 钩子类型
Publish Date：2023/03/19 Views：247 Category：TypeScript
-
本教程演示了如何在 TypeScript 中使用 React useState hook。
TypeScript 中的 React 事件类型
Publish Date：2023/03/19 Views：477 Category：TypeScript
-
本教程演示了如何在 TypeScript 中为 React 事件添加类型支持。
在 React 中循环遍历对象数组
Publish Date：2023/03/18 Views：603 Category：React
-
在 React 中循环对象数组： 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组，其中包含传入函数的结果。 export default function App (
获取 React 中元素的类名
Publish Date：2023/03/18 Views：340 Category：React
-
在 React 中使用 event.target 获取元素的类名 获取元素的类名： 将元素上的 onClick 属性设置为事件处理函数。 访问元素的类名作为 event.currentTarget.className 。 export default function App () { cons
如何将 key 属性添加到 React 片段
Publish Date：2023/03/18 Views：206 Category：React
-
使用更详细的片段语法将 key 属性添加到 React 片段，例如 React.Fragment key={key} 。 更冗长的语法实现了相同的结果对元素列表进行分组，而不向 DOM 添加额外的节点。 import React from react
如何在 React 中删除事件监听器
Publish Date：2023/03/15 Views：594 Category：React
-
在 React 中删除事件监听器： 在 useEffect 挂钩中添加事件侦听器。 从 useEffect 挂钩返回一个函数。 当组件卸载时，使用 removeEventListener 方法移除事件监听器。 import {useRef, useEffect} from r
