A graphic content management method based on React framework

Abstract

The present invention discloses a graphic content management method based on the React framework, which belongs to the field of React and includes the following steps: creating a project through create-react-app and installing dependencies such as drag-and-drop functions, API requests, and a rich text editor, building a RESTful API and a MongoDB database based on Node.js for storing graphic content and layout information. Create text, image, and container components, support dynamic rendering and drag-and-drop functions, and update page previews in real time through React state management. The rich text editor supports inserting images, modifying styles, and saving in JSON format. After the user drags or edits, the status is updated and the data is sent to the server through the API, and the back-end parses and updates the database. When the page loads, content is dynamically generated and components are loaded on demand, and virtual scrolling technology is used to improve performance. Tests are written using Jest and React Testing Library to verify functional correctness. The front-end is deployed to Netlify, and the back-end service is deployed to AWS.

Description

Technical Field

[0001] The present invention relates to the field of React, and more specifically, to a graphic and text content management method based on a React framework. Background Art

[0002] The graphic and text content management method based on the React framework is a modern content management solution that solves the problems of frequent page refreshes, high coupling between the front-end and back-end, and insufficient interactivity in traditional CMS systems. By leveraging React's componentization and dynamic rendering features, developers can build a flexible and efficient content management platform that implements modular graphic and text editing and real-time preview functions. This method supports mixed text and graphic typesetting, multimedia embedding, and complex content layout design through integration with rich text editors (such as Draft.js or Slate.js), greatly improving the user's editing experience. In addition, React's one-way data flow and state management tools (such as Redux or Context API) make content synchronization and storage more efficient. Combined with responsive design and React Native, cross-platform compatibility and mobile support can also be achieved.

[0003] However, its biggest drawback is the high complexity of early development. This can increase development costs, especially for complex scenarios that require custom rich text editors or performance optimizations like lazy loading and tiled rendering. Therefore, while React-based approaches can significantly improve the interactive experience and scalability, their development threshold can be a major limitation for teams with limited technical expertise. Summary of the Invention

[0004] The present invention aims to provide a method for managing graphic content based on the React framework to address the issues raised in the aforementioned background technology. Its greatest drawback is the high complexity of early development, particularly for complex scenarios requiring customized rich text editors or performance optimizations, such as lazy loading and fragmented rendering, which can increase development costs. Therefore, while React-based methods can significantly improve the interactive experience and scalability, their development threshold can be a major limitation for teams with insufficient technical expertise.

[0005] Technical solution: 1. The method for managing graphic content based on the React framework includes the following steps:

[0006] S1. Create a project using create-react-app and install dependent libraries; including drag-and-drop functionality, API requests, and a rich text editor; build a RESTful API based on Node.js, and design a table structure using MongoDB to store graphic content and layout information;

[0007] S2. Create text components, image components, and container components to support content display and attribute configuration;

[0008] The text component, the image component, and the container component receive content data and layout data and dynamically render through props; use the drag function to implement draggable components and placement areas; update the component position and modify the local state when the drag is completed;

[0009] Dynamically update the preview area through React's state management to display the page effect after dragging in real time;

[0010] S3. Use the rich text editor to create a configurable text editing tool that supports inserting images, modifying fonts and color styles, and saving the editing results in JSON format;

[0011] S4. When the user completes the drag and drop and edit operation, the component content and layout data are updated to the state management tool, including Redux and Context APIs. The API is used to call the backend API and send the latest data in JSON format to the server via the POST method. The backend parses the data and updates the database.

[0012] S5. When the page loads, the saved component content and layout information is obtained through the API request; based on the stored component tree and layout data, the page is dynamically generated to achieve a complete display of the content;

[0013] S6. Use React.lazy and Suspense to load images and large file components on demand; use virtual scrolling technology react-window to render long lists and large amounts of data in sections;

[0014] Add anti-shake mechanisms for high-frequency user operations such as dragging and saving to reduce unnecessary status updates and API requests;

[0015] S7. Use Jest and React Testing Library to write unit tests and integration tests to verify the correctness of dragging, editing, saving, and page rendering; deploy the front-end to Netlify; deploy the back-end services and database to the cloud platform AWS.

[0016] Preferably, the S2 dynamically updates the preview area through React's state management, and displays the page effect after dragging in real time, including the following steps:

