React is an Open-Source JavaScript library used to build (UIs)User Interfaces. It is the future of web creation with its extra versatility and ease. Since the release of React in 2013, it has gained so much popularity that the present React community count has increased to 56162. The industries count that has already adopted React has gone to 8787, some of them are Uber, Airbnb, WhatsApp, Twitter, BBC, Netflix, and Reddit. It follows MVC(Model View Controller) architecture. In simple terms, React allows developers to build complex UIs from a small and isolated code known as “components.”
To know more, read more!!!
Why React?
It’s trendy and in the world of front-end technologies, it’s universally accepted and well-known.
- It follows component-based architecture.
- Virtual DOM will update only the things which have changed.
- Uni-directional data flow (One-way data binding).
- Declarative UI.
- Code Reusability.
React is the future and building a good React project is easy if you know some amazing practices. In this blog, we will discuss the 10 Best Practices every developer should follow to build a good React project. So let’s get started.
1. Application Structure (Folder Layout)
When you create a basic application, the command “npx create-react-app filename” is entered and you can see how the folders and files are arranged. When you have to implement a new application, several files need to be added which should be in order. For example, if you’re creating an e-commerce website, all the navbar components should be placed in one folder and proper names should be given. The header, middle part, and footer should be placed in serializing to not create a mess. Placing all the folders in order helps in not creating confusion and also fellow developers will get an idea of the code flow. Also, the entire code looks neat once placed in order.
2. Add a CSS File
Cascading Style Sheet(CSS) file when added to the application brings attractiveness to your work and in-short life to the application. Using different features of CSS, we can add color, font size, and alignment to the text and background as well. React lets you add CSS inline and external. Everything including the dropdown, navigation bar, and footer can be styled using CSS. Once, you edit changes in the CSS file, import files wherever required using the command “import ‘./App.css’“.
3. Functional/Class Components
Should I use the functional or class component? Know the difference between both and when to use each. In class components, the render method is called, whenever the state of the components changes. On the contrary, the Functional components render the UI based on the props. Class Components should be preferred whenever there’s a requirement with the state of the component. Based on this, we should know when to use each one of them. Read about the Differences between Functional Components and Class Components in React
4 Use Ternary Operators
Using the ternary operator will reduce the complexity. Instead of writing n number of lines of code for a condition using an if-else statement, a condition could be checked within one line. Thus, it helps in reviewing easily. In short, it makes the application less bulky and compact.
5. Import in Order
Importing libraries, and files to improve readability. When certain files are required to be imported into one file, they should be in order. The rule should be like this –
- Built-in
- External
- Internal
Initially, all the built-in libraries are imported which are used during the task implementation. Then the external files are outside the folder. At last, all the files which are within the folder are imported. If one follows this order, it brings cleanliness to the code.
6. Usage of Hooks in Functional Components
Hooks are those functions that let you “hook into” React state and lifecycle features from function components. It allows you to use state and other React features, like lifecycle methods, without writing a class.” Hooks always let you use functions instead of having to constantly switch between functions, classes, higher-order components, and render props. It reduces the complexity of managing states’ in-class components. So always prefer Functional Components with React Hooks like useEffect(), useState(), etc.
7. Use Alt Prop
Always include an alt property in your image tag (<img>). It describes the image and specifies the alternate text for an image if the image cannot be displayed. The reason to add an alt tag is that whenever there’s a slow internet connection, the image doesn’t download so if we have an alt tag, the viewers can get an idea of what the image is all about.
8. Component Naming
To create the difference, if you’re using Pascal-Case for components, use CamelCase for instances. Components refer to the filename which should be named in PascalCase (for ex:- if the filename is control_key, the name should be ControlKey). It describes what the code in the file is talking about. The instances which are to be used in the code should follow camelCase (for ex:- if the instance name is a reservation item, the name should be reservationItem). Follow the pattern to be clear.
9. Using Dependencies and Dev-Dependencies
Understand the difference between dependencies and dev-dependencies! Modules that are only required during development are Dev dependencies whereas those required at runtime are dependencies. The package.json file contains all the dependencies on which the react project will be working. The command “npm install <package-name> –save-dev” saves all the packages. To know the difference between dependencies and dev-dependencies, read about the Difference between dependencies, devDependencies, and peer-Dependencies
10. Follow DRY Code
To avoid duplicate code, create a common component using the function to carry out the repetitive tasks to follow the DRY (Don’t Repeat Yourself) code structure. For instance, when you need to implement multiple tasks on a screen then you can create a common component and use it rather than writing again and again for each button. It is easy to maintain one copy than to maintain multiple copies.
