Abhijeet Maharana

So I am Abhijit Maharan. I work at, uh, HP currently as a software engineer. I have more than 3 years of experience as a front end developer. I have worked, uh, for 2 companies. That is HP and, uh, mobi.com. So I mainly work with React Next is CSS, uh, HTML CSS, and JavaScript TypeScript and all, all the front end technologies. Uh, I also worked with some back end technologies like Express, uh, Node, and Mongoose. And, uh, I have created several, uh, projects in, uh, my company currently working company, like admin panel type of thing, uh, where we're seeing the charts and graphs user for visualization, So in tables, and, uh, uh, we check it out using React. So we have used all the power of reality in our project. So that's it.

Okay. So there is, uh, uh, we can generate the types based on the response. So to make ensure that our TypeScript interfaces and our types, uh, also are aligned with the current API as per, uh, the API JSON data. Also, there is a library called, um, I'm not sure about that, uh, library name, but we can use that to generate the types from the uh, API that we received. That is one way. Or we can make sure, uh, to create adapters, uh, for each API to convert the data received from the API to our own model to make sure it align with our front end and doesn't break anything at all. That's it.

Okay. So before building the UI component, we need to first check quite all the elements that are required, like input and, uh, deep and all. So first step is to create the markup, then we also need to take care of the accessibility of the UI. Also, then we need to add the CSS. Like, you can use style on CSS or stylesheet to create the UI. So we'll create the small small components part, then then we can create the larger sections from those smaller components to make it more reusable. So that is the best practices.

To centralize API calls first, uh, the API URLs, we need to create 1 separate API, separate file to store our API URLs. Then, uh, we need to, uh, uh, get in another service folder. There we can call all our APIs. That is one way to maintain a separate folder to call our APIs. Also, we we can use some libraries like re React Query or a Redux toolkit query to call the APIs as it provides casing, uh, stalling, and refreshing data loading and error rates and all. So this is how we call the API and make it more maintainable.

Okay. K. So so there are 2 approaches. 1st, we develop the desktop version, then we move to mobile version. But I prefer key develop the first, the mobile version, then slowly move to the be larger screens. So this is, uh, a good approach to develop first. This is called mobile first approach. So we first write the all the seats required to for mobile screens. Then we add the media queries for suppose medium screens, uh, and make it compatible with medium screen. Then we move to the larger screen, then extra large screen, add the styles for the extra large screen. So that's how we implement, uh, responsive designing using CSS 3.

Repaging of data from an external API. So you want to navigate client side and, uh, preface data from external API. Okay. So in Next is provides us by default, you can call any API. So there is a upgrade tree. You can create your component there. So you can immediately call any API. So it will give you all the server in that components. API will be called on the server. So that is one way. Or else, if you want the API to be called on client side, we can do that using useEffect hook. So while navigating to the pages, these are 2 ways. 1 is a client side. 1 another is server side. You can, uh, call the API, which which is an external API, uh, using these 2 ways, whichever you prefer.

Okay. The issue is, uh, useEffect is getting called without the dependency array. So the API call will be made multiple times. It will be an infinite loop, I guess. So better to use dependency array in the use effect.

Data, we're sending ID 1. Name is John Locke. Okay. Then, uh, we have defined the type as ID is number. Name is string. Okay. Okay. So as this is a object type, We better to validate it, uh, to make sure the data exist. As we are, uh, inputting the data from the user to it's better to validate the data before sending it to the back end service. Even if we have type defined, type is for TypeScript is for development purpose to capture. But in production, any issues can happen. So better to check if the ID and name are exist. Then only send the data to the API. That is a better way.

Okay. A react up with various third party services. 3rd party services, by mean, you are calling a lot of APIs at a time. So better to use promise all to call all the APIs at a time parallelly, uh, and show the data at the end if all the API call gets passed. That is one way. And, uh, and the way is, uh, promise, uh, dot, uh, any you can any of the API calls failed still, you'll get the data and so. But I prefer permission all. And, uh, high traffic ranges of the data is various third party services, wellness, scalability. We can case the data for catching and all. Uh, we can use area query, uh, to case the data. We will also be getting that is loading user and property who can show all the error and loading property and all to give better UX to the user. There is a lot of things that can be improved. Uh, in a high traffic website, we can optimize our component using use memo and, uh, use callback, and we can minimize our components. Um, that's it.

Okay. Before calling the external APIs, I suggest using suppose if you use Axios, it's better to create a Axios interceptor so that you can use the same base over there so that you don't need to repeat again. You can store the authorization token in the interceptor so that we don't need to use it everywhere. Same as content type application JSON in the interceptor. So this is one way. Also, you can use the React Query, uh, package to case the data for suppose 60 seconds. And, uh, we can also rebuild it. We you will get we'll be adding user is loading property and all. So, uh, both with Nexus and React, we can do that. Uh, Nexus is a little bit different because the server if you want server component, it will be API will be called as a server. For Next is also you can use static side generation, uh, or else incremental side generation. A lot of things can be done, uh, with Next is doing, uh, once implement directionality.

Okay. So Figma provides a demo where you we can see the all the, uh, height and the width, color, uh, margin padding, and all, uh, a big component. So we can utilize that to create a first, create the smaller components using React and, uh, reuse that same component to create bigger and bigger components. So that's how we create components in React. Hash create the smaller one and reuse it. Better to reuse it as much as you can. Uh, and, uh, this is the way to smooth transition from UX UI design to Figma design to the React based framework. Uh, we can, uh, utilize some CSS frameworks like a Tylen CSS to, uh, to make development faster, to make, uh, the UI development faster. Also, you can use the, uh, UI package, uh, to make uninstalled components, and we can sell them using and all. Uh, a lot of things can be done, uh, from filetangism from Figma to React. That's it.