[0017] The x and y coordinates of the dragged element are stored in React's useState. Each element has a separate state to manage its position. When a drag operation occurs, the element's position is reflected by updating the state.

[0018] Create an array of objects containing element positions and contents. Each element has a unique ID, position coordinates, and content. React automatically re-renders the corresponding elements based on the state.

[0019] S2-1-2. When the user starts dragging, the initial position of the dragged element is recorded and the style of the dragged element is set to indicate that the dragged element is being dragged. During the dragging process, the position changes of the touch point are continuously monitored and the new position of the element is dynamically calculated. Whenever the position changes, the state update method setState is called to update the coordinates of the element, triggering React to re-render and update the position of the dragged element in real time. When the dragging operation ends, the final position of the element is updated, the final position is saved to the database, and other operations are triggered.

[0020] React re-renders the component in the updated state after the state is updated. When the position of the dragged element changes, React re-renders the dragged element according to the new position and displays the latest effect on the page. React's virtual DOM comparison mechanism, diffing, ensures that only the parts that need to change are updated.

[0021] Because state updates trigger rendering, React immediately displays the new position of the element during each drag operation;

[0022] Preferably, limit the frequency of each drag update through throttling technology; update the state only once within a certain time interval; if there are a large number of drag elements on the page, use react-window to only render the elements within the viewport;

[0023] The coordinates of the touch point are converted and corrected, and the mouse coordinates are compared with the coordinates of the parent container to calculate the accurate drag position. If there are multiple draggable elements on the page, when one element is dragged, the layout and position of the other elements are also adjusted at the same time. React updates the position of each element according to its independent state, and synchronizes the layout of other elements on the page.

[0024] Calculate and check the drag range of the element during implementation to prevent the element from being dragged out of the predetermined area.

[0025] Preferably, through the React framework, the page rendering process is data-driven and includes the following steps:

[0026] S2-2-1. When the page loads, the frontend retrieves JSON data containing the component tree and layout data from the backend and local storage; the retrieved data is parsed and converted into a component configuration object;

[0027] S2-2-2. The front-end dynamically creates component instances based on the parsed data. Each component type (text, image, button) is mapped to a specific React component, and the component's attributes and styles are passed to the component as data. Through React's virtual DOM, the component is rendered into actual page elements.

[0028] S2-2-3. The layout data determines the display style of each component, including the position, size, and spacing of each component; the layout data is applied to the component through the style attribute style, so that the component is displayed in the expected manner;

[0029] S2-2-4. After the component tree and the layout data are passed to React, React creates and renders components based on the component tree and the layout data. Each component renders the corresponding HTML element based on its own properties. At the same time, React handles the hierarchical relationship between components, so that child components are nested within the parent component and arranged in the correct order.

[0030] S2-2-5. After the page is rendered, each component and the layout data are dynamically updated; when the user interacts with the page, the state of each component changes; React detects the state change and automatically re-renders the parts that need to be updated.

[0031] Preferably, the S6 uses the virtual scrolling technology react-window to render long lists and large amounts of data in sections, including the following steps:

[0032] S6-1. When the user scrolls the list, React-window only renders the list items in the current visible area and hides those that are not visible;

[0033] When the user starts scrolling the list, React-window monitors the scroll position in real time and calculates the items that need to be rendered based on the current visible area. Only the list items in the visible area are rendered, and other items are "unloaded" or hidden;

[0034] React-window divides long lists into multiple segments and blocks, each segment represents a visible area; whenever the user scrolls to a new area, React-window recalculates the new visible area and only renders the items within the new visible area;

[0035] S6-2. As the user continues to scroll, React-window dynamically updates the rendered content; the dynamic update calculates the visible range based on the current viewport and only updates those items; React-window ensures efficient rendering through virtual DOM technology;

[0036] S6-3. React-window only renders content within the viewport; React-window reduces memory usage; React-window uses virtual DOM comparison to determine which parts have changed during scrolling and only updates the content that needs to be updated.

[0037] Preferably, a real-time collaboration function is introduced through WebSocket technology, combined with React and the back-end real-time communication framework Socket.Io, to achieve real-time synchronous editing by multiple people; the real-time collaboration function is that the user's editing operations on graphic content will be instantly updated to all user interfaces participating in the editing, allowing multiple users to edit the same page and content block at the same time, and see the modifications of other users in real time.

