Understanding reusable components for React

Standard & Structure of generated code

Dhiwise generated source code with most popular CRA as it’s easier to use and widely accepted. For any project to be successful and easy to work on, it’s always required that you follow industry standards and best practices suggested by industry experts who have been there long before some of us even started working on it.With that said, Let’s see how DhiWise follow Coding standards to generate code for you.

There are certain parameters that we follow which is Naming standards, Modular Code, Comment written where required, eslint setup, SonarQube tested etc.

The most integral part of any system is its folder structure and how you organise your files and play with it. Because after all, who doesn’t love the organised cupboards right?

At DhiWise, we follow the best practice given by Dan Abramov on the folder structure and it’s pretty neat and clean. Check here. Shocked, aren’t you?!Well, when you think about it, It makes sense as everyone has different perception and their own way to look at their codes and structures. Since you can’t force anyone to follow any particular folder structure, it’s always good to come up with your own best version of it.Please check below, How we organise our files.

├── package.json
├── package-lock.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.js
│   ├── assets
│   │   ├── fonts ---------- Project fonts
│   │   └── images --------- All Project Images
│   ├── components --------- UI and Detected Common Components
│   ├── constants ---------- Project constants, eg: string consts
│   ├── hooks -------------- Helpful Hooks
│   ├── index.js
│   ├── pages -------------- All route pages
│   ├── Routes.js ---------- Routing
│   ├── styles
│   │   ├── index.css ------ Other Global Styles
│   │   └── tailwind.css --- Default Tailwind modules
│   └── util
│       └── index.js ------- Helpful utils
└── tailwind.config.js ----- Entire theme config, colors, fonts etc.

‍

Reusable Components

We want developers to work as less as possible on repetitive tasks and hence this being one of them, we identify 41 types of components from basic to highly advanced.

DhiWise offers you re usability out of the box by identifying custom & reusable components. Yeah, by the We mean, Design System of your application. We identify common components that’s getting repeated on most of the page and convert those components into Design System components with already defined prop-types in components.

No Design system is complete without its partner Storybook. And hence we have come with a feature of storybook integration with all the components identified with all the states and variants of it. Run storybook and get the code of any custom component with any defined state by you.

‍

How DhiWise helps you decrease code complexity

Complex things are easy to do however simplicity is the real challenge, and guess what who loves challenges? Yes, it’s us. We go above and beyond to make sure that you get the simple, easy-to-understand code to save your & your team members’ time. Now let’s see how we ensure that you get the decreased code quality.

DhiWise's code is built with a number of features, including naming standards, modular code, and excellent third-party support which is widely accepted by the community developers for features like API Integration, and navigation.

For Navigation, We are using standard react-router-dom library which enables highly configurable router mechanism from react community. It has wide range of features which can be utilised for routing purpose.

For API Integration, We follow service based architecture that gives re usability for your API calls that’s widely used all over your application. You just need to define functions that returns API calls based on your modules.

‍

What’s more, you can expect over time

• Common components which is repeated all over pages like Header, Footer and Sidebar. Bye Bye repetition.
• Reduced tailwind classes to reuse styles repetition all over same elements with @apply directive.
• Typography support to handle all your text elements with single components.
• Right now our code is generated with CRA only, but in future it’s going to support both Craco & Webpack with custom configurations.
• Tables will be auto identified and code will be generated with react-table & ag-grid as per user’s choice.

‍