AMRIT SHARMA

Okay. So I'll be talking about my technical journey. So I started as a back end developer. Initial days, I was working with the, uh, and Node. Js for building a, uh, building a blockchain solution for cannabis industry. We were building a ERP solution. After that, in my next organization, I started working with working on, uh, React JS as well alongside with Node. Js. So for a few time, I have, uh, worked as full full stack developer. And from last 3, 4 years, I have been, uh, completely I have been completely into React. Js talking about my tech stack. So that includes React. Js, Redux, Redux toolkit, HTML, CSS, JavaScript, written standard, RTL, and just for, uh, testing, get for version control, uh, Dalvin CSS material UI, etcetera. Talking about kind of projects that I have worked on, so I have worked on CRM, uh, software. I have worked on ERP solutions. I have worked on, uh, login based product. And, currently, I'm into energy sector, and, uh, my current project is about, uh, like, uh, we are taking our client on our digitization journey. So, uh, currently, he is, uh, managing some legal documentation, and he is doing it with the Microsoft Word. So, uh, we are taking him we are developing nice web pages for him where, um, apart from, like, uh, look and feel is the same, uh, as we get on Microsoft Word. Apart from that, uh, we are giving many functionalities like, uh, uh, side navigation tooltips, search functionality, uh, showing images there, and, uh, math formulas. So a lot of things. A lot of features we are giving on top of, uh, just providing also. So that that has been, um, a brief background about me.

So, uh, like, um, uh, this this have would have been relevant, uh, like, previously when, uh, functional components, uh, did not, uh, used to have, uh, do not did not used to have, uh, states or, uh, life cycle methods. So, uh, so, like, uh, previously, uh, functional functional components were considered stateless component, and, uh, those were just, uh, used if any static JSX was being returned. So, um, in at that time, uh, functional components were only used, uh, if our component was stateless. But now with introduction of hooks, so, uh, pretty much everything can be pretty much everything can be achieved, uh, using functional components, and that has become a standard way as well for using components. But still, uh, I think, like, uh, um, the, uh, the I can think of one com one thing that, uh, that is still that for that still, we need class components that is, uh, error boundary. So if we want to implement, uh, error boundary, then, uh, we have to we we have to go with the class components only.

So CSS, uh, uh, CSS preprocessors are, uh, so, uh, let's suppose a CSS is a CSS preprocess for CSS. So, uh, like, uh, if we talk about enhancing our style encapsulation, so, uh, first of all, what what they can do, like, uh, they can what CSS is lacking? CSS is lacking programming, uh, programming things. So, um, we we cannot have a files. We cannot have variables. We cannot have, uh, loop or some these these kind of things, basic, uh, features of a programming language, those, uh, those are missing from CSS. So that's where uh, role of preprocessor comes. They they give us they give us leverage of using, uh, variables, conditions, loops, etcetera. And using those, like, uh, our we can encapsulate our CSS. Uh, we can, um, uh, we can extend from, uh, we we can use mixins. We can use, uh, we can extend our CSS. We can reuse reuse any existing, uh, CSS. So that's how, like, preprocessor help us to enhance style encapsulation.

Imagine handling the state in which many user logs in a message is displayed. How can we do this? So how can I use react state to display this message? Okay. So, uh, whenever whenever, uh, user logs in, imagine handling a state in which when user logs logs in, a message is displayed. How can you use read state to display this message? Okay. So, uh, like, uh, we can we can hold, uh, that message in, uh, React state and, uh, like, using, uh, using reduct state or, uh, using custom hook, we can, uh, we can identify that, uh, whether whether, like, a user has logged in recent currently. So, uh, on the basis of that, uh, we can, uh, display the message that, uh, we have in state. I'm not pretty much sure about the question. Like, uh, what is the ask here?