[0038] Preferably, before introducing real-time collaboration, it is necessary to install socket.io-client on the front end and socket.io on the back end;

[0039] Use socket.io to establish a WebSocket connection in Node.js. Whenever a user edits content, the edited content and location are pushed to all connected clients via WebSocket. Use socket.io-client to establish a WebSocket connection in React and listen for edit data pushed by the server to achieve real-time synchronization.

[0040] Preferably, Redux is used to manage the state of the component. When the user edits the content, the local state is updated and the changes are sent to the server via WebSocket. Every time the user performs an editing operation such as dragging, modifying text, and adjusting the layout, the changes are immediately sent to the server via WebSocket. After the server receives the changed data, it broadcasts the changed data to all clients, and the updated content is immediately visible on other user interfaces.

[0041] A simple locking mechanism and version numbers are used to ensure that conflicts do not arise when multiple users edit the same element; if two users try to edit the same content, the system prompts the user that a conflict has occurred and provides the option to merge and overwrite.

[0042] Preferably, socket.io is used to monitor the client's editing events (dragging and text input) and update the content in the database in real time. Whenever the content is updated, the server pushes the updated content to all other connected clients via WebSocket, so that every user sees the same content.

[0043] When each user is editing, the cursor position and editing traces of other users are displayed in real time; the cursors of different users are marked with different colors to let users know which parts are being edited by others;

[0044] When a user is editing content, if someone else is also editing the same part, the system will display a prompt to inform that the current content is being processed by other editors.

[0045] Compared with the prior art, the advantages of the present invention are:

[0046] (1) Introducing virtual scrolling technology to render only the content in the current visible area, solving the performance issues of rendering long lists and large amounts of data; using on-demand loading and lazy loading technologies to reduce resource usage and optimize page loading speed.

[0047] (2) A state-driven synchronization mechanism is used to ensure that drag-and-drop editing operations are immediately reflected in the page preview, and the operation is smooth and without delay.

[0048] (3) Utilize component trees and layout data to dynamically parse and generate page content, supporting complex layouts and highly customized requirements.

[0049] (4) Enhanced support for dynamically sized components and nested layouts, improving scalability; improved cross-platform adaptability to ensure consistent performance on different devices and resolutions.

[0050] (5) Optimize the smoothness of dragging and editing, achieve seamless integration of editing and previewing, and significantly improve user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0051] Figure 1 This is a schematic diagram of the overall system of a method for managing graphic and text content based on the React framework of the present invention; DETAILED DESCRIPTION

[0052] For examples, see Figure 1 A method for managing graphic content based on a React framework includes the following steps:

[0053] S1. Create a project using create-react-app and install dependent libraries; including drag-and-drop functionality, API requests, and a rich text editor; build a RESTful API based on Node.js, and design a table structure using MongoDB to store graphic content and layout information;

[0054] S2. Create text components, image components, and container components to support content display and attribute configuration;

[0055] Text components, image components, and container components receive content data and layout data and render dynamically through props; use the drag-and-drop function to implement draggable components and drop areas; update the component position and modify the local state when the drag is completed;

[0056] Dynamically update the preview area through React's state management to display the page effect after dragging in real time;

[0057] S3. Use a rich text editor to create a configurable text editing tool that supports inserting images, modifying fonts and colors, and saving editing results in JSON format.

[0058] S4. When the user completes the drag and drop and edit operation, the component content and layout data are updated to the state management tool, including Redux and the Context API. The backend API is called using an API request, and the latest data is sent to the server in JSON format via the POST method. The backend parses the data and updates the database.

[0059] Specifically, the technical steps to send JSON data through the POST method and update the database are as follows:

[0060] Organize the data generated by user operations (such as the layout after dragging or the modified graphic content) into a structured format and convert it into JSON.

[0061] Use the POST method to send JSON data to the backend API, and set the request header to indicate the data format (such as application / json).

[0062] The server receives the request from the front-end through the specified API path and extracts the JSON data in the request body.

[0063] Parse the received JSON data to confirm that its format and content meet expectations. During the verification process, check the necessary fields and data integrity. If there are any exceptions, return an error message.

