Ramya Ganesh

Could you help me understand more about your background by giving a brief introduction about yourself? I have, uh, started my IT career in, uh, 2014. Um, as a JSP developer, I was fully trained in Java full stack and, uh, joined as a JSP developer, uh, working with the Java technology. And later, I moved, um, to h four and, uh, multiple, uh, background. Uh, with related to JavaScript I have been working for the past 5 years in JavaScript, uh, particularly I'm well versed in React and in HTML, CSS, JavaScript, React, Redux, Node. Js, and PHP. Uh, I've been working in email templating, building, um, various components for multiple projects, from freelancing to contract job to full time employment. So it was all a part of, uh, my journey. Thank you.

What step do you follow to create a responsive React component without using external libraries? Okay. Uh, to create a a responsive React component without using external libraries. Okay. Okay. You like, uh, me to create, uh, so the requirement is, like, to create a response to react React component. Okay. There is a okay. You know, uh, no external libraries has to be included. To create a React component, we can use either class components or functional components. Recently, functional components are more popular with the advent of hooks. Uh, all the life cycle methods of class components, uh, has been, um, used, uh, have been, uh, as can be achieved with the help of hooks. So, uh, actually, uh, functional components can be used, and, uh, if we have how to create a responsive React component, uh, we can style accordingly. And, moreover, modularity can be maintained for each React component and reusability can be achieved with it.

How do you ensure your JavaScript code attached to a coding standards or style guide? Okay. Uh, we can use, uh, the so, uh, basically, we will be using Visual Studio Code, uh, as a code editor. Uh, that's what I've been using. Uh, so, uh, there, uh, there are extensions, uh, to make sure that the styling and coding standards are followed. And, uh, apart from those extension, we can, uh, to maintain a project wise, uh, styling and coding standard, we can, uh, include a ESLint package also, Linter, uh, to achieve the coding standard.

What methods do you use to ensure cross browser compatibility of your front end applications. Okay. Uh, how to what methods, uh, do you use to ensure cross browser compatibility for your? Okay. Okay. Generally, uh, when, uh, coming to, uh, if we take a JavaScript, uh, in general, all ES 6, um, ES 6 JavaScript is, um, mostly supported by all the browsers. Furthermore, uh, we can check with the can I use a website, uh, to ensure that whether a particular, uh, JavaScript code, uh, can be is cross also compatibility? Uh, and, um, about that, uh, we can use a browser specific styling, uh, in case of styling, uh, uh, to ensure, uh, the cross browser comp cross browser compatibility. That's it.

What approach do you take to structure CSS for a large scale React application? Okay. Uh, there is there are multiple ways to structure CSS, uh, for React applications. One of the methods I would recommend is, um, uh, like, for a particular component, we can associate, uh, the related coding with the module dot CSS at the end uh, with the component name dot module dot CSS at the end to, um, align, uh, okay, to match the component with the CSS. Uh, that's one of the thing. Uh, apart from that, we can use libraries like a Tailwind, which is very popular with the React or Bootstrap, uh, CSS libraries, uh, for, uh, a large scale React application that would help, uh, the application development also faster, uh, with more responsiveness and interactiveness.

How do you manage side effects in React application? Utilizing folks. How do you manage side effects in React application utilizing books. Okay. How do you manage side effects in React application utilizing? React application utilizing hooks are the functional components of React. Now so those use hook. Uh, utilizing, uh, while utilizing Hoag's, uh, it these side effects, Does that side effect mean changing state? How do you manage side effects in the. Okay. If we want, uh, if that means, uh, the side effects, like, changing state, then that happens with the help of used state hook.

Can you discuss a time when you have to debug a complex issue in React or Redux application? What steps, uh, did you take? Okay. When you had to take up a complex issue okay. Uh, there was a time in which um, have been the okay. Deployment was happening very fast. Uh, it was, uh, the product stage of MVP itself because of the requirement, uh, the project went to the live. And, uh, we have been receiving very much issues that the product is not working, working, not working, not working. Uh, But, uh, we'll dig into issue more. Uh, we kind of, uh, found that, uh, the problem is not actually with the application. It was actually with the, uh, Internet connectivity of the customer. Uh, so, uh, while, uh, after the diagnosis of this, uh, we understood that there are lot API calls that is involved in the application under the Internet is a very crucial, uh, for the in the application. So we can't compromise on the Internet. So So we had to come up with a solution, and, uh, we derive a solution like, uh, validating, um, um, the Internet connection before even a person could take take the test. We introduced, uh, module, uh, in such a way that Internet connect only when it is stable, the user could able to, uh, take the test. Otherwise, a message like your net connectivity is, uh, not right for the test, uh, was displayed. That, uh, that is how one of the crucial issue because, uh, it was very it was in live, uh, it was, uh, very crucial.

Can you outline the steps for connecting React component to RedeX tool? Okay. Um, uh, to set up a React component to Redec Store, We have to set up a store, uh, in the in the index, uh, uh, JS file, we have to set up a store in index JS file and, uh, for the RedX, we have to to, uh, okay, uh, store in the index file so that that the store is available for all the components in the project. That store has to be set up. And, uh, as as we know, the Redux is a unique directional. So, um, whenever the state has to be update updated, uh, it has to an action must be triggered and the action, um, it goes to the, uh, reducer and, uh, updates the state. And, uh, whenever, uh, we need a state from the Redux, we can, uh, achieve, but by use selector, uh, to get the, uh, state from the from the Redux tool.

What are the key consideration when implementing server side rendering for a React application? As we all know, SEO is a major, uh, one of the issues with the React application. Uh, since, uh, all the HTML elements are not pre rendered and the JS code runs in the client side to render the HTML. This, uh, server, uh, SEO is problem. So server side rendering, uh, was bought as a solution for that SEO. So as a search engine optimization problem. Okay. And as a server side rendering, uh, for which we have to set up a server side or we can go for an, uh, React frameworks like, uh, Next. Js. What are the key consideration when implementing server set? Okay. What are the considerations we have to make when implementing server set? So if we are going for, um, framework like Next. Js, uh, uh, there is a learning curve involved there because uh, learning Next. Js is, uh, Yeah. There is a learning curve involved there. It has its own features and, uh, way of doing, uh, for routing and all, uh, and everything. So, considering, uh, yeah, that's it.

Good to have question. Uh, when would you consider using CSS modules in projects, and what benefits do you provide over traditional CSS? Okay. Do you mean CSS modules? Uh, what when would you consider using CSS module? As in a project? Uh, that's the that mean the CSS libraries, It will be, uh, very supportive for faster, uh, development of the components.

Good to have question. Can you assist when to use inline styles in React and how they differ from styling with CSS classes. In line styling, I don't, uh, actually, we are over the period of inline styling. Now the CSS has taken to a different part. So, uh, CSS based styling is followed everywhere. In line styling, it has high priority, and, um, the changes that has to be made will be very tedious in inline styling. And, uh, it would mix up HTML and CSS as well. So it is preferred to separate HTML and CSS separately, uh, uh, with the help of class names and all.