Как создать кастомные UI-компоненты?

[Tr0jan_Horse]

Creating Custom UI Components: From Theory to Practice​

Introduction
Creating custom UI components is an essential skill for modern web developers. Custom components enhance user experience, provide uniqueness, and add functionality to applications. In this article, we will explore how to create custom UI components using popular frameworks like React, Vue, and Angular.

Technologies and Tools
We will be using the following technologies:
- React
- Vue
- Angular
- Node.js
- npm

1. Theoretical Part

1.1. Basics of UI Design
Understanding the principles of UI design is crucial for creating effective components. Key principles include:
- Consistency
- Feedback
- Efficiency
- Accessibility

Accessibility and responsiveness are vital to ensure that all users can interact with your components seamlessly.

1.2. Component Architecture
The component-based approach allows developers to build reusable UI elements. Key concepts include:
- Functional vs. Class Components
- Component Lifecycle

Understanding the lifecycle of components helps in managing state and side effects effectively.

1.3. Standards and Best Practices
Following coding standards and style guides is essential for maintainability. Consider using:
- CSS Preprocessors (Sass, LESS)
- Methodologies (BEM, OOCSS, SMACSS)

2. Practical Part

2.1. Setting Up the Environment
To get started, install the necessary tools:
-

npm install -g create-react-app

(for React)
-

npm install -g @vue/cli

(for Vue)
-

npm install -g @angular/cli

(for Angular)

Create a new project:
-

npx create-react-app my-app

(for React)
-

vue create my-app

(for Vue)
-

ng new my-app

(for Angular)

2.2. Creating a Simple Custom Component
Let’s create a simple button component.

Step 1: Define Component Functionality
We will create a button that logs a message when clicked.

Step 2: Write Component Code
For React:

import React from 'react';  

const CustomButton = () => {  
    const handleClick = () => {  
        console.log('Button clicked!');  
    };  

    return (  
        <button onClick={handleClick}>Click Me</button>  
    );  
};  

export default CustomButton;

For Vue:

<template>  
    <button @click="handleClick">Click Me</button>  
</template>  

<script>  
export default {  
    methods: {  
        handleClick() {  
            console.log('Button clicked!');  
        }  
    }  
};  
</script>

For Angular:

import { Component } from '@angular/core';  

@Component({  
    selector: 'app-custom-button',  
    template: `<button (click)="handleClick()">Click Me</button>`  
})  
export class CustomButtonComponent {  
    handleClick() {  
        console.log('Button clicked!');  
    }  
}

2.3. Styling the Component
Use CSS to customize the appearance of your button. For example:

button {  
    background-color: #4CAF50;  
    color: white;  
    padding: 15px 32px;  
    text-align: center;  
    text-decoration: none;  
    display: inline-block;  
    font-size: 16px;  
    margin: 4px 2px;  
    cursor: pointer;  
}

Consider using a preprocessor like Sass for better structure:

$button-color: #4CAF50;  

button {  
    background-color: $button-color;  
    // other styles  
}

2.4. Testing the Component
Write unit tests to ensure functionality. For React:

import { render, screen } from '@testing-library/react';  
import CustomButton from './CustomButton';  

test('renders button', () => {  
    render(<CustomButton />);  
    const buttonElement = screen.getByText(/Click Me/i);  
    expect(buttonElement).toBeInTheDocument();  
});

For Vue:

import { mount } from '@vue/test-utils';  
import CustomButton from './CustomButton.vue';  

test('renders button', () => {  
    const wrapper = mount(CustomButton);  
    expect(wrapper.text()).toContain('Click Me');  
});

For Angular:

import { ComponentFixture, TestBed } from '@angular/core/testing';  
import { CustomButtonComponent } from './custom-button.component';  

describe('CustomButtonComponent', () => {  
    let component: CustomButtonComponent;  
    let fixture: ComponentFixture<CustomButtonComponent>;  

    beforeEach(() => {  
        TestBed.configureTestingModule({  
            declarations: [CustomButtonComponent]  
        });  
        fixture = TestBed.createComponent(CustomButtonComponent);  
        component = fixture.componentInstance;  
    });  

    it('should create', () => {  
        expect(component).to