[0064] Use the parsed data to locate the record in the database that needs to be updated. For example, find the corresponding entry by a unique identifier (such as an ID).

[0065] Based on the parsed data content, the new information is written to the relevant fields in the database, overwriting the old values. This ensures that the update process complies with transaction consistency and avoids data incompleteness or conflicts.

[0066] After confirming that the update operation is successful, the data is persisted and stored. If an error occurs, the transaction mechanism is used to roll back the operation to ensure the stability of the database state.

[0067] Feedback the update results to the front end, usually returning a status code and operation information in JSON format, such as the reason for update success or failure.

[0068] Based on the results returned by the backend, the frontend page status is updated or the user is prompted. If the operation is successful, the latest data is synchronized to the frontend; if it fails, the user is prompted and given the option to try again.

[0069] S5. When the page loads, the saved component content and layout information is obtained through API requests. Based on the stored component tree and layout data, the page is dynamically generated to achieve a complete display of the content.

[0070] S6. Use React.lazy and Suspense to load images and large file components on demand; use virtual scrolling technology react-window to render long lists and large amounts of data in sections;

[0071] Add anti-shake mechanisms for high-frequency user operations such as dragging and saving to reduce unnecessary status updates and API requests;

[0072] S7. Use Jest and React Testing Library to write unit tests and integration tests to verify the correctness of dragging, editing, saving, and page rendering; deploy the front-end to Netlify; deploy the back-end services and database to the cloud platform AWS.

[0073] Specifically, unit testing: verify the core logic of functional components

[0074] Goal: Verify that a component's layout data is updated correctly after a drag operation.

[0075] Steps: Simulate the user dragging the component and trigger the onDrag or onDrop callback.

[0076] Check whether the changes in layout data in the component tree or state are as expected (such as coordinates, size).

[0077] Verify that the event handling function is called correctly during the drag process.

[0078] Ensure boundary conditions (such as exceeding container boundaries or invalid operations) are handled correctly.

[0079] Objective: Verify that the data update logic is correct after the user edits the graphic content.

[0080] Steps: Simulate text input in the input box or changes to component properties.

[0081] Checks that the component state is correctly updated with the user input value.

[0082] Verify that update functions (such as onChange callbacks) are triggered correctly during editing.

[0083] Objective: Verify that the save operation correctly triggers a backend API call and returns a success or failure status.

[0084] Steps: Simulate the click event of the save button to trigger the save function.

[0085] Use Jest's mock function to simulate API requests and check whether the correct request data (such as JSON format) is sent.

[0086] Verify that the component's status or prompt information is updated to the correct value when the save succeeds or fails.

[0087] Goal: Verify that the initial rendering and dynamic updates of a component are correct.

[0088] step:

[0089] Load the component with mock data and check whether the initial state (such as layout and content) is rendered correctly.

[0090] Simulate state changes to verify that components only re-render the affected parts (improves performance).

[0091] Integration testing: Verify the integrity of interactions between functions

[0092] Objective: Verify that drag and drop operations are reflected in the page preview in real time.

[0093] step:

[0094] Simulates the user dragging the component to the target location.

[0095] Check whether the page preview area correctly displays the layout changes after dragging.

[0096] Ensure that drag operations do not affect unmodified parts of the component.

[0097] Goal: Verify that the save functionality after editing content works correctly and is reflected on the page.

[0098] step:

[0099] Simulate user editing operations on graphic and text content.

[0100] Click the Save button to trigger the save logic and simulate the backend returning a successful status.

[0101] Check that the page preview area is correctly updated with the latest content after saving.

[0102] Test whether an error message is displayed correctly or the user is prompted to try again when saving fails.

[0103] Objective: Verify that the initial loading of the page and dynamic data updates are working properly.

[0104] step:

[0105] Use mock data to simulate the initial state, load the component and check if it renders correctly.

[0106] Simulate user-triggered dynamic loading (such as scrolling to load more content) to check whether the new content is inserted into the page correctly.

[0107] Verify that when data changes, the state of existing content remains unchanged.

[0108] Rendering verification: Use the query methods of the React Testing Library (such as getByText and getByRole) to verify that DOM elements are rendered correctly.

[0109] Event triggering: simulate user operations (such as click, input, drag) through fireEvent.

