React is an easy-to-use, declarative, and component-based framework used for building highly interactive user interfaces. It is a popular frontend technology introduced by Facebook, which currently has 8 million users worldwide.
However, for developers, it is crucial to follow some fundamental practices concerning the technology to get complete advantage of its features and to keep code clean and organized.
Let’s take a look at some of the most important ones:
Keep Components Small and Function-specific
As we all know, with React, it’s possible to have huge components that execute a number of tasks. But a better way to design components is to keep them small, so that one component corresponds to one function. Ideally, a single component should render a specific bit of your page or modify a particular behavior. There are many advantages to this:
- Function-specific components can be standalone, which makes testing and maintenance easier.
- Each small component can be reused across multiple projects.
- Components executing general functions can be made available to the community.
- With smaller components, it’s easier to implement performance optimizations.
- It’s easier to update smaller components.
- Bigger components have to perform harder and may be difficult to maintain.
The balance between creating one concise component and creating multiple function-specific components can vary from organization to organization. After all, you can have as many components as you want, and recombine them in any way you want to achieve the same end result.
Reusability is Important, So Keep Creation of New Components to the Minimum Required
By sticking to the rule of one function = one component, you can improve the reusability of components. What this means is that you should skip trying to build a new component for a function if there already exists a component for that function.
By reusing components across your project or across any number of projects, not only will you achieve consistency, you’ll also be contributing to the community.
On the other hand, if any component becomes huge, unwieldy and difficult to maintain, it’s better to break it up into as many smaller components as required.
For example, you can even go further and create a Button component that can handle icons. Then, each time you need a button, you’ll have a component to use. Making it more modular will allow you to cover many cases with the same piece of code. You have to aim somewhere in the middle. Your components should be abstract enough, but shouldn’t be overly complex.
class IconButton extends React.Component {
[…]
render() {
return (
<button onClick={this.props.onClick()}>
<i class={this.props.iconClass}></i>
</button>
);
}
}
Consolidate Duplicate Code – DRY your Code
A common rule for all code is to keep it as brief and concise as possible.
It’s no different here too, since React best practices also instruct you to keep code brief and precise. One way to do this is to avoid duplication – Don’t Repeat Yourself (DRY).
You can achieve this by scrutinizing the code for patterns and similarities. If you find any, it’s possible you’re repeating code and there’s scope to eliminate duplication. Most likely, a bit of rewriting can make it more concise.
This relies heavily on the reusability principle in React. Let’s say you want to add multiple buttons that contain icons, instead of adding the markup for each button, you can simply use the IconButton component that we shown above. You could even go further by mapping everything into an array.
const buttons = [‘facebook’, ‘twitter’, ‘youtube’];
return (
<div>
{
buttons.map( (button) => {
return (
<IconButton
onClick={doStuff( button )}
iconClass={button}
/>
);
} )
}
</div>
);
Put CSS in JavaScript
When you start working on a project, it is a common practice to keep all the CSS styles in a single SCSS file. The use of a global prefix prevents any potential name collisions. However, when your project scales up, this solution may not be feasible.
There are many libraries that enable you to write CSS in JS. EmotionJS and Glamorous are the two most popular CSS in JS libraries.
Here’s an example of using EmotionJS in your project. EmotionJS can generate complete CSS files for your production. First, install EmotionJS using npm.
npm install –save @emotion/core
Next, you need to import EmotionJS in your application.
import { jsx } from ‘@emotion/core’
You can set the properties of an element as shown in the snippet below:
let Component = props => {
return (
<div
css={{
border: ‘1px’
}}
{…props}
/>
)
}
Comment Only Where Necessary
Attach comments to code only where necessary. This is not only in keeping with React best practices, it also serves two purposes at the same time:
- It’ll keep code visually clutter free.
- You’ll avoid a potential conflict between comment and code, if you happen to alter the code at some later point in time.
Name the Component After the Function
It’s a good idea to name a component after the function that it executes so that it’s easily recognizable.
For example, ProductTable – it conveys instantly what the component does. On the other hand, if you name the component based on the need for the code, it can confuse you at a future point of time.
Another example, it’s preferable to name a component Avatar so that it can be used anywhere – for authors, users or in comments. Instead, if we name the component AuthorAvatar in the context of its usage, we’d be limiting the utility of that component.
Besides, naming a component after the function makes it more useful to the community as it’s more likely to be discovered.
Use Capitals for Component Names
If, like most folks, you’re using JSX (a JavaScript extension), the names of the components you create need to begin with uppercase letters. For instance, you’ll name components as SelectButton instead of selectbutton, or Menu instead of menu. We do this so that JSX can identify them differently from default HTML tags.
Earlier React versions maintained a list of all built-in names to differentiate them from custom names. But as the list needed constant updating, that was scrapped and capitals became the norm.
In case JSX is not your language of choice, you can use lowercase letters. However, this may reduce the reusability of components beyond your project.
Mind the Other Naming Conventions
When working with React, you are generally using JSX (JavaScript Extension) files. Any component that you create for React should therefore be named in Pascal case, or upper camel case. This translates to names without spaces and the capitalizing the first letter of every word.
If you want to create a function that submits a form, you should name it SubmitForm in upper camel case, rather than submitForm, submit_form, or submit_form. Upper camel case is more commonly called Pascal case. Here is a further list of examples of variable and function names in Pascal case.
Separate Stateful Aspects from Rendering
Components in React can be stateful or stateless. Stateful components store information about the component’s state and provide the necessary context. In contrast, stateless components have no memory and cannot give context to other parts of the UI. They only receive props (inputs) from parent component and return you JSX elements. They are scalable and reusable, and similar to pure function in JavaScript.
One of React best practices is to keep your stateful data-loading logic separate from your rendering stateless logic. It’s better to have one stateful component to load data and another stateless component to display that data. This reduces the complexity of the components.
The later React versions v16.8 have a new feature – React Hooks, which write stateful function-related components. This may eventually eliminate the need for class-based components.
For example, your app is fetching some data on mount. What you want to do is manage the data in the main component and pass the complex render task to a sub-component as props.
import RenderTable from ‘./RenderTable’;
class Table extends Component {
state = { loading: true };
render() {
const { loading, tableData } = this.state;
return loading ? <Loading/> : <RenderTable data={tableData}/>;
}
componentDidMount() {
fetchTableData().then( tableData => {
this.setState( { loading: false, tableData } );
} );
}
}
Code Should Execute as Expected and be Testable
Really, this rule needs no explanation. The code you write should behave as expected, and be testable easily and quickly. It’s a good practice to name your test files identical to the source files with a .test suffix. It’ll then be easy to find the test files.
You can use JEST to test your React code.
All Files Related to Any One Component Should be in a Single Folder
Keep all files relating to any one component in a single folder, including styling files.
If there’s any small component used by a particular component only, it makes sense to keep these smaller components all together within that component folder. The hierarchy will then be easy to understand – large components have their own folder and all their smaller parts are split into sub-folders. This way, you can easily extract code to any other project or even modify the code whenever you want.
For instance, for the Form component, all pieces such as CSS files, icons, images, tests and any other sub-components relating to Form should all reside in the same folder. If you name files sensibly, and keep related files together logically, you’ll not have any difficulty finding them later.
Use Tools Like Bit
One of React best practices that helps to organize all your React components is the use of tools like Bit.
These tools help to maintain and reuse code. Beyond that, it helps code to become discoverable, and promotes team collaboration in building components. Also, code can be synced across projects.
Use Snippet Libraries
Code snippets help you to keep up with the best and most recent syntax. They also help to keep your code relatively bug free, so this is one of the React best practices that you should not miss out on.
There are many snippet libraries that you can use, like, ES7 React, Redux, JS Snippets, etc.
Write Tests for All Code
In any programming language, adequate testing ensures that any new code added to your project integrates well with existing code and does not break existing functionality. It is a good idea to write tests for any new component that you create. As a good practice, you should create a __Test__ directory within your component’s directory to house all relevant tests.
You can broadly divide tests in React into two parts: testing the functionality of components using a React app, and tests on your complete application once it renders in the browser. You can use cross browser testing tools for tests in the latter category.
For the former, you can use a JavaScript test runner, Jest to emulate the HTML DOM using jsdom to test React components. While a completely accurate test is only possible in a browser on a real device, Jest provides a good approximation of the real testing environment during the development phase of your project.
Follow Linting Rules, Break Up Lines That are Too Long
Linting is a process wherein we run a program that analyses code for potential errors.
Mostly, we use it for language-related issues. But it can also fix many other issues automatically, particularly code style. Using a linter in your React code helps to keep your code relatively error- and bug-free.
Conclusion
Remember, it’s always all about adapting what’s useful for you. So, don’t take it all for granted and think about what might be helpful in your situation. Then you can just add it to your own stack of best practices. We at AppleTech are adept ad developing scalable and secure solutions using React. Reach out to us today.
