A Step-by-Step Guide to Create React App with TypeScript using DhiWise React Builder

“Ask a developer why they use TypeScript in their React projects; they might say it's like having a guardian angel watching over their code!”

React is one of the most popular front-end libraries that enables you to create dynamic and interactive web applications. TypeScript, on the other hand, provides a safety net that catches errors before they can cause any harm, helping to ensure that the codebase is maintainable and robust.

In the React app with Typescript, TypeScript is like having a co-pilot who helps you navigate the twists and turns of the codebase, reducing the likelihood of crashes and making development smoother and more efficient. The combination allows for the creation of robust, scalable, and maintainable applications.  

So, if you are planning to build your next app faster with these dynamic technologies, you are at the right place. 

This blog will guide you through the step-by-step guide for creating a React TypeScript app using DhiWise React Builder and Figma. 

But before that, take an overview of this innovative app development platform-DhiWise.

‍

What is DhiWise React Builder?

DhiWise is a visual programming platform for web and mobile app developers that eliminates the repetitive tasks in app development by automatically generating boilerplate code for apps. The platform provides advanced features to speed up the app development process and helps streamline the development workflow.

DhiWise React Builder allows developers to create React apps by quickly converting Design to Code while providing complete flexibility for UI customization. Besides that, it offers a range of features such as-

1. Support for JavaScript and TypeScript
2. Intuitive UI interface for visual programming
3. Smart editor for UI customization
4. Responsive UI design with real-time preview
5. API management and integration
6. Add social media authentication and protected routes
7. Storybook integration with the desired framework configuration
8. Support for Vercel app deployment
9. Integration with GitHub and GitLab simplifies team collaboration and source code management
10. Complete code ownership

So, as you know about DhiWise React  Builder and its key features, let’s find out how to build a React TypeScript app with the following step-by-step guide.  

‍

Create React App with Typescript Using DhiWise React Builder : A Step-by-Step Guide

With TypeScript for React, developers can have peace of mind knowing that their code is well-typed and well-organized, giving them more time to focus on the creative and innovative aspects of the project. 

On the other hand, Figma- A collaborative design tool allows designers to create interactive mockups and handles a range of tasks, such as designing icon sets, illustrations, logos, and more.

So, if you use Figma design for your React TypeScript app development and want to speed up the entire process, follow the steps outlined below.

‍

Step 1: Sign up to DhiWise

To start using DhiWise React builder, create a DhiWise account. You can create an account using your Google, GitHub, or Discord credentials, and you'll be ready to start.

Sign up to DhiWise

‍

Step 2: Create a new React TypeScript application

To create a React TypeScript application, navigate to the platform “Dashboard,” select technology as “web,” click “New application,” then select “Create a new app.”

DhiWise React Builder- Dashboard

The “Create a new app” window provides the below-required inputs. 

1. Add application name
2. Select technology as React
3. Select programming language from JavaScript or TypeScript (Here we will select TypeScript)
4. Select the design platform as Figma
5. Add Figma account details
6. Add the Figma URL.

Enter the required information to create a React app

In the GIF above, you can see the option to choose between JavaScript and TypeScript for developing your React web application on the platform.

Note: At present, DhiWise exclusively supports Figma designs. If you have designs in Adobe XD or Sketch, you can request to migrate them, and DhiWise will take care of the process within 24 to 48 hours.

Once you have entered the desired information, click “Create a new app.”  Then the new pop-up window will appear where you can select app pages from the Figma design you have selected. These selected pages are imported into the DhiWise platform when you click “Submit.” 

Select web pages

The following snippet shows the platform fetching the page designs and resources from Figma. While DhiWise is fetching all the page resources from Figma, you can set the "App setting" like app name, app icon, "Code configurations" for code structure, and "Get your code" options.

Platform fetching page design and resources from Figma

‍

Step 3: Set up configuration or move to the page list

After finishing fetching the page design from Figma, the platform will ask you to choose the “Wait and setup config” option, which will take you back to the “Fetch design data screen,” and you can still set the app settings and configurations. Or you can choose “Move to the page list.”  

 Wait and setup config or Move to the screen list

With DhiWise React builder, you have the flexibility to select the code structure that fits your requirements. The builder comes equipped with Storybook integration and supports code generation using various framework configurations such as CRA, CRACO, Webpack, and Vite.

DhiWise Storybook integration and inbuilt framework configuration

Furthermore, React app builder seamlessly integrates with both GitHub and GitLab. This allows you to automatically push your React TypeScript app code and generate a pull request in your repository every time you commit new changes to your web app's source code.

GitHub and GitLab integration with DhiWise

Well, next, you can move to the page list. In the snap below, you can view how DhiWise React builder has automatically identified UI components, auto-setup actions, and validations. 

Next, you can proceed to the page list. As shown in the snapshot below, The React builder has identified UI components, Auto set-up actions in the application.

Auto-identified UI components

‍

Step 4: Customize the web app pages 

After the UI component identification, the app builder will take you to the page list. You can view, select, delete, and start customizing the web app pages from here with the “Configure” option.