Describe the process you follow to ensure cross browser consistency in React application. Okay. So, uh, there are few things, um, like, uh, first of all, using browser list option in package dot JSON. So, uh, they are I can tell that, uh, which browsers I I would want my application to run on, and, uh, that's how, um, it checks, uh, cross browser consistency. Apart from that, uh, in some cases, we have been using polyfills as well. So, uh, if, uh, anything is not available in uh, cross browser, so we are doing it with the, uh, polyfills. Apart from that, uh, uh, we are using synthetic events. So, uh, synthetic events are like a a wrapper on, uh, native events native browser, uh, events, and, uh, like, React itself, uh, put gives a wrapper. And so, uh, like, uh, click for for for click event, uh, gives us on click, um, on click attribute on, uh, on the element. So using those synthetic events also, cross browser consistency is achieved.

How would you manage global state in a large scale, uh, application without Redux? Okay. So, uh, if we do not want to include Redux, so what we can do, we can make use of, uh, combination of use context and, uh, use reducer. Uh, these both hooks are provided with the React library only, so we do not have to import a third party library. So, uh, like, uh, it it won't be heavy. It won't be heavy on on ours, uh, on our, uh, application. Uh, build side won't won't be increased. And how how can you do that? So, um, inside inside context, you, uh, inside context, you, uh, provide, uh, you provide all of your state. And, uh, using use reducer, you can kind of, like, uh, kind of similar architecture as Redux is using. So you can build similar kind of architecture where uh, you would be writing a a reducer function. And, uh, on the basis of type and action, you would be deciding that how do you want to update the state. And, uh, like, there won't be multiples multiple states. So, uh, code will also become uh, more readable. And, uh, similar way, like, uh, we we wrap everything inside our our Redux provider. So similar way, we can, uh, we can wrap, uh, inside the context provider and, uh, wherever we want to use, um, our state. So, uh, we can use use context and, uh, wherever we want to dispatch any action. So, uh, those actions, uh, we can, like, we can add as, uh, add in the context, and we can dispatch dispatch those actions as well.

And this React function component snippet identify what React hook is used and, uh, explain its purpose also support any potential issue with the way it is implemented. Okay. Uh, in this, uh, in this, uh, in this snippet, um, I can see there are 2 hooks are being used. First one is, uh, use state, and, uh, second one is useEffect. So, uh, talking about use state, use state, uh, create you use state returns, uh, array of 2, uh, array of 2 elements. First one being the state itself and, uh, second one being the modifier function. So, uh, if we talk about here so, um, like, uh, we we have the data and set data. Data initial data is initialized with null. So on the first mounting, uh, like, whenever, uh, this component is mounted first, so, uh, data will hold value as null, and, uh, set data will be having the function to update the value of data. Okay. Talking about, uh, talking about next, uh, next hook that I can see here that is useEffect. Uh, so useEffect is for handling any side effects in in in our component. So, uh, like, uh, there is an API call, uh, and, uh, on the basis of that API call, our, uh, our state is being changed. So, like, uh, this thing, uh, this thing, we can okay. Yeah. So, uh, this this way, we can handle any, uh, using useEffect, we can handle any side effects in in our application. Currently, uh, in this example, we are using useEffect for, uh, making API call and, uh, whatever, uh, response is coming from, uh, API call. So, uh, we are we are using that to, uh, update the data update the data and use effects and passing function. So, uh, talking about any potential issue, uh, uh, the way it is implemented, so, currently, what we are doing, uh, we are checking if, uh, we have the data. So if, uh, if any data is coming, uh, if any data is coming, then we are mapping on it, and, uh, we are displaying the name, otherwise loading. So if, uh, this API call fails and, uh, uh, like, we are not able to update the data, so it will forever be in loading state. So that is, uh, something, uh, I can see.

This also could identify the potential issue when trying to alert the name. Could you please explain why it is happening? Person delete person dot name. Person dot So, uh, I'm not, uh, very much sure about this, but I guess that, uh, using delete, uh, what we are doing, we are deleting the key, uh, key name on the person. And, uh, after that, we are trying to alert with the same, so, uh, it does not hold any value. So that might be the issue, uh, when when we are trying to alert the name.