[0110] State checking: Directly access the internal state or DOM properties of the component to verify the correctness of the updated data.

[0111] API Calls: Use Jest's mocking functionality to verify that API requests are sent as expected and that return values ​​are handled correctly.

[0112] Performance monitoring: Ensure unnecessary rendering is minimized (via React Profiler or snapshot testing).

[0113] S2 uses React's state management to dynamically update the preview area. The following steps are included to display the page effect after dragging in real time:

[0114] The x and y coordinates of the dragged element are stored in React's useState. Each element has a separate state to manage its position. When a drag operation occurs, the element's position is reflected by updating the state.

[0115] Create an array of objects containing element positions and contents. Each element has a unique ID, position coordinates, and content. React automatically re-renders the corresponding elements based on the state.

[0116] S2-1-2. When the user starts dragging, the initial position of the dragged element is recorded and the style of the dragged element is set to indicate that the dragged element is being dragged. During the dragging process, the position changes of the touch point are continuously monitored and the new position of the element is dynamically calculated. Whenever the position changes, the state update method setState is called to update the coordinates of the element, triggering React to re-render and update the position of the dragged element in real time. When the dragging operation ends, the final position of the element is updated, the final position is saved to the database, and other operations are triggered.

[0117] React re-renders the component in the updated state after the state is updated. When the position of the dragged element changes, React re-renders the dragged element according to the new position and displays the latest effect on the page. React's virtual DOM comparison mechanism, diffing, ensures that only the parts that need to change are updated.

[0118] Because state updates trigger rendering, React immediately displays the new position of the element during each drag operation;

[0119] Use throttling technology to limit the frequency of each drag update; update the state only once within a certain time interval; if there are a large number of drag elements on the page, use react-window to only render the elements within the viewport;

[0120] Specifically, the throttling technology implementation steps are:

[0121] Record time: During the dragging process, record the time when the update was last triggered.

[0122] Judgment interval: Each time a drag event is triggered, check the difference between the current time and the last trigger time:

[0123] If the time difference is less than the preset interval (for example, 50ms), ignore the trigger.

[0124] If the time difference is greater than or equal to the interval time, execute the update logic and update the recorded time.

[0125] Drag smoothness: Setting the time interval requires a balance between performance and user experience:

[0126] A shorter time interval (such as 16ms) can provide a smoother dragging experience, but at the expense of higher computation and rendering overhead.

[0127] A longer time interval (such as 50ms) will significantly improve performance, but may result in less smooth dragging.

[0128] Match the hardware refresh rate: Modern browsers typically refresh the page at 60fps (about 16ms per frame), so the interval can be matched to this to avoid unnecessary updates.

[0129] The coordinates of the touch point are converted and corrected, and the mouse coordinates are compared with the coordinates of the parent container to calculate the accurate drag position. If there are multiple draggable elements on the page, dragging one element will adjust the layout and position of the other elements simultaneously. React updates the position of each element based on its independent state, and synchronizes the layout of other elements on the page.

[0130] Calculate and check the drag range of the element during implementation to prevent the element from being dragged out of the predetermined area.

[0131] Specifically, determine the towing range

[0132] Container range: Get the position and size of the limited area (such as a container) of the drag operation, and determine the upper, lower, left, and right boundary values ​​of the container.

[0133] Size of the dragged element: Calculate the width and height of the dragged element to determine the relationship between its active range and the boundary of the container.

[0134] The maximum and minimum positions of the dragged element are determined by the container boundaries and the size of the dragged element:

[0135] Horizontal range: Limits the left and right movable range of the element to prevent it from being dragged out of the left or right boundary of the container.

[0136] Vertical range: Limits the vertical range of an element to prevent it from being dragged out of the top or bottom boundaries of the container.

[0137] Start dragging: Records the starting position of the drag operation, including the mouse position and the initial position of the dragged element in the container.

[0138] Real-time update during dragging: Calculate the current position of the dragged element based on the mouse movement distance. Determine the new coordinates through dynamic calculation of the current position.

[0139] When calculating the new coordinates of the dragged element, limit its value to a predetermined range:

[0140] If the horizontal position exceeds the left boundary, it is adjusted to the left boundary value; if it exceeds the right boundary, it is adjusted to the right boundary value.

