DEV Community

Cover image for React Best Practices for Front-End Developers

React Best Practices for Front-End Developers

Shlomi Sela on December 04, 2023

React Best Practices for Front-End Developers React, a vital tool in modern web development demands an organized approach for enhanced r...
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
Zobaidul Kazi

helpfully