Unlock the Power of Reusability with DhiWise’s Custom Component Feature for React.js

Create custom components in React with DhiWise React Builder

Components are one of the core building blocks of React. Therefore, every application you build with React will always be built with components, whether large or small.

The key feature of React is composition of components. Components written by different people should work well together. It is important to us that you can add functionality to a component without causing rippling changes throughout the codebase.

As mentioned in React official docs, it would make sense why one should always break down UI into small chunks to make it more readable and easy to manage the UI complexity.

We at DhiWise, always believe in delivering quality code that can be used in production, and one can’t complete the development life cycle without breaking down UI into reusable components. Hence, we developed a “Custom Components” feature that can level up productivity.

Let’s see how you can create “Custom Components” with DhiWise.

Step 1: Right-click on the element and select “Create Component”

Select an element to create a component

Step 2: Define the name of the component

This component’s code will be generated under src/components/<COMPONENT_NAME>.js

Choose component name

Step 3: Set props in the layer

If you are defining any component, then there is a high chance that that component will have some dynamic values or dynamic conditions which need to manage via props. You can mark those elements as props in the right pane and name them as you require.

DhiWise will automatically identify all the props based on text and images in the UI part and ask you to define them as a prop for the shared component, which can be passed from the parent component.

Define props of the layer

Step 4: Define props and click on Create Component button

Create component

Step 5: Choose similar matched components

Now, this is one of the best features which makes DhiWise unique and more productive than any tool in the world.

DhiWise will go through all your pages, find similar elements, and give you the option to convert all those similar elements into components at once with auto-binding props.

Select similar elements to auto-convert in components

Step 6: Get all the similar elements converted into a component

You can observe the custom component in the layer tree and the canvas and side panel, which you can update anytime.

With this single feature, you have saved yourself many repeatabilities and increased code Readability along with code quality.

Now you can click on the Build app button to generate the source code, and the Code of RecipeCard will be generated inside the components folder. It will be reused everywhere in pages where you converted any element to that component.

That’s just the one tree in the jungle. DhiWise has many more features that can be used to generate quality code. Such as,

• Mixins to reuse CSS styles
• CSS Editor integrated with different viewports for responsiveness
• Change Component from one to another (For e.g., Image -> Chart, Row -> Input)
• Storybook Support
• CRA/CRACO/Webpack/Vite support
• Group/UnGroup
• Life Cycle / onClick actions
• API Integration (with request body validations)
• Protected Routes

So what are you waiting for? Try DhiWise Today!