[0141] If the vertical position exceeds the upper boundary, it is adjusted to the upper boundary value; if it exceeds the lower boundary, it is adjusted to the lower boundary value.

[0142] This constraint ensures that the draggable element remains within the container's bounds, even if the user attempts to drag it beyond the bounds.

[0143] Based on the calculated and constrained coordinate values, update the position of the dragged element to visually reflect the user's drag operation while keeping the element within the legal range.

[0144] At the end of the drag, ensure that the element's position is still within the legal range.

[0145] If the drag operation causes the position to be out of range, it should be corrected to the boundary value.

[0146] With the React framework, the page rendering process is data-driven and includes the following steps:

[0147] S2-2-1. When the page loads, the frontend retrieves JSON data containing the component tree and layout data from the backend and local storage; the retrieved data is parsed and converted into a component configuration object;

[0148] S2-2-2. The front-end dynamically creates component instances based on the parsed data. Each component type (text, image, button) is mapped to a specific React component, and the component's attributes and styles are passed to the component as data. Through React's virtual DOM, the component is rendered into actual page elements.

[0149] S2-2-3. Layout data determines the display style of each component, including its position, size, and spacing. Layout data is applied to components through style attributes, so that the components are displayed as expected.

[0150] S2-2-4. After the component tree and layout data are passed to React, React creates and renders components based on the component tree and layout data. Each component renders the corresponding HTML element according to its own properties. At the same time, React handles the hierarchical relationship between components, so that child components are nested inside the parent component and arranged in the correct order.

[0151] S2-2-5. After the page is rendered, each component and layout data is dynamically updated; as the user interacts with the page, the state of each component changes; React detects the state change and automatically re-renders the parts that need to be updated.

[0152] S6 uses the virtual scrolling technology react-window to render long lists and large amounts of data in sections, including the following steps:

[0153] S6-1. When the user scrolls the list, React-window only renders the list items in the current visible area and hides those that are not visible;

[0154] When the user starts scrolling the list, React-window monitors the scroll position in real time and calculates the items that need to be rendered based on the current visible area. Only the list items in the visible area are rendered, and other items are "unloaded" or hidden;

[0155] React-window divides long lists into multiple segments and blocks, each segment represents a visible area; whenever the user scrolls to a new area, React-window recalculates the new visible area and only renders items within the new visible area;

[0156] S6-2. As the user continues to scroll, React-window dynamically updates the rendered content. Dynamic updates calculate the visible range based on the current viewport and only update those items. React-window uses virtual DOM technology to ensure efficient rendering.

[0157] S6-3. React-window only renders content within the viewport; React-window reduces memory usage; React-window uses virtual DOM comparison to determine which parts have changed during scrolling and only updates the content that needs to be updated.

[0158] The real-time collaboration function is introduced through WebSocket technology, combined with React and the back-end real-time communication framework Socket.Io, to achieve real-time synchronous editing by multiple people; the real-time collaboration function means that the user's editing operations on graphic content will be instantly updated to the user interfaces of all participating editors, allowing multiple users to edit the same page and content block at the same time and see other users' modifications in real time.

[0159] Before introducing real-time collaboration, you need to install socket.io-client on the front end and socket.io on the back end;

[0160] Use socket.io to establish a WebSocket connection in Node.js. Whenever a user edits content, the edited content and location are pushed to all connected clients via WebSocket. Use socket.io-client to establish a WebSocket connection in React and listen for edit data pushed by the server to achieve real-time synchronization.

[0161] Redux is used to manage component state. When a user edits content, the local state is updated and the changes are sent to the server via WebSocket. Every time a user performs an editing operation such as dragging, modifying text, or adjusting the layout, the changes are immediately sent to the server via WebSocket. After the server receives the changed data, it broadcasts it to all clients, allowing other user interfaces to instantly see the updated content.

[0162] A simple locking mechanism and version numbers are used to ensure that conflicts do not arise when multiple users edit the same element; if two users try to edit the same content, the system prompts the user that a conflict has occurred and provides the option to merge and overwrite.

[0163] Socket.io listens for client editing events such as dragging and text input, and updates the database content in real time. Whenever content is updated, the server pushes the updated content to all other connected clients via WebSocket, so that every user sees the same content.

[0164] When each user is editing, the cursor position and editing traces of other users are displayed in real time; the cursors of different users are marked with different colors to let users know which parts are being edited by others;

[0165] When a user is editing content, if someone else is also editing the same part, the system will display a prompt to inform that the current content is being processed by other editors.

[0166] The above shows and describes the basic principles, main features and advantages of the present invention; those skilled in the art should understand that the present invention is not limited to the above embodiments, and the above embodiments and descriptions are only preferred examples of the present invention and are not intended to limit the present invention. Without departing from the spirit and scope of the present invention, the present invention may have various changes and improvements, and these changes and improvements all fall within the scope of the present invention to be protected; the scope of protection claimed in the present invention is defined by the attached claims and their equivalents.

Claims

1. A graphic content management method based on the React framework, characterized in that: The method for managing graphic content based on the React framework includes the following steps: S1. Create a project using create-react-app and install dependent libraries; including drag-and-drop functionality, API requests, and a rich text editor; build a RESTful API based on Node.js, and design a table structure using MongoDB to store graphic content and layout information; S2. Create text components, image components, and container components to support content display and attribute configuration; The text component, the image component, and the container component receive content data and layout data and dynamically render through props; use the drag function to implement draggable components and placement areas; update the component position and modify the local state when the drag is completed; Dynamically update the preview area through React's state management to display the page effect after dragging in real time; S3. Use the rich text editor to create a configurable text editing tool that supports inserting images, modifying fonts and color styles, and saving the editing results in JSON format; S4. When the user completes the drag and drop and edit operation, the component content and layout data are updated to the state management tool, including Redux and Context APIs. The API is used to call the backend API and send the latest data in JSON format to the server via the POST method. The backend parses the data and updates the database. S5. When the page loads, the saved component content and layout information is obtained through the API request; based on the stored component tree and layout data, the page is dynamically generated to achieve a complete display of the content; S6. Use React.lazy and Suspense to load images and large file components on demand; use virtual scrolling technology react-window to render long lists and large amounts of data in sections; Add anti-shake mechanisms for high-frequency user operations such as dragging and saving to reduce unnecessary status updates and API requests; S7. Use Jest and React Testing Library to write unit tests and integration tests to verify the correctness of dragging, editing, saving, and page rendering; deploy the front-end to Netlify; deploy the back-end services and database to the cloud platform AWS.

2. The method for managing graphic content based on the React framework according to claim 1, characterized in that: The S2 dynamically updates the preview area through React's state management, and displays the page effect after dragging in real time, including the following steps: The x and y coordinates of the dragged element are stored in React's useState. Each element has a separate state to manage its position. When a drag operation occurs, the element's position is reflected by updating the state. Create an array of objects containing element positions and contents. Each element has a unique ID, position coordinates, and content. React automatically re-renders the corresponding elements based on the state. S2-1-2. When the user starts dragging, the initial position of the dragged element is recorded and the style of the dragged element is set to indicate that the dragged element is being dragged. During the dragging process, the position changes of the touch point are continuously monitored and the new position of the element is dynamically calculated. Whenever the position changes, the state update method setState is called to update the coordinates of the element, triggering React to re-render and update the position of the dragged element in real time. When the dragging operation ends, the final position of the element is updated, the final position is saved to the database, and other operations are triggered. React re-renders the component in the updated state after the state is updated. When the position of the dragged element changes, React re-renders the dragged element according to the new position and displays the latest effect on the page. React's virtual DOM comparison mechanism, diffing, ensures that only the parts that need to change are updated. Because state updates trigger rendering, React immediately displays the element’s new position during each drag operation.

3. The method for managing graphic content based on the React framework according to claim 2, characterized in that: Use throttling technology to limit the frequency of each drag update; update the state only once within a certain time interval; if there are a large number of drag elements on the page, use react-window to only render the elements within the viewport; The coordinates of the touch point are converted and corrected, and the mouse coordinates are compared with the coordinates of the parent container to calculate the accurate drag position. If there are multiple draggable elements on the page, when one element is dragged, the layout and position of the other elements are also adjusted at the same time. React updates the position of each element according to its independent state, and synchronizes the layout of other elements on the page. Calculate and check the drag range of the element during implementation to prevent the element from being dragged out of the predetermined area.