Besides that, you can search, edit, view your desired page, sync Figma design changes, and set up a Home page for your app from here.

Web app pages list

‍

a. Customize web page UI

The React builder enables you to tailor the UI of your web app according to your preferences- You can define actions and lifecycle methods, view the layout tree, incorporate APIs, modify component styling, develop new components, preview UI design,  group and ungroup design elements, and much more.

Configure web app UI

‍

b. Responsive UI design for Desktop, Tablet, and Mobile devices

React Builder facilitates the development of responsive web apps that can seamlessly run on desktop, tablet, and mobile devices with exceptional precision. The Smart Editor simplifies the process of designing for these three devices, allowing for faster and more precise development. 

Responsive UI design

c. Real-time preview 

The real-time design rendering feature eliminates the need to rebuild the project again and again. Instead, the changes you make are reflected instantly on the selected device, and these design changes can be instantly previewed and shared with the team members. 

Real-time preview

Click here to know more about customizing React app UI.

‍

d. Manage UI components

Developers prioritize creating reusable UI components by breaking down the UI into a common hierarchy. This approach maintains code modularity and adheres to the single responsibility principle in the codebase.

DhiWise helps you manage UI components by automatically identifying them and generating the complete code. And if the component is not identified, the missing component can be mapped using the existing component, or you can create a new component. 

Additionally, React Builder allows you to:

1. Define the UI part as a component
2. Define props, and set up common actions for them. 
3. View, update, and detach UI components.

Manage UI components

‍

Step 5:  API management and integration

With the API management functionality, you can Import APIs or Create a new API. 

API management

‍

a. Import APIs

With the “Import APIs” option, you can either upload a Postman file with a .env file from the existing Postman collection, or a Swagger file or URLs. 

Import APIs

‍

b. Create new API

For instance, if you want to create a new API, you can create the same using DhiWise API runner; here, you can select a method (GET, PUT, POST, PATCH, DELETE) from drop down and add a URL to create the new API.

Create a new API with an API runner

‍

c. Integrate API using the page “Configure” option

To incorporate an API into your application, follow these steps: 

1. Choose the desired page from the page list
2. Click the “Configure” option
3. Generate the "API Integration" action, as demonstrated in the accompanying Gif.

Moreover, the API integration feature allows developers to manage API requests, responses, and actions on success or failure methods.

Integrate API

‍

Step 6: Add constants

Another thing React Builder simplifies is adding constants to your app source code, allowing you to create and manage multiple constant files in the app.

Add Constants

‍

Step 7: Set up protected routes

The protected routes in DhiWise React Builder help you to set up authentication and restrict access to the routes for anyone without login credentials. 

Set up Protected Routes

‍

Step 8: Export code for the page/pages or build the entire React app 

After you complete the UI customization by adding actions, setting up styles, integrating APIs, and other required changes, you are ready to generate your web app code. The platform allows you to generate code for single or multiple pages or directly generate the app code using the "Build app" option.

Export screen code or Build an app

Once you click  “Build app,” the React builder will quickly start building your final app.

Building React app

‍

Step 9: Get your final source code

Once your final code is generated, you can download it from the platform. Also, you can sync the code with GitHub or GitLab repositories. The platform offers complete code ownership to the generated code. So you can update the code on your favorite IDE. Furthermore, using Git, the platform facilitates the deployment of your React app on Vercel .

Download, or  sync with GitHub and GitLab and Deploy

And that's it!  

Now you have your React TypeScript app code ready.

‍

Benefits of using TypeScript for your React app

In the -above application, we used TypeScript over JavaScript to build a React application. And here is why, 

1. Catching errors early: TypeScript can help catch errors before runtime by identifying type mismatches and other errors during development.
2. Improved code quality: With TypeScript, developers can write more robust and reliable code by using static type checking, resulting in fewer bugs and better code maintainability.
3. Better Documentation: TypeScript code can be more self-documenting, as the type annotations make it clear what types of values are being passed around in the code, thus simplifying code maintenance.
4. Easier Collaboration: When multiple developers work on a codebase, it can be difficult to maintain consistency. TypeScript can help by providing a shared understanding of types and interfaces, which can improve collaboration and reduce communication overhead.
5. Better Tooling: TypeScript is supported by many popular IDEs and code editors, which can provide better autocomplete and error checking. This makes development faster and more efficient.

Overall, using TypeScript in a React app can lead to more reliable, maintainable code, improved collaboration, and better tooling support.

‍

Supercharge the viability of JavaScript with React TypeScript and DhiWise React Builder

Creating a cutting-edge enterprise app with React? Let us not fret over the lack of tools in space.

With DhiWise React Builder and TypeScript, you can build a modern and reliable web app in a few steps. The app development platform speeds up the app development process by quickly converting Figma design to React code. Not only that, it provides a range of features to make the entire process efficient and effortless.  

The platform supports both TypeScript and Javascript, so if you are looking for better tooling and robustness, you can get it done with DhiWise React Builder in a few steps- As discussed in the article. 

Then what are you waiting for?

Create your next React app with TypeScript and DhiWise; try DhiWise React builder today.