In ReactJS tutorial you are guided in the building of a commenting system. It\'s

Question

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?

Explanation / Answer

The CommentBox component owns the business logic. CommentList, Comment and CommentForm are visible representations of data (also known as views). The latter is more of a collection bucket for user inserted data.

When CommentBox owns all the actual logic it is easy to maintain since you won't have your logic scattered across multiple areas/objects. Instead it's packed into one.

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.