5. Class and Function Components

Activity 5.01: Creating a Comments Section

Solution:

1. Structuring the app
2. Looking at the data, the following structure might work:

   App
     |-CommentSection
       |-Comment

   The CommentSection component holds all the comments. It shows the heading and has a few associated styles.

   The comment component renders the comment.

3. Creating the app

   In the command line, create the app and navigate to the folder. We can now start running the app by running the npm start or yarn start command. Open the folder using your favorite code editor:

   npx create-react-app comment-app
   cd comment-app
   yarn start 

4. Adding the data file and deleting src/logo.svg
5. Delete src/logo.svg and add the src/comments.json file provided in the activity.
6. Adding the CommentSection component in src/components/CommentSection/index.js

   Now, let's create our container component, which will act as a placeholder component for our comments. Since...