AMRIT SHARMA

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

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

So CSS preprocessors are, so, let's suppose a CSS is a CSS preprocessor for CSS. So, like, if we talk about enhancing our style encapsulation, first of all, what they can do, like, they can do what CSS is lacking. CSS is lacking programming features. So, we cannot have files. We cannot have variables. We cannot have loops or some of these basic features of a programming language, which are missing from CSS. So, that's where the role of a preprocessor comes. They give us the leverage of using variables, conditions, loops, etc. And using those, like, we can encapsulate our CSS. We can extend from existing CSS. We can use mixins. We can extend our CSS. We can reuse any existing CSS. So, that's how preprocessors 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, whenever, user logs in, imagine handling a state in which when user logs in, a message is displayed. How can you use read state to display this message? Okay. So, like, we can we can hold, that message in, React state and, like, using reduct state or, using custom hook, we can, we can identify that, whether, like, a user has logged in recent currently. So, on the basis of that, we can, display the message that, we have in state. I'm not pretty much sure about the question. Like, what is the ask here?

I ensure cross browser consistency in React application by using the browser list option in package.json. This tells me which browsers I would want my application to run on, and that's how it checks cross browser consistency. Apart from that, in some cases, we have been using polyfills as well. If anything is not available in cross browser, we do it with the polyfills. Apart from that, we are using synthetic events. Synthetic events are a wrapper on native events, and React itself provides a wrapper. For example, the click event gives us an on click attribute on the element. Using those synthetic events also achieves cross browser consistency.

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

And this React function component snippet identifies what React hook is used and explains its purpose, also supports any potential issue with the way it is implemented. Okay. In this snippet, I can see there are two hooks being used. The first one is the `useState` hook, and the second one is the `useEffect` hook. The `useState` hook creates an array of two elements. The first element is the state itself, and the second element is the modifier function. So, in this case, we have the `data` and `setData` variables. The initial data is initialized with `null`. On the first mounting, whenever this component is mounted for the first time, the `data` will hold the value as `null`, and the `setData` will have the function to update the value of `data`. Talking about the next hook that I can see here, which is the `useEffect` hook. The `useEffect` hook is for handling any side effects in our component. In this case, there is an API call, and on the basis of that API call, our state is being changed. This way, we can handle any side effects in our application. Currently, in this example, we are using `useEffect` for making an API call and using the response from the API call to update the data. Talking about any potential issue with the way it is implemented, currently, what we are doing is checking if we have the data. If any data is coming, then we are mapping on it and displaying the name. Otherwise, we are displaying the loading state. However, if the API call fails and we are not able to update the data, it will forever be in the loading state.

This could identify the potential issue when trying to alert the name. Could you please explain why it is happening? Person deletes person's name. Person says, I'm not very much sure about this, but I guess that using delete, what we are doing, we are deleting the key, or key name on the person. And after that, we are trying to alert with the same name, so it does not hold any value. So that might be the issue 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 we want to migrate from class component to functional component, like, first of all, we need to move the GSX part. That is pretty simple. We are also using JSX inside the render function, so that does the same thing. Inside functional component, we also need to return JSX, so that should be easy. There are a few things to consider. When we use class components, we access the state and props using the this keyword, so those need to be changed a bit. And like, states can be moved pretty straightforwardly. We can use the use state hook for migrating the states. The main thing is about life cycle methods. There is a way to achieve the same thing we do with life cycle methods inside functional components as well. For example, we had a did component mount. In functional components, if we write a use effect with an empty array as a dependency, it behaves the same way as did component mount was behaving. We can provide the callback function there, whatever we had returned in did component mount. We can identify the function and its functionality, and do the same thing in functional component as well. Pretty much everything is achievable with functional component now. It's not like the previous times when functional components used to be stateless.

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

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