ReactJS UI Ant Design Comment Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Comment Component is used to add the user comments, and it is used to display the user feedback and his discussion over this comment box. We can use the following approach in ReactJS to use the Ant Design Comment Component.
- actions: It is used to denote the list of action items that are rendered below the comment content.
- author: It is used to denote the element which is displayed as the comment author.
- avatar: It is used to denote the element which is displayed as the comment avatar.
- children: It is used to indicate that the nested comments should be provided as children of the Comment.
- content: It is used to denote the main content of the comment.
- datetime: It is used to denote a datetime element that contains the time to be displayed.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install antd npm install --save @ant-design/icons
Project Structure: It will look like the following.
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Step to Run Application: Run the application using the following command from the root directory of the project:
Output: Now open your browser and go to http://localhost:3000/, you will see the following output: