DEV Community

Cover image for React Best Practices for Front-End Developers
Shlomi Sela
Shlomi Sela

Posted on

React Best Practices for Front-End Developers

React Best Practices for Front-End Developers

React, a vital tool in modern web development demands an organized approach for enhanced readability and maintainability. This guide, inspired by K. Thamodaran's insights and updated with current practices, will help you set up your React projects efficiently.

Short Introduction

Welcome to this guide on React Best Practices, tailored for Intermediate Developers, Advanced Beginners, and Early Career Professionals. If you're familiar with React's basics and looking to enhance your skills, this guide will help you understand key practices for efficient and professional React development. Let's elevate your React expertise together!

1. Folder Structure

Effective file organization is key. Consider this structure for clarity and ease of maintenance:

  • /components: For all React components.
    • /ui: For UI-specific components like buttons, modals, and inputs.
  • /containers: For components that connect to Redux or any global state.
  • /contexts: For React context files.
  • /hooks: For custom React hooks.
  • /utils: For utility functions and helpers.
  • /assets: For static files like images and styles.

Example:

src/
|-- components/
|   |-- ui/
|   |-- [Other Component Folders]
|-- containers/
|-- contexts/
|-- hooks/
|-- utils/
|-- assets/
Enter fullscreen mode Exit fullscreen mode

2. Component Structure

Aim for small, focused components. Each should address a specific functionality.

Example:

// SimpleButton.jsx
import React from 'react';

const SimpleButton = ({ onClick, label }) => (
  <button onClick={onClick}>{label}</button>
);

export default SimpleButton;
Enter fullscreen mode Exit fullscreen mode

3. State Management

Use useState for local state and useContext for more global needs.

Example using useState and useContext:

// ThemeContext.js
import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// ThemeToggleButton.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const ThemeToggleButton = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return <button onClick={toggleTheme}>Switch to {theme === 'light' ? 'dark' : 'light'} mode</button>;
};
Enter fullscreen mode Exit fullscreen mode

4. File Naming Conventions

Consistency is key. Use PascalCase for components and camelCase for utility functions and hooks.

  • Components: MyComponent.jsx
  • Utilities/Hooks: useMyHook.js, formatDate.js

5. Reusable Components

Strive for reusability in components to maximize efficiency and consistency across your application.

Example:

// InputField.jsx
import React from 'react';

const InputField = ({ type, placeholder, value, onChange }) => (
  <input type={type} placeholder={placeholder} value={value} onChange={onChange} />
);

export default InputField;
Enter fullscreen mode Exit fullscreen mode

6. Testing

Regularly test components with tools like Jest and React Testing Library for reliability and ease of debugging.

7. Performance Optimization

Be mindful of performance. Use React.memo for functional components to prevent unnecessary re-renders.

8. Code Splitting

Employ code splitting with React.lazy and Suspense to improve load times.

By embracing these practices, your React projects will be more maintainable, scalable, and efficient. Always stay open to new patterns and improvements as React continues to evolve!

Top comments (11)

Collapse
 
milkywayrules profile image
Dio Ilham D

why the file naming convention should be a PascalCase for components and camelCase for the others? I've seen a lot on youtube & articles that the naming is using kebab-case for the components, page, & everything else...

Collapse
 
dsaga profile image
Dusan Petkovic

Its just a common convention for react, makes it consistent with component names, and easier to find when searching, and by using this convention you make sure that other react developers also understand the structure as its common practice

Collapse
 
seandinan profile image
Sean Dinan • Edited

With React, I like having the JSX components match their directory names. I think it makes it as clear as possible as to what is/isn't a component.

For example, this:

import SpecialButton from '../components/SpecialButton';

/* ... */
Enter fullscreen mode Exit fullscreen mode

Is clearer to me than:

import SpecialButton from '../components/special-button';

/* ... */
Enter fullscreen mode Exit fullscreen mode
Collapse
 
krentrox profile image
Shlomi Sela • Edited

Exactly.
Another good approach to importing is to have an absolute import.

Instead of:
import SpecialButton from '../components/SpecialButton';

Use something like:
import SpecialButton from 'components/SpecialButton';

This will involve some config adjustments

Thread Thread
 
seandinan profile image
Sean Dinan

Ooh thank you for reminding me of those! I've got some imports like import * as UserActions from '../../../../../store/slices/usersSlice' that would appreciate being cleaned up a bit :)

Thread Thread
 
krentrox profile image
Shlomi Sela

No problem 😃
BTW, make sure to import only relevant methods and avoid import * as possible 👍🏼

Thread Thread
 
seandinan profile image
Sean Dinan

Update: I ended up refactoring our main Next.js repos to use module aliases and I'm never looking back 😍

Thread Thread
 
krentrox profile image
Shlomi Sela

Nice :)

One question, what made you choose module path aliases
over absolute imports?

Thread Thread
 
seandinan profile image
Sean Dinan

I like having something to indicate that it's an "artificial" (maybe not the right word) path.

For example, these 2 lines could look like they're pointing to the same directory:

import { foo } from './utils/foo';
import { bar } from 'utils/bar';
Enter fullscreen mode Exit fullscreen mode

Whereas it would be instantly clear that one is from a root-level utils directory if it's written as:

import { foo } from './utils/foo';
import { bar } from '@/utils/bar';
Enter fullscreen mode Exit fullscreen mode

In the end just a matter of personal preference I'd say.

Collapse
 
localhostd3veloper profile image
Gautam Anand

Great share

I would like to add one thing that the most important stuff to learn in frontend development using React is learning TypeScript

Collapse
 
zobaidulkazi profile image
Md Zbaidul Islam Kazi

helpfully