javascript.withcodeexample.com
Open in
urlscan Pro
2606:4700:3033::ac43:8c1b
Public Scan
Submitted URL: http://javascript.withcodeexample.com/blog/react-js-clean-code-best-practices/
Effective URL: https://javascript.withcodeexample.com/blog/react-js-clean-code-best-practices/
Submission: On August 22 via manual from US — Scanned from DE
Effective URL: https://javascript.withcodeexample.com/blog/react-js-clean-code-best-practices/
Submission: On August 22 via manual from US — Scanned from DE
Form analysis 1 forms found in the DOM
<form class="aa-Form" action="" novalidate="" role="search">
<div class="aa-InputWrapperPrefix"><label class="aa-Label" for="autocomplete-0-input" id="autocomplete-0-label"><button class="aa-SubmitButton" type="submit" title="Submit"><svg class="aa-SubmitIcon" viewBox="0 0 24 24" width="20" height="20"
fill="currentColor">
<path
d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z">
</path>
</svg></button></label>
<div class="aa-LoadingIndicator" hidden=""><svg class="aa-LoadingIcon" viewBox="0 0 100 100" width="20" height="20">
<circle cx="50" cy="50" fill="none" r="35" stroke="currentColor" stroke-dasharray="164.93361431346415 56.97787143782138" stroke-width="6">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;90 50 50;180 50 50;360 50 50" keyTimes="0;0.40;0.65;1"></animateTransform>
</circle>
</svg></div>
</div>
<div class="aa-InputWrapper"><input class="aa-Input" aria-autocomplete="both" aria-labelledby="autocomplete-0-label" id="autocomplete-0-input" autocomplete="off" autocorrect="off" autocapitalize="off" enterkeyhint="search" spellcheck="false"
placeholder="Search..." maxlength="512" type="search"></div>
<div class="aa-InputWrapperSuffix"><button class="aa-ClearButton" type="reset" title="Clear" hidden=""><svg class="aa-ClearIcon" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path
d="M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z">
</path>
</svg></button></div>
</form>Text Content
Toggle navigation Javascript With Example Code
*
* Blog
* Sites
Golang Javascript
* Javascript With Example Code
* Blogs
* React JS Clean Code Guide
REACT JS CLEAN CODE GUIDE
--------------------------------------------------------------------------------
ENHANCE YOUR REACT.JS DEVELOPMENT WITH BEST PRACTICES AND PROVEN TECHNIQUES
Posted on August 21, 2023 (Last modified on August 22, 2023) | 13 minutes
* 1. Component Structure and Organization
* 2. Descriptive Naming
* 3. Consistent Formatting
* 4. Avoid Magic Numbers and Strings
* 5. Destructuring
* 6. Avoid Nested Ternaries
* 7. Comments and Documentation
* 8. Reuse and Modularization
* 9. State Management
* 1. Local Component State:
* 2. Context API:
* 3. Redux:
* 4. MobX:
* 5. React Query:
* 6. Apollo Client:
* 10. Error Handling
* Error Boundaries:
* Try-Catch Blocks:
* Displaying Error Messages:
* 11. Testing
* Types of Testing in React:
* Benefits of Testing in React:
* Testing Libraries in React:
* Sample Testing in React using Jest and React Testing Library:
* 12. Code Reviews
* Purpose of Code Reviews:
React.js has revolutionized front-end development by providing a powerful and
efficient way to build user interfaces. However, as your React application grows
in complexity, maintaining clean, readable, and maintainable code becomes
crucial. In this guide, we’ll explore best practices for writing clean React.js
code that not only works but is also easy to understand and maintain.
1. COMPONENT STRUCTURE AND ORGANIZATION
A well-structured component hierarchy simplifies navigation and aids in
understanding the flow of your application. Follow these guidelines:
* Single Responsibility Principle (SRP): Keep your components focused on a
single responsibility. If a component becomes too large, consider breaking it
down into smaller, more manageable pieces.
* Container and Presentation Components: Separate your components into two
categories: container components (responsible for data and logic) and
presentation components (focused on rendering UI). This separation enhances
code clarity and reusability.
* Folder Structure: Organize your components in a logical folder structure.
Group related components together, and consider using directories like
components, containers, and utils to keep things organized.
2. DESCRIPTIVE NAMING
Descriptive naming in React refers to the practice of choosing meaningful and
self-explanatory names for variables, functions, components, files, and other
elements within your React application’s codebase. The goal of descriptive
naming is to make the purpose and functionality of each element immediately
clear to other developers who read or collaborate on the code. This practice
enhances code readability, maintainability, and overall understanding of the
application.
Here are some guidelines for using descriptive naming in your React code:
1. Components: Choose component names that accurately represent their purpose
or role within the application. Use descriptive nouns or noun phrases that
clearly communicate what the component does.
// Good: Descriptive component name
<UserProfile />
// Avoid: Vague or unclear component name
<Component1 />
2. Variables and Functions: Opt for variable and function names that explain
their purpose or the data they hold/manipulate. Use camelCase for variables
and lowercase letters for functions.
// Good: Descriptive variable and function names
const userDisplayName = 'John Doe';
function calculateTotalPrice(items) {
// ...
}
// Avoid: Unclear or abbreviated names
const uName = 'John Doe';
function calc(items) {
// ...
}
3. Files and Directories: Name your files and directories in a way that
reflects their contents. Use lowercase letters, hyphens, and underscores to
improve readability.
// Good: Descriptive file and directory names
UserProfile.js
user-profile/
4. Props and State: When passing props or defining component state, give them
names that indicate their purpose and the data they hold.
// Good: Descriptive props and state names
<ProfileCard name={user.name} />
class UserProfile extends React.Component {
state = {
isLoading: true,
userData: null,
};
// ...
}
// Avoid: Generic or unclear names
<ProfileCard n={user.name} />
class UserProfile extends React.Component {
state = {
flag: true,
data: null,
};
// ...
}
5. Event Handlers: When defining event handler functions, use names that
describe the action they perform or the event they handle.
// Good: Descriptive event handler name
function handleButtonClick() {
// ...
}
// Avoid: Generic event handler name
function handleClick() {
// ...
}
6. Comments: If necessary, use comments to provide additional context or
explanation for complex code. However, prioritize writing code that’s
self-explanatory without excessive comments.
Descriptive naming promotes clear communication and helps future developers
(including your future self) understand the purpose and functionality of various
elements within your React application. When naming elements, consider the
long-term benefits of having code that’s easy to read, maintain, and collaborate
on.
3. CONSISTENT FORMATTING
Consistent formatting in React involves adhering to a set of rules and
conventions for code layout, indentation, spacing, and other stylistic aspects
across your entire application. Consistency in formatting improves code
readability, maintainability, and collaboration among developers. Here are some
guidelines for maintaining consistent formatting in your React code:
1. Indentation: Use consistent indentation for each level of nesting. A common
choice is using two or four spaces for each level. Choose one style and
stick to it throughout the project.
// Example using four-space indentation
function MyComponent() {
return (
<div>
<p>Hello, world!</p>
</div>
);
}
2. Brace Placement: Place opening braces on the same line as the block they’re
associated with. This is a common practice in JavaScript.
// Good: Opening brace on the same line
function MyComponent() {
// ...
}
// Avoid: Opening brace on a new line
function MyComponent()
{
// ...
}
3. Whitespace and Formatting: Use consistent spacing around operators, inside
object literals, and before/after parentheses. Add spaces after commas and
colons.
// Good: Consistent spacing around operators and objects
const user = { name: 'John', age: 30 };
// Avoid: Inconsistent spacing
const user={name:'John', age :30};
4. Line Length: Aim to keep lines reasonably short (usually around 80-100
characters) to improve code readability. If a line is too long, consider
breaking it into multiple lines.
// Good: Line breaks to keep line length manageable
<MyComponent prop1={value1} prop2={value2} prop3={value3} />
// Avoid: Long lines that reduce readability
<MyComponent prop1={value1} prop2={value2} prop3={value3} prop4={value4} prop5={value5} />
5. Consistent Naming: Use consistent naming conventions for variables,
functions, components, and other identifiers. Choose a naming style
(camelCase, PascalCase, etc.) and apply it uniformly.
6. Comments: Follow consistent comment styles. Use single-line comments (//)
for short explanations and multi-line comments (/* */) for longer
explanations or block comments.
7. Organize Imports: Keep your imports organized and grouped logically. You can
use tools like ESLint or Prettier to automatically format your imports.
8. Code Alignment: Align similar code blocks vertically for better visual
grouping and clarity.
// Good: Aligned code for better readability
const firstName = 'John';
const lastName = 'Doe';
// Avoid: Misaligned code
const firstName = 'John';
const lastName = 'Doe';
9. Using a Code Formatter: Consider using code formatting tools like Prettier
to automatically enforce consistent formatting across your codebase. These
tools can be integrated into your development workflow to ensure that
formatting remains consistent without manual effort.
By maintaining consistent formatting practices throughout your React codebase,
you make it easier for developers to understand and contribute to the code,
reducing the risk of errors and enhancing overall code quality.
4. AVOID MAGIC NUMBERS AND STRINGS
In programming, a “magic number” refers to a numeric value that appears directly
in the code without any explanation. Similarly, a “magic string” refers to a
string value that is directly used in the code without context. Both of these
can make the code difficult to understand and maintain.
Replace magic numbers and strings with constants or variables to improve code
maintainability and reduce the risk of errors.
// Instead of this
if (status === 2) { ... }
// Use constants
const STATUS_COMPLETED = 2;
if (status === STATUS_COMPLETED) { ... }
5. DESTRUCTURING
Destructuring is a feature in programming languages that allows you to extract
individual elements from data structures like arrays, objects, or tuples and
assign them to variables in a more concise and intuitive way. It simplifies the
process of extracting values from complex data structures, making your code
cleaner and more readable.
Destructuring objects and arrays enhances code readability and makes your
intentions clearer.
// Instead of this
const username = user.name;
const age = user.age;
// Use destructuring
const { name: username, age } = user;
6. AVOID NESTED TERNARIES
A ternary operator, often simply referred to as a “ternary,” is a concise way to
write a conditional expression. It allows you to quickly evaluate a condition
and return one of two values based on whether the condition is true or false.
The ternary operator takes the form of:
condition ? expression_if_true : expression_if_false
While ternary operators can be concise, avoid nesting them too deeply, as it can
make code hard to follow. Instead, consider using if statements or breaking down
complex logic into separate functions.
7. COMMENTS AND DOCUMENTATION
Comments are used to provide explanations, notes, or context within your code.
They are not executed by the JavaScript engine and do not affect the behavior of
your code. Comments are essential for making your code understandable to other
developers, including your future self. There are two types of comments in
JavaScript: single-line comments and multi-line comments.
Use comments to explain complex logic, intent, or decisions in your code.
However, strive to write self-explanatory code that requires minimal comments.
8. REUSE AND MODULARIZATION
Reuse code by creating reusable components and utility functions. This reduces
code duplication and makes your codebase more maintainable.
9. STATE MANAGEMENT
State management in React refers to the process of managing and controlling the
data that defines the behavior and appearance of a component or application.
React components can have internal state, which is data that can change over
time and triggers re-rendering when it’s updated. However, as your application
grows, managing state across components can become complex. State management
solutions help handle this complexity by providing structured ways to manage,
share, and update state.
There are several state management solutions available for React applications,
each catering to different levels of complexity and use cases:
1. LOCAL COMPONENT STATE:
For simple components with limited interactivity, managing state within the
component using the useState hook or this.state and this.setState methods (for
class components) is sufficient.
2. CONTEXT API:
The Context API is a built-in solution for sharing state across multiple
components without the need to pass props through intermediary components. It’s
suitable for moderate levels of state sharing.
3. REDUX:
Redux is a popular state management library that provides a centralized store
for application state. It’s especially useful for complex applications with
large amounts of shared state or frequent interactions between components.
4. MOBX:
MobX is another state management library that aims to simplify state management
by using observable objects. It’s well-suited for applications where a more
reactive approach to state management is preferred.
5. REACT QUERY:
React Query focuses on managing asynchronous data, such as fetching and caching
API responses. It’s particularly useful for managing remote data and handling
data fetching, caching, synchronization, and more.
6. APOLLO CLIENT:
If your application works with GraphQL APIs, Apollo Client offers a powerful
solution for managing data, queries, and mutations. It provides tools for
caching, data normalization, and subscription support.
Choose a state management solution based on the complexity of your application
and the specific requirements of your project. Regardless of the solution, the
primary goals of state management are to keep your application’s data
consistent, maintainable, and accessible to the components that need it while
minimizing unnecessary re-renders.
10. ERROR HANDLING
Error handling in React involves managing and responding to unexpected errors
that can occur during the execution of your application. Proper error handling
enhances the user experience by providing meaningful feedback and preventing
crashes. Here’s a short note on error handling in React:
ERROR BOUNDARIES:
React provides a concept called “error boundaries” to gracefully handle errors
that occur within components. An error boundary is a React component that
catches JavaScript errors anywhere in its child component tree and displays a
fallback UI instead of crashing the entire application. You can define error
boundaries using the componentDidCatch lifecycle method.
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, errorInfo) {
this.setState({ hasError: true });
// Log the error or send an error report
console.error(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
// Usage
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
TRY-CATCH BLOCKS:
For handling errors within component methods, you can use standard JavaScript
try and catch blocks. This is especially useful for asynchronous operations like
API calls.
class MyComponent extends React.Component {
async fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
// Process data
} catch (error) {
console.error('Error fetching data:', error);
// Display an error message to the user
}
}
render() {
// ...
}
}
DISPLAYING ERROR MESSAGES:
When an error occurs, it’s important to display clear and user-friendly error
messages to help users understand what went wrong. You can render error messages
within your components based on the state of error handling.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { error: null };
}
async fetchData() {
try {
// ...
} catch (error) {
console.error('Error fetching data:', error);
this.setState({ error: 'An error occurred while fetching data.' });
}
}
render() {
const { error } = this.state;
return (
<div>
{error ? <p>{error}</p> : <p>Data loaded successfully!</p>}
{/* ... */}
</div>
);
}
}
By implementing error boundaries, using try-catch blocks, and providing
informative error messages, you can create a more robust and user-friendly React
application that gracefully handles unexpected errors and improves overall user
satisfaction.
11. TESTING
Testing is a critical aspect of software development, ensuring that your React
applications function as expected and remain reliable even as they evolve.
Proper testing helps catch bugs early, provides confidence in code changes, and
contributes to the overall stability of your application. Here’s a short note on
testing in React:
TYPES OF TESTING IN REACT:
1. Unit Testing: This involves testing individual components or functions in
isolation to verify that they work as intended. Popular libraries for unit
testing React components include Jest and React Testing Library.
2. Integration Testing: Integration tests focus on interactions between
different components, ensuring they work correctly together. These tests
help identify issues that might arise when components are combined.
3. End-to-End (E2E) Testing: E2E tests simulate user interactions with the
entire application. Tools like Cypress and Selenium are used to test user
flows and interactions.
BENEFITS OF TESTING IN REACT:
* Bugs Prevention: Writing tests helps identify and address bugs before they
reach production, reducing the likelihood of unexpected issues for users.
* Code Confidence: Well-tested code gives you confidence that your changes
won’t break existing functionality when you refactor or add new features.
* Documentation: Tests serve as documentation for how your code is intended to
work. They provide insights into the expected behavior of components.
TESTING LIBRARIES IN REACT:
* Jest: A popular testing framework for JavaScript applications, Jest is known
for its ease of use, built-in assertions, and the ability to run tests in
parallel.
* React Testing Library: This library focuses on testing components the way
users interact with them. It encourages writing tests that resemble how users
would interact with your app.
* Cypress: An E2E testing framework, Cypress lets you write tests that run in a
real browser. It provides a visual and interactive way to test your
application.
SAMPLE TESTING IN REACT USING JEST AND REACT TESTING LIBRARY:
// MyComponent.js
import React from 'react';
function MyComponent(props) {
const { value } = props;
return <div>{value}</div>;
}
export default MyComponent;
// MyComponent.test.js
import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';
test('renders value prop correctly', () => {
const { getByText } = render(<MyComponent value="Test Value" />);
const valueElement = getByText('Test Value');
expect(valueElement).toBeInTheDocument();
});
In this example, a simple test checks if the value prop passed to MyComponent
renders correctly.
12. CODE REVIEWS
Code reviews in React, as in any software development process, involve the
collaborative examination of code changes by team members. This practice helps
ensure the quality, correctness, and maintainability of the codebase. Here’s a
short note on code reviews in React:
PURPOSE OF CODE REVIEWS:
* Quality Assurance: Code reviews help catch bugs, logic errors, and potential
issues before they reach production. This contributes to a more stable and
reliable application.
* Knowledge Sharing: Reviewing code exposes team members to different coding
styles, best practices, and solutions, promoting learning and skill
improvement.
* Consistency: Code reviews enforce coding standards, naming conventions, and
design patterns, leading to consistent and coherent code across the project.
* Refinement: Code reviews provide an opportunity to suggest improvements,
optimizations, and more elegant solutions.
Conclusion
Writing clean React.js code isn’t just about aesthetics; it’s about setting a
foundation for a maintainable and scalable application. By following these best
practices, you’ll not only create code that works but also code that is easier
to understand, modify, and collaborate on. Keep in mind that clean code is an
ongoing effort, and as you continue to improve your coding skills, your React
applications will benefit from increased clarity and maintainability.
Best Course To Learn React Js
* Title - React - The Complete Guide 2023 (incl. React Router & Redux)
* Rating - 4.6/5 (192,833 ratings)
* Students - 771,443
* Highlights - 50.5 hours on-demand video | 15 coding exercises | Assignments |
58 articles | Certificate of completion
--------------------------------------------------------------------------------
*
*
*
*
*
*
* ← Previous Post
* Next Post →
Please enable JavaScript to view the comments powered by Disqus.
*
*
With Code Example • © 2023 • Javascript With Example Code