Creating Reusable React Components (Pluralsight)

A library of React components with documentation and examples. The project is based on the Pluralsight course: Creating Reusable React Components by Cory House.

The documentation can be viewed here. The components are also published on npm. They can be downloaded by running npm i pluralsight-reusable-react-components.

Installation & Execution

To view or tinker with the source code you can do the following:

• Assuming you have npm & node.js installed, you can either clone or download the repository.
• Navigate to the folder that you/was created.
• Then, run npm install on the command line to download the dependencies.
• You can execute the application in the following modes:
  • Run npm start to launch to the project in development environment.
  • Run npm run build:docs to launch to the project in production environment.
  • Run npm test to run the tests.

Description

This is a small library of React components. When running the project you can see the rich documentation that is dynamically generated with react-docgen, displaying the source code, the props accepted, examples of use, and more. I developed the project while coding along with the courses' instructor. I did some code refactoring and added comments .

A CI/CD pipeline is set up for this project. Upon push, Travis-CI will attempt to build the project and if the build is successful, it will be deployed at Github Pages. A second CI server, AppVeyor, was added to test the project in a Windows environment.

To format the code Prettier is used. The setup for formatting the code before each push looks like this: Husky allows githooks to be created as npm scripts in package.json (in out case a precommit hook). lint-staged is then used to apply Prettier on the staged files. Finally, eslint-config-prettier turns off any eslint rules that might conflict with Prettier's internal rules.

This project's environment is an ejected and slightly configured version of Create React App.