Webpack + [React] Collabocate Project Basics: Learn To Build Plugin Library

[Akpjunior94]

Prerequisite

Ensure that you have completed the Git & GitHub Workflow "Good First Issue" Tickets. If you have not done or completed the Git and GitHub tickets, you can find it through the project board here: git and github workflow good first issue tickets

Background

There is a variant of the collabocate UI plugin library that is built with React. The understanding of how a React library is built and how it works, is crucial to quickly becoming acquainted with how collabocate is built and how it works. You will also learn the basics of how to document a project.

Issue description

Create a React plugin library, code along with the instructor in this youtube tutorial: https://www.youtube.com/watch?v=EIQGRENET04 .

Expected solution

• Compulsory: Your library should look like and be able to do what that of the instructors own can do.
• Compulsory: Document useful information about your library that will help users/contributors to understand the project you built. The readme of the react-lib-ts-webpack library in your readme.
• Optional: You can choose to add a new functionality to your library, or fix a bug you noticed wasn't fixed in the tutorial (if you notice any).
• Compulsory: Clone and install the Collabo Community web client found at: https://github.com/collabo-community/web-client. Inject and test your library in the web-client.

Additional context

• Let us know in the comment of this issue ticket (GitHub discussion) that you will be participating in this 1st task assignment. Ensure to tag @collabo-community/maintainers in your comment. That way, maintainers will be notified and will be prepared to help review your pull request when you submit.
• Where to do this project? - Create and do this library project in a GitHub repository in your personal GitHub account. Make sure it is a public repository so that other people can see it.
• Submission details:
  • Repo URL (where you are to do and submit this task to): https://github.com/collabo-community/good-first-issue-solutions
  • More details about how to submit to the above Repo URL:
    • If you don't have this file, create a file called project-basics.md in root of the folder that has your GitHub username in it.
    • Ensure that there's an H1 header in the file:

       # Project Basics by @replace-this-text-with-your-own-GitHub-username
      

    • Under the header section, add this list item and insert your library's GitHub repository link in this manner:

       - Webpack + [React] Collabocate Project Basics: Replace this part of the text with your library's GitHub repository link
      

• If you have any questions or need any clarification when working on this ticket, please use the #good-first-issue-support channel in our discord community server.
• To help you understand how to work with other contributors within the @collabo-community better, we will review your pull request based on the directions given in this issue ticket and our Public Documentation Resource Guide.

Testing checklist

Note (to contributor taking on this task assignment): Copy and paste the testing checklist below (without this note) to your pull request body description when submitting your fix. This will guide (you and) the contributors who will review your fix to know what is important to check or test for.

• Here's the link to my approved pull request for the Git & GitHub Workflow 3rd task: Replace this inline code block with the link to your approved Git & GitHub Workflow 3rd task pull request
• My library is in a GitHub repository in my personal GitHub account.
• My library looks like and is able to do what that of the instructor's own can do.
• I have documented useful information about my library in my library's repository readme. The readme adopts ideas from the react-lib-ts-webpack library.
• I have tested my library in the Collabo Community web client found at: https://github.com/collabo-community/web-client. And it works as it should in there.
• I have a project-basics.md file in root of the folder that has my GitHub username in it.
• I have a formatted (H1) header text in the .md file:
  # Project Basics by @replace-this-text-with-your-own-GitHub-username
• Under the header section, I have added this list item, and I have inserted my library's GitHub repository link:
  - Webpack + [React] Collabocate Project Basics: Replace this part of the text with your library's GitHub repository link
• I certify that I ran my checklist.