What is the best way to implement CRUD - DOM on ReactJS?

Question

JavaScript

Recently started learning React. According to the already traditional study of JS libraries / frameworks, there is a desire to implement a simple CRUD operation in relation to a DOM element, for example, a list element.
Having surfed the Internet, I found several ready-made full-fledged applications, but I want the most basic example that can be immediately repeated and expanded.
Naturally, since I decided to use React, I want the elements to change dynamically for all people on the site, i.e., if one person created a list element, then the other person will see it too.
Question 1 - is there a suitable example somewhere?
Question2 - Is one react.js enough for me, or do I need to use a framework for this?

Answer 1

about question 2 : you will need to take something else. For example, you can use web sockets to send events to all subscribers: element_created / deleted, etc. Without such a "mailing" to subscribers (connected clients), it will not work, unless there will be some kind of crutch with a timer (don't do it like that).
regarding question 1 , in the absence of a good simple example at hand, I propose to do it step by step, if possible - I assure you, it will go much better with the "extension":
For example, there is a page with phone numbers and a name.
On this page, you have the PhonesAndNames component at the time componentDidMount makes an xhr call and gets a list of all phones and numbers. For example, this is a GET request to your server: GET /api/phones
You put the received data in the state and in the render of the component you build a table according to the data from the state of the component. Therefore, as soon as your xhr request completes, the data will be in state, a re-render will happen and everything will be fine. For complete happiness, you can add the isLoading variable, for example, and set it to true at the beginning of the request, and false at the time the response is received. In component rendering, depending on the value of isLoading - draw a preloader. Of course, isLoading will also live in the state.
Further, when you hover over a line - you, for example, draw a "cross". By clicking on the cross, a request is made to the server, for example: DELETE /api/phones/ID. Inside the PhonesAndNames component, this will simply be onClick on the cross element and a function that again sends an xhr request. When a response is received, you should search for the id of the removed element from your list in state and return a list of elements. The state has changed - a rerender has happened - everything is in order.
Same with addition. You just need to put a couple of inputs + the "add" button. Again, the handler on onClick (or onSubmit, if you do it as a form) - again xhr request (POST /api/phones), again on a successful response, an operation with a list of phones and names in the state, namely: adding to the end or to the beginning is banal new element.
The only thing left is update. It's the same with him. In the simplest example, so as not to bother, all your phone numbers and names can be in the table inside the input tag and at the end of the line, in the same place where the cross is the "update" icon.
---
It turns out that if you use web sockets, then you will need to configure your server so that at the time of a successful response to all of the above methods, some event will be broadcast (from broadcast, i.e. send) some event to which your customers know how to respond.
---
So that all this in the process of "expansion" and "complication" does not turn into a hard-to-support mess, I recommend using any of the libraries for "application state management", so to speak. I really like redux .