What are the steps to follow to migrate again in the task component to optional components using hooks? Okay. So if, uh, we want to migrate from class component to functional component so, um, I think, like, uh, first of all, the moving the GSX part, so, uh, that that that is pretty simple. So we we are also using, uh, JSX inside render function. So render function also does the same thing. It returns the JSX and inside functional component also, we want we need to return a GSX. So, uh, like, that that should be that should be easy. Um, there are few things, uh, like, when when we use class components, so we use, uh, we access that we access the state and props using, uh, this keyword. So those need to be changed a bit. And, uh, like, states also can be moved, uh, pretty straightforward. So whatever we have in the class component, so, uh, we can use use state hook, uh, for, uh, for migrating the states. Main thing is, like, uh, about life cycle methods. So, uh, there is a way, like, uh, whatever we are doing with life cycle methods, so we can achieve the same thing, uh, we can achieve the same thing, um, inside we can achieve the same things, uh, inside functional component as well. So for example, uh, we had build component mount. And, uh, um, in functional components, if we, uh, uh, write a use use effect with the empty array as dependency, so it behaves the same way, uh, as, uh, did component mount was behaving. So, uh, we can provide the callback function there, whatever we have returned in did component mount. So, uh, there are ways, uh, to, uh, like, how we can migrate our life cycle methods inside functional components. And, uh, even if, like, uh, something is not there, then, we can, uh, we can identify the, uh, function what functionality would it have been achieving. So we can do the same thing in functional component as well. So pretty much everything is achievable with functional component, uh, now. It is not like, uh, previous times when, uh, functional components used to be stateless.

Okay. Uh, so talking about configuring a Webex, so, uh, I will assume that, uh, we have created the, uh, we have created the project using, uh, CRA, create React app. So, um, when we when we create the project using the CRA, so, uh, like, Webpack and Babel, uh, those are already, um, integrated in the project, and, uh, they are, uh, like, managed in the standard way also. So we do not have we do not get any configuration file for webpack. Uh, but what we can do, we can, uh, they give us script as well, uh, eject script. So we can run NPM run eject in our project and, uh, what they will what it it is a irreversible, uh, command for for a project. So, uh, if if we once run it, then, uh, we cannot go back to, uh, we we cannot go back and tell React that, no. Oh, okay. Now you manage the webpack for us. So it is a re irreversible, um, irreversible command. So any any point of time, what we can do, we can run NPM run eject command, and, uh, that will make the necessary changes. And, uh, instead of, uh, managing webpack config file by itself, it will give it it will include that, uh, webpack config file in the project. So talking about Webpack config file, uh, it has a lot of things. It has, uh, entry point and, uh, the files, uh, which which will be accessed through any particular rule and how how should how should, uh, your what what should be used to bundle your, uh, your code and how it should be done, how you want to handle, uh, as you you want to handle CSS images as etcetera. So those all things, uh, you can configure, and, uh, whatever is efficient for your web application, you can make those changes in that, uh, webpack config file.

How do you integrate TypeScript in that field project to improve code reliability? Okay. So, uh, there are, uh, like, uh, I I would assume that, uh, I would assume that, uh, this is, uh, if if it is in a new project, so, um, like, uh, we are start starting the project from scratch. So what we can do, uh, like, there are templates available for typescript as well. Uh, so CRA also has it, and, uh, CRA is, uh, pretty much deprecated now. So new, uh, new players that are there, like, white is there, uh, and, uh, uh, Next. Js is there. That also gives us the boilerplate code for starting any application. So these, uh, like, white also has, uh, our typescript templates. So, uh, we directly get, everything which is required for, uh, including typescript in in our project. And, uh, if, uh, if we are doing if if we are doing, like, uh, we are implementing typescript in a existing project, then we have to install the dependency typescript dependency there. We have to, uh, initialize, uh, initialize the TypeScript in the project so, uh, that would generate tsconfig file. And, uh, um, like, apart from that, uh, we have to we might need to update our, uh, webpack as well, uh, and our ESLint configuration as well to include, uh, types as well. And, uh, we can work with a broken window approach. So, like, for any new development, we will we will be 100% using, uh, TypeScript. And as we, uh, as we, like, uh, encounter any anything where TypeScript is is not being used, so, um, we can keep updating that, and that's how, like, uh, we can, uh, uh, we can transform our existing project also in TypeScript.