Common Front End Patterns

1. Introduction

The importance of front-end patterns in web development cannot be overstated. These patterns help in creating maintainable, scalable, and efficient applications. In this lesson, we will explore various common front-end patterns that are widely adopted in the industry.

2. Component Patterns

Component patterns encapsulate functionality and UI elements into reusable components.

2.1 Presentational and Container Components

Presentational components are concerned with how things look, while container components handle how things work.


            // Presentational Component
            const Button = ({ label }) => <button>{label}</button>

            // Container Component
            class ButtonContainer extends React.Component {
                state = { clicked: false }
                handleClick = () => this.setState({ clicked: true })

                render() {
                    return <Button label={this.state.clicked ? "Clicked!" : "Click Me!"} onClick={this.handleClick} />
                }
            }

2.2 Higher-Order Components (HOCs)

A higher-order component is a function that takes a component and returns a new component.


            const withLoading = (WrappedComponent) => {
                return class extends React.Component {
                    render() {
                        return this.props.isLoading ? <p>Loading...</p> : <WrappedComponent {...this.props} />
                    }
                }
            }

3. Layout Patterns

Layout patterns determine how components are organized on the page.

3.1 Grid Layout

Grid layouts allow for a responsive and organized structure.


            .grid-container {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
                gap: 10px;
            }

4. State Management Patterns

State management is crucial for maintaining the state of the application.

4.1 Lifted State

Lifting state up allows a component to share its state with child components.


            class ParentComponent extends React.Component {
                state = { value: '' }

                handleChange = (newValue) => {
                    this.setState({ value: newValue })
                }

                render() {
                    return <ChildComponent value={this.state.value} onChange={this.handleChange} />
                }
            }

4.2 Context API

The Context API is used for sharing state across the component tree without prop drilling.


            const MyContext = React.createContext();

            class MyProvider extends React.Component {
                state = { value: 'someValue' }

                render() {
                    return <MyContext.Provider value={this.state.value}>
                        {this.props.children}
                    </MyContext.Provider>
                }
            }

5. FAQ

What are front-end patterns?

Front-end patterns are reusable solutions to common problems in web development, enhancing maintainability and scalability.

Why are component patterns important?

Component patterns promote code reusability and separation of concerns, making it easier to manage and scale applications.

How do I choose the right pattern?

Choosing the right pattern depends on the specific needs of your application, such as state management, performance, and maintainability.