Best practices

2022/06/29 (增加連結)

• How to become React developer in 2022? Roadmap / Learning path to land entry-level React developer job.

• Have we forgotten how to think in React?

• 3 React tips/tricks

  • Do we need to import React for stateless functional components?

  • What is the index.js file in the component directories?

  • Event handlers must always be a function or a reference to a function (with an exception). **

• React best practices and patterns to reduce code

• React best practices and patterns to reduce code — Part 2

• React best practices and patterns to reduce code — Part 3

• React Best Practices — You need to know!

• 3 More Extremely Useful React Tricks To Speed Up Development Process

• 14 Tips for Effortlessly Improving your Weak Ass React Code

• React Patterns: The Container pattern

• 9 React Resources I Wish I Knew Earlier

• How We Reduced Bugs in Our React Codebase (in typescript)

• Conditionals

  • 6 Cleaner Ways to Write Conditionals In React

• JSX

  • You Probably Wrote Some Buggy JSX Code You Didn’t Realize

• Error

  • Why you should use Error Boundaries in React

• Worst practices / anti-patterns

  • React the Wrong Way: 4 Anti-Patterns to Avoid

    • Nested components

    • Rendering FOR loops with a variable index

    • Having large component trees inside the same component

    • Using context to handle global state management

  • React Antipatterns you should know

  • 10 React Traps To Avoid As React Developer

  • React Worst Practices

  • 10 React Anti-patterns you should know

• Three.js

  • Getting Started With Three.js : Importing your first 3D model into React

• Immer.js

  • Easy undo feature with React and Immer.js

• Authentication

  • Ways to Add Authentication to Your React Apps

    • React Login with Frontegg

    • React Authentication with Okta

• API

  • How To Make Parallel API calls in React Applications

• Accessibility

  • How to build an accessible dropdown using React Aria

• Form

  • Mastering the art of forms in React

• React Portal

  • Let’s understand react portals!

  • Learn how useful React Portals are and improve your React development skills

• Email

  • Send Email in React without SMTP Server

• Fiber

  • Understand React Fiber in a simplified way

• Event

  • Event Base Architecture Using React

• Proxy

  • Use Proxy for Local State Management

• PDF

  • Build PDF Documents with React on the Server

• Loading

  • Skeleton Loading Pages with React

    • react-loading-skeleton

  • Skeleton Screens for Better Loading in React

    • react-loading-skeleton

• Memory Leaks

  • Avoid Memory Leaks in your React App by canceling API calls

  • How to Cleanup Side Effects in React : Avoid memory leaks in your react application.

• Performance

  • I Optimized My React App and Made It Even Faster : Memoization

  • How to write performant React code: rules, patterns, do’s and don’ts

  • React Js performance optimization techniques

  • Options for Optimizing Caching in React

  • How To Render Your Lists Faster With React Virtualization

  • 7 simple tricks to avoid unwanted re-renders for performance optimization in React

  • How I eliminate ALL unnecessary Rerenders in React

  • Boost Your React App Performance with React Profiler

  • React key attribute: best practices for performant lists

• Scale

  • React project structure for scale: decomposition, layers and hierarchy

• Webpack

  • 3 Ways to Optimize Your React Bundle With Webpack : Webpack bundle analyzer, code-splitting, and more

• Web Components

  • How to: Create a web component in ReactJS

• Schema

  • Why you should be doing schema validation in React projects

• Styled Components

  • Most Efficient Ways Of Styling React Components: Styled Components & Dynamic Props

  • Theming made easy with React and Styled Components

  • Starting styled mixins in React : Part-1: How to reuse CSS in JS

  • Advanced Mixins in Styled-Components : Part-2: Nested Mixins and arguments

• Clean Code

  • Maintain a clean code based in React — Part 1

  • Maintain a clean code based in React — Part 2

  • 5 Tips for a Clean CodeBase in React

  • Clean vs Dirty Code in React

  • How to Write Cleaner React code : Avoid unnecessary tags in React

  • Clean coding practices I use in React

  • Cleaner Codes — React Subcomponents

  • Clean Code in React & React Native

  • The cleaning code I've used in React

    • Prioritise imports

    • Move complicated and shared functionality to React Hook