ReactJS Best Practices

Table of Content

1. Introduction
2. Project Structure Best Practices
3. React Component Best Practices
4. Code Style Best Practices
5. Conclusion
Introduction

● ReactJS is a well-known and widely recognised brand in the field of front-end technologies.
● It's a versatile open-source JavaScript library for creating creative and groundbreaking applications.
● We hope to include all of the insights and react js best practises to help Reactjs developers and
businesses create fantastic and high-performing applications through this PPT.
Project Structure Best Practices

● Folder Layout
● CSS in JS
● Children Props
● Higher-Order Components (HOC)
Folder Layout

● The react developer architecture focuses on interchangeable components so that the design pattern
can be shared across several internal projects.
● As a result, the concept of a component-centric file structure should be used, which means that all
files related to a single component (such as test, CSS, JavaScript, properties, and so on) should be held
in a single folder.
● Another method for categorising file types is to use this approach. The same sort of files are kept
together in one folder.
CSS in JS

● Styling and theming, like managing huge scss files, can be a difficult activity in a large project. As a
result, the idea of CSS-in-JS solutions was born. This term is used in the following libraries.
● Glamorous
● Modeled Components
● EmotionJS
● You can select from these libraries depending on your preferences, such as styled-components or
Glamorous for more complicated themes.
Children Props

● It is often necessary to make the content of one component within the content of another component.
● As a consequence, we can transfer functions as child props to the components render function.
Higher-Order Components(HOC)

● It's a respond advanced technique that allows you to reuse component logic.
● A component's advanced level can be used to turn it into a higher order of the component.
● When a user logs in, for example, we can need to display some components. To verify this, you must
use the same code for each component.
● Here's where the Higher-Order Component comes in, allowing you to keep the code under one app
component while checking whether the user is logged in. The other components are encased inside
this.
React Component Best Practices

1. Decompose into Small Components

2. Use Functional or Class Components based on Requirement
3. Use Functional Components with Hooks
4. Appropriate Naming and Destructuring Props
Decompose into Small Components

● Decompose large components into small components as much as possible, so that each component
performs only one function.
● Small components become easier to handle, test, and reuse.
 Use Functional or Class Components based on
Requirement

● Use functional components instead of class components if you need to view a user interface without
making any logic or state changes.
● Functional components are more powerful in this situation.
● ComponentDidMount(), componentDidUpdate(), and other React lifecycle methods cannot be used
with functional components, but they can be used with Class components.
● You lose control over the render process when you use functional components. It means that even if a
component is changed slightly, the functional component will still re-render.
Use Functional Components with Hooks

● With the introduction of React v16.08, the latest feature ‘React Hooks', it is now possible to build
function components with state.
● It simplifies the management of states in Class components.
● So, wherever possible, use functional components with React Hooks such as useEffect(), useState(),
and so on.
● This will allow you to use facts and logic in the hierarchical loop without much alteration.
Appropriate Naming and Destructuring Props

● Using meaningful and short names for the component's props to keep the code readable and tidy.
● Also, use the function's props destructuring feature, which removes the need to write props for each
property name and can be used directly.
● We may use name and title without using props.name or props.title with props destructuring.
Code Style Best Practices

1. Naming Conventions
2. Write DRY Code
3. Avoid the Use of the State as much as Possible
4. Use Destructuring to Get Props
5. Apply ES6 Spread Function
6. Manage too many Props with Parent/Child Component
7. Use Map Function for Dynamic Rendering of Arrays
8. Dynamic Rendering with && and the Ternary Operator
9. Write Tests for Each Component
 Naming Conventions

● The name of a variable should always be in Pascal case, such as 'SelectButton', 'Dashboard,' and so on.
The use of Pascal case for components distinguishes it from standard JSX element tags.
● Methods/functions specified within components, such as ‘getApplicationData()' and ‘showText(),'
should be in Camel case.
● Try to use only capital letters in the application's Constant fields that are used internationally. For
example, const PI = “3.14”;
Write DRY Code

● To retain the DRY (Don't Repeat Yourself) code structure, try to avoid duplicate code and create a
common component to perform the repetitive task.
● For example, instead of writing markup for each button, you can create a common button component
and use it to view several buttons on a screen.
Avoid the Use of the State as much as Possible

● Keep state localised to that component and transfer it down the component tree as props if you use it
in a react component.
Use Destructuring to Get Props

● In ES6, destructuring was added.

● This type of javascript function allows you to easily extract data from an object or array and assign
variables to them.
● Destructuring props even cleans up the code and makes it easier to read.
Apply ES6 Spread Function

● Using ES6 functions to transfer an object property would be a more convenient and efficient method.
● The use of...props between the open and close tags would immediately insert all of the object's props.
● In case of repetitive use of functions, Don’t use the spread function when:
● There are properties that are complex.
● Array or object properties are needed.
● When it comes to rendering, nested tags are needed.
Manage too many Props with Parent/Child Component

● It's difficult to handle properties at any level in components, but props can be written more effectively
using React's state and ES6 destructuring features, as shown below.
● Let's say you want to make an app that has a list of saved addresses as well as the GPS coordinates of
your current location.
● The current user's location should be added to the favourite addresses section of the parent
component App.
Use Map Function for Dynamic Rendering of Arrays

● In react, you can build an object with props that returns a dynamic HTML block without having to write
any additional code.
● React provides a map() function to view arrays in order for this purpose. When using an array with
map(), one of the array's parameters can be used as a key.
● Aside from that, by using Object.keys, ES6 spread functions can be used to give an entire list of
parameters in an object ().
Dynamic Rendering with && and the Ternary Operator

● Conditional renderings are possible in React in the same way as variable declarations are.
● It's simple to use ternary operators in small code with conditions, but it's more difficult to find them in
large code blocks.
● Even though the above code is well-organized, if the render function had more than one line, it would
have been cluttered and unreadable due to the additional nested brackets.
Write Tests for Each Component

● Writing test cases for each component built is a good practise because it decreases the likelihood of
errors occurring after the code is deployed.
● You will assess all of the possible situations with unit testing.
● The most popular react test frameworks are Jest or enzymes.
Conclusion

● We gave you a deeper understanding of how ReactJS works, how to add security, and how to create
components and applications as a reactjs developer and frontend developer.
● You'll have less typing choices and more explicit codes if you use React best practises.
● You'll like its simple crisp features with code reusability, advanced react components, adding a state
variable, and other smaller ready-made React.js features for simplified use once you start using it.
References

1: https://www.tatvasoft.com/blog/reactjs-best-practices/