Code Monkey home page Code Monkey logo

obrm / react-best-practices-design-pattens Goto Github PK

View Code? Open in Web Editor NEW
34.0 1.0 15.0 16 KB

This repo contains code examples from the article "Best Practices and Design Patterns in React.js for High-Quality Applications". Use these organized and downloadable examples to implement best practices and design patterns in your React projects for scalability and maintainability.

Home Page: https://medium.com/@obrm770/best-practices-and-design-patterns-in-react-js-for-high-quality-applications-6b203be747fb

JavaScript 100.00%
best-practices design-patterns folder-structure reactjs compound-components custom-hooks hocs render-props services context-api

react-best-practices-design-pattens's Introduction

React Best Practices and Design Patterns

Welcome to the code repository for the Medium article "Best Practices and Design Patterns in React.js for High-Quality Applications".

This repository contains the same code examples that were presented in the article, but in an organized and downloadable format. You can easily download or copy the code from here and use it in your React projects to implement the best practices and design patterns discussed in the article. The examples in this repository demonstrate how to build scalable, maintainable, and high-quality React.js applications, and how to apply these practices in your own projects.

The code examples are separated into three main folders:

1. Best Practices

This folder contains code examples for the following best practices:

  1. Small components
  2. Pages and presentational components
  3. DRY with array mapping

3. Separation of Concerns

This folder contains code examples with the following:

  1. Custom hooks
  2. Services

3. Design Patterns

This folder contains code examples for the following design patterns:

  1. Higher-Order Components (HOC)
  2. Render Props
  3. Compound Components
  4. Memo
  5. React.Lazy
  6. Context
  7. Reducers
  8. Keys

Usage

You can use the code examples in this repository as needed in your React projects. Simply navigate to the appropriate folder and use the code as needed in your own project.

Be sure to read the article for more detailed explanations and best practices for each topic.

react-best-practices-design-pattens's People

Contributors

obrm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

react-best-practices-design-pattens's Issues

[fix] 2-1 AuthForm.jsx

https://github.com/obrm/react-best-practices-design-pattens/blob/master/2-separation-of-concerns/1-custom-hooks/components/AuthForm.jsx#L43

if (isLogin && label === 'User name') return null;

const { label, type, name, value, onChange } = input;

should be:

const { label, type, name, value, onChange } = input;

if (isLogin && label === 'User name') return null;

The label field should be used after parsing.

Friendly reminder: The example code does not match the screenshot in the article.

Finally, thank you very much for writing this article, which has benefited a lot. Can I translate it into Chinese and share it? (I will mark the source of the article)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.