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
How to avoid cross-origin (CORS) issues in React/Next.js
Publish Date：2025/03/17 Views：170 Category：NETWORK
-
In this article, we will introduce how to avoid cross-origin (CORS) issues in React/Next.js. Cross-origin resource sharing (CORS) is a protocol that defines how web requests should be handled when crossing different URLs.
React Tutorial - Transferring Props
Publish Date：2025/03/16 Views：188 Category：React
-
React transfers Props. Props are generated when components are encapsulated. Components expose some properties (Props) to the outside world to complete some functions.
React Tutorial: Props Anti-Pattern
Publish Date：2025/03/16 Views：187 Category：React
-
React's Props anti-pattern, using Props to generate state in getInitialState is an anti-pattern - Anti-Pattern.
React Tutorial - Props Validation
Publish Date：2025/03/16 Views：102 Category：React
-
Props validation is a very useful way to use components correctly. It can avoid many bugs and problems as your application becomes more and more complex. In addition, it can make your program more readable.
React tutorial: Types of Props for child components
Publish Date：2025/03/16 Views：172 Category：React
-
Usually, the child components of a React component are a group, that is, the child components are an array. Introduction to Type of the Children Props.
How to solve the error Uncaught TypeError: Cannot read properties of undefined in
Publish Date：2025/03/16 Views：153 Category：React
-
In the process of React development, we often encounter some errors. Here we look at an error reported in App.js. The error is as follows: App.js:69 Uncaught TypeError: Cannot read properties of undefined (reading 'setState') at onInput
Why do you need to bind event handlers in React Class Components?
Publish Date：2025/03/16 Views：60 Category：React
-
When using React, we must have come across control components and event handlers. We need to use `.bind()` in the constructor of the custom component to bind these methods to the component instance. As shown in the following code:
Solution to the error ＂does not contain a default export＂ in React
Publish Date：2025/03/16 Views：191 Category：React
-
When we try to use `default import` to import from a module that does not have a `default export`, we get a "does not contain a default export" error. To fix the error, make sure the module has named exports and wrap the import in curly braces, e.g.
Error in React: Attempted import error 'X' is not exported from Solution
Publish Date：2025/03/16 Views：78 Category：React
-
In React, the error “Attempted import error 'X' is not exported from” in React.js occurs when we try to import a named import that does not exist in the specified file. To fix the error, make sure the module has named exports and you have not obfu
