How to integrate Xata into the ReactJS application using DhiWise?
Introduction
Xata is a straightforward database service (think of Airtable and its rich data types) yet provides the usual guarantees traditional databases offer (consistency, transactions, constraints).
These are the words of Tudor, CTO at Xata. And trust me. It is awesome. Simply awesome. And on the other hand, DhiWise is the perfect match for Xata.
DhiWise is a programming platform where developers can convert their designs into developer-friendly code for mobile and web apps. DhiWise automates the application development lifecycle and instantly generates readable, modular, and reusable code.
To show the power of DhiWise and Xata, I created a version management system using Xata services and DhiWise in an hour.
The Usecase
I found an issue I could solve. I wanted to solve a problem with utmost usability. At DhiWise, we have several code generators, algorithms, and software on different servers.
To overcome that, I found Xata, which handles my data like a spreadsheet. And as a frontend developer, I wanted to consume a ready-made REST API I could integrate using DhiWise. Thanks to Atila and Tejas Kumar from Xata for the help.
Using DhiWise, I could convert my Figma design into code, and with the help of Xata, that design came to life, which I uploaded to Vercel.
But I built this internal tool within an hour. So, let us jump to the part where I integrated the Xata into my Version Management System in ReactJS. Because DhiWise converted my Figma design in 2 minutes.
Xata integration into DhiWise:
- So after creating the application in DhiWise, It will ask for the Figma URL. Then, it will fetch all your Figma screens to provide the UI code with components structure and TailwindCSS.
- After fetching the screens, it will show each screen like this.
3. You can configure the screen with the GUI. Easy to give life to your app just with some clicks. DhiWise feels like home to the developers.
4. Configure the UI components by simply right-clicking the view.
5. To import your postman collection, please make sure you have exported the JSON file from the postman. Then, on the left sidebar of DhiWise, go to the API Integration option and click on the button to import your collection.
6. We will see the first API. The rest are the same to implement in DhiWise.
7. Once you import the postman collection, go to the screen and select the API Integration for the component you want after clicking Create Action from the context menu.
8. So I have the list of elements in this Figma where I have to implement this API.
9. Put all your data inside the headers. Define your token.
10. For the response part, you can directly integrate the list data. DhiWise platform will write a JavaScript map loop to print all data. It will handle all the elements and design as well.
11. No need to write even an API call function. DhiWise is generating that, too, for you.
The Generated ReactJS code:
> Code Review
- The directory structure generated from DhiWise looks like this:
- DhiWise generates all the standard components separately, like buttons, Dropdowns, Datepicker, Input, etc. It helps in two ways:
- First, maintain project design guidelines from one single place.
- Reusable component codes.
2. TailwindCSS
- DhiWise generates TailwindCSS codes for the component, making code easy to read and edit or scale.
3. Easy to read
- As a ReactJS developer, I find the DhiWise-generated code more reliable than being dependent on a large team.
- Figma to React is real quick. No iterations. No delays. No worries. Just import Figma and get the ReactJS project with the structured code.
- Building 5 screens in ReactJS + TailwindCSS will eat your brain, peace, and time. All together. With DhiWise, it is just a matter of a few minutes. Just import Figma, select the screen and build the code.
Conclusion:
Here is the Link to DhiWise University to learn more about ReactJS and application development on DhiWise platform.
Hi. My name is Rakesh Purohit. I am a ReactJS Developer and Developer Advocate focusing on Developer Experience for DhiWise.
