Unlock the Power of Reusability with DhiWise’s Custom Component Feature for React.js
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”
Step 2: Define the name of the component
This component’s code will be generated under src/components/<COMPONENT_NAME>.js
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.
Step 4: Define props and click on Create Component button
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.
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
- Life Cycle / onClick actions
- API Integration (with request body validations)
- Protected Routes
So what are you waiting for? Try DhiWise Today!