4. The method for managing graphic content based on the React framework according to claim 2, characterized in that: With the React framework, the page rendering process is data-driven and includes the following steps: S2-2-1. When the page loads, the frontend retrieves JSON data containing the component tree and layout data from the backend and local storage; the retrieved data is parsed and converted into a component configuration object; S2-2-2. The front-end dynamically creates component instances based on the parsed data. Each component type (text, image, button) is mapped to a specific React component, and the component's attributes and styles are passed to the component as data. Through React's virtual DOM, the component is rendered into actual page elements. S2-2-3. The layout data determines the display style of each component, including the position, size, and spacing of each component; the layout data is applied to the component through the style attribute style, so that the component is displayed in the expected manner; S2-2-4. After the component tree and the layout data are passed to React, React creates and renders components based on the component tree and the layout data. Each component renders the corresponding HTML element based on its own properties. At the same time, React handles the hierarchical relationship between components, so that child components are nested within the parent component and arranged in the correct order. S2-2-5. After the page is rendered, each component and the layout data are dynamically updated; when the user interacts with the page, the state of each component changes; React detects the state change and automatically re-renders the parts that need to be updated.

5. The method for managing graphic content based on the React framework according to claim 1, characterized in that: The S6 uses the virtual scrolling technology react-window to render long lists and large amounts of data in sections, including the following steps: S6-1. When the user scrolls the list, React-window only renders the list items in the current visible area and hides those that are not visible; When the user starts scrolling the list, React-window monitors the scroll position in real time and calculates the items that need to be rendered based on the current visible area. Only the list items in the visible area are rendered, and other items are "unloaded" or hidden. React-window divides long lists into multiple segments and blocks, each segment represents a visible area; whenever the user scrolls to a new area, React-window recalculates the new visible area and only renders the items within the new visible area; S6-2. As the user continues to scroll, React-window dynamically updates the rendered content; the dynamic update calculates the visible range based on the current viewport and only updates those items; React-window ensures efficient rendering through virtual DOM technology; S6-3. React-window only renders content within the viewport; React-window reduces memory usage; React-window uses virtual DOM comparison to determine which parts have changed during scrolling and only updates the content that needs to be updated.

6. The method for managing graphic content based on the React framework according to claim 1, characterized in that: The real-time collaboration function is introduced through WebSocket technology, combined with React and the back-end real-time communication framework Socket.Io, to achieve real-time synchronous editing by multiple people; the real-time collaboration function means that the user's editing operations on graphic content will be instantly updated to all participating user interfaces, allowing multiple users to edit the same page and content block at the same time and see other users' modifications in real time.

7. A method for managing graphic content based on a React framework according to claim 6, characterized in that: Before introducing real-time collaboration, you need to install socket.io-client on the front end and socket.io on the back end; Use socket.io to establish a WebSocket connection in Node.js. Whenever a user edits content, the edited content and location are pushed to all connected clients via WebSocket. Use socket.io-client to establish a WebSocket connection in React and listen for edit data pushed by the server to achieve real-time synchronization.

8. The method for managing graphic and text content based on the React framework according to claim 7, characterized in that: Redux is used to manage component state. When a user edits content, the local state is updated and the changes are sent to the server via WebSocket. Every time a user performs an editing operation such as dragging, modifying text, or adjusting the layout, the changes are immediately sent to the server via WebSocket. After the server receives the changed data, it broadcasts it to all clients, allowing other user interfaces to instantly see the updated content. A simple locking mechanism and version numbers are used to ensure that conflicts do not arise when multiple users edit the same element; if two users try to edit the same content, the system prompts the user that a conflict has occurred and provides the option to merge and overwrite.

9. The method for managing graphic and text content based on the React framework according to claim 6, characterized in that: Use socket.io to listen to the client's editing events, such as drag and drop, and text input, and update the content in the database in real time; Whenever the content is updated, the server pushes the updated content to all other connected clients via WebSocket, so that every user sees the same content; When each user is editing, the cursor position and editing traces of other users are displayed in real time; the cursors of different users are marked with different colors to let users know which parts are being edited by others; When a user is editing content, if someone else is also editing the same part, the system will display a prompt to inform that the current content is being processed by other editors.

Images