In ReactJS tutorial you are guided in the building of a commenting system. It's a very useful tutorial to understand ReactJS library, but there are some design choices I can't fully understand.
So let's start from the initial setup:
The system is composed of three components: CommentBox, CommentList, Comment and CommentForm. The hierarchy is the following
CommentBox CommentList Comment CommentForm
The tutorial then implements all the data-fetching logic in the CommentBox component, which then pass this data to CommentList that renders it in the DOM.
Q1: Why? Is an arbitrary choice or there is some reasoning behind?
Then, when the tutorial come to the logic of new comments submission, it states:
When a user submits a comment, we will need to refresh the list of comments to include the new one. It makes sense to do all of this logic in CommentBox since CommentBox owns the state that represents the list of comments.
Q2: Why CommentBox represents a list of comments when there is another component representing it (CommentList, as the name seems to suggest)?
Further, implementing the submission logic, the code handling the comment POST to the server is part of the CommentBox component, wrapped in a method which is passed to CommentForm as a callback. So when the CommentForm form is submitted, it calls this CommentBox function to perform the server request, while the rest of the logic is implemented in CommentForm's functions.
Q3: Why isn't all submission logic implemented in CommentForm?
EDIT: as I stated in a comment, " I already understood the application architecture and the concept of box. I'm arguing about the "individual implementation" details and why some choices are preferable than others"