DEV Community

Cover image for Best practices and advantages of using React
Rahul
Rahul

Posted on

Best practices and advantages of using React

Hey, developers from a few months I have started learning frameworks. I am currently learning React . According to
me react is a very simpler language to learn, saying frankly I took so much time for javascript(still learning)
but react is easy and fast to understand and develop. So here in this post, I will share you some advantages and best practices you should follow.



Do you want development news right on your default chrome or firefox page? Then get the amazing daily.dev extension. There are only PROS of getting this extension no CONS.

ADVANTAGES 😀 !!

  • Close with JS: React uses Javascript and JSX for building components. All JS features can be used with react's Development.
  • Component Reusability: Re-use of assets is one feature, developers ever grateful for whatever the topic of ReactJS comes up. Re-using the same component object makes workflow less stressful for developers and a lot more productive.
  • Virtual DOM (Fast rendering): This approach enables the declarative API of React -> You tell React what state you want the UI to be in, and it makes sure the DOM matches the state.
  • Code stability: React allows for direct work with components and uses downward data binding to ensure that changes in child structure don't affect their parents. That makes code stable...
  • SEO friendly: Used by both Fortune 500 companies and innovative startups.
  • React Hooks(Improves state management): From React 16.8, The greatest Hook's an asset is that it allows sharing state logic between components without rearchitecting the whole code block.
  • Robust community: React was one of the Javascript - Connected project released as open-source by FaceBook. That means ReactJS users all advantages of free access, a lot of os useful applications and additional tools from off-company developers.
  • Wide React and Redux toolset: Both react and redux comes with a decent set of related dev tools that make a developer's life easier e.g. React developer tools extension for chrome.

Here we end with the advantages of React.

React best practices 😍

While working on your React-powered creations, you should be careful to do
things in tune with the react best practices. This will help to keep your
code better organized.

  • Keep components small and function-specific.
  • Reusability is important, so keep the creation of a new component to the minimum required.
  • Name the component after it's functionality: It's a good idea to name a component after the function that is executed so that it's easily recognizable.
  • Use capitals for components name: If like most folks, you're using JSX, the names of the components you create need to begin with uppercase letters.
  • All files related to any one component should be in a single folder: If there's any small component use by particular component only, it makes sense to keep these smaller components all together within that component folder.
  • Put CSS in Javascript: Here are some libraries you can choose to work on

  • Comment only where necessary

    • Consolidate duplicate code - DRY your code
    • Separate stateful aspects from rendering (Keep logical things separate from UI/JSX)
    • Use snippet libraries (ES7 React, Redux , JS Snippets )
    • Write tests for all the code
    • Follow linking rules
      Thanks For Reading 😎 If you like let me know. 🤘

Top comments (2)

Collapse
 
miku86 profile image
miku86

Consolidate duplicate code - DRY your code

I see a lot of beginners trying to DRY literally everything. That's when we end up with bad abstractions, the god object antipattern that violates single responsibility etc. KentCDodds has a nice post about this: Avoid Hasty Abstractions

Collapse
 
unsignedmind profile image
unsignedmind

I didn't expect the advantages to be in this article. I guess people who choose to read such an article are already into react and know about them. They are still valid for sure. Anyway the best practices are good to rules to follow. They apply mostly to the other famous frontend frameworks aswell.