Do you want to build your own npm reusable react component library. I built this one very quickly. It is a simple component library including of a Card, Button, Form, Table and more components to come. Some key features are the Form component allows you to define form fields as content childeren and the Table component supports sorting, filtering and pagination.

$ npm i hey-react-components

Want to create your own. Follow these steps

Step 1: Set Up Your Project

1. Initialize your project:   

mkdir my-component-library
cd my-component-library
npm init -y

2. Install necessary dependencies:

npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-typescript2

3. Set up TypeScript configuration:

   Create a tsconfig.json file:

Step 2: Create Your Components

1. Create the folder structure:

Deploying an Angular app to Microsoft Azure when merging to the master branch on GitHub involves different Azure services and GitHub Actions. Here's a general overview of the process:

Set Up Azure Services:

a. Azure Storage Account: Create an Azure Storage Account to host your Angular app's static files (HTML, CSS, JS). You can also use Azure Blob Storage within the Storage Account.

b. Azure CDN (Optional): Set up an Azure Content Delivery Network (CDN) profile and endpoint to serve your app's content globally for better performance.

Configure Azure Credentials:

a. Set up an Azure Service Principal with appropriate permissions to access the Azure Storage Account and CDN (if used).

b. Generate the Azure Service Principal's Application ID, Authentication Key, and Tenant ID.

c. Configure these credentials on your local machine or your CI/CD environment where the deployment will take place. This can be done using environment variables or Azure CLI configuration.

Set Up GitHub Actions:

a. In your Angular project repository on GitHub, create a .github/workflows directory.

b. Create a YAML file (e.g., deploy.yml) in this directory to define the GitHub Actions workflow.

c. Configure the workflow to trigger on merges to the master branch.

Define Deployment Steps:

a. Within the workflow file, define steps to build and deploy the Angular app:

React Hook Form is a library for managing form state and validation in React applications using hooks. It is designed to make form handling in React applications more efficient and straightforward. React Hook Form is a popular alternative to other form management libraries like Formik.

Some of the key features and benefits of React Hook Form include:

1. **Hooks-based:** React Hook Form leverages React's hooks API, making it a natural fit for modern React applications. You can manage form state and validation rules using simple and familiar hooks.

2. **Minimal Re-renders:** The library is designed to minimize unnecessary re-renders, which can improve performance. It does so by only re-rendering form components when needed.

3. **Validation:** React Hook Form provides a flexible and extensible way to define and perform form validation. You can define validation rules for each input field and trigger validation at various points in the form submission process.

4. **Custom Inputs:** You can easily create and use custom form input components with React Hook Form, allowing you to encapsulate form logic and reusability.

5. **Error Handling:** The library provides mechanisms to handle and display validation errors, making it easier to provide feedback to users.

6. **Optimized for Controlled Inputs:** It primarily focuses on controlled input components, which helps you maintain full control over your form state and avoid common issues with uncontrolled components.

7. **Built-in Support for Uncontrolled Components:** While primarily designed for controlled inputs, React Hook Form also offers support for uncontrolled inputs when necessary.

8. **Form Submission:** React Hook Form provides methods for handling form submissions and managing form data, making it easier to integrate with your backend services.

I built a reusable component module to streamline the creation of Angular Reactive Forms

Angular Reactive Forms are a way to manage and validate form inputs in Angular applications. They provide a more programmatic and flexible approach to handling forms compared to Template-Driven Forms, which rely on two-way data binding. Reactive Forms are a powerful and versatile way to work with forms in Angular applications.

Reactive Forms offer a more structured and maintainable way to work with forms in Angular applications, particularly in complex scenarios with complex validation requirements or dynamic form elements.

To use Reactive Forms in an Angular application, you need to import the necessary modules, create a form model using the FormBuilder, define your form controls and validation rules, and then bind the form controls to HTML elements in your template using directives like formControlName.

My AForm Module allows you to skip the process of importing the dependencies and writing a Reactive form by providing a data object to the AForm component.

For Example:

Template:

Deploying an Angular app to AWS when merging to the master branch on GitHub involves several steps, including setting up AWS services, configuring GitHub Actions, and creating deployment scripts. Here's a general overview of the process:

1. Set Up AWS Services:

   a. S3 Bucket: Create an Amazon S3 bucket to store your Angular app's static files (HTML, CSS, JS).

   b. CloudFront Distribution (Optional): Set up an Amazon CloudFront distribution to serve your app's content globally for better performance.

2. Configure AWS Credentials:

   a. Create an IAM user with appropriate permissions (S3, CloudFront if used).

   b. Generate AWS Access Key and Secret Access Key for the IAM user.

   c. Configure these credentials on your local machine or your CI/CD environment where the deployment will take place. This can be done using environment variables or AWS CLI configuration.

3. Set Up GitHub Actions:

   a. In your Angular project repository on GitHub, create a .github/workflows directory.

   b. Create a YAML file (e.g., deploy.yml) in this directory to define the GitHub Actions workflow.

   c. Configure the workflow to trigger on merges to the master branch.

4. Define Deployment Steps:

   a. Within the workflow file, define steps to build and deploy the Angular app: