Ravinder Singh

My name is Rindra. I have total 10 year experience in the IT industry. Uh, from last 4 year, I am working as a director. Js platform. I have expertise in React JS, JavaScript, React's context API, and, uh, good knowledge of HTML, CSS, and the c l CSS framework like Boostcap, Tailwind. So I am along with this, I have good experience in cater, you know, Shopify, Webflow, etcetera. Thank you.

Actually, the web web packet web package is totally the node package. So if we install the node in our system, the webpack and the webpack. So the backpack packages are auto material is to, you know, 0. Thank you.

First of all, we will imply we will implement the validation to the React form. And, uh, after that, we will so we are using, uh, Tailwind CSS in our so project. So we will use the Tailwind classes for the validation message. Like, if if the there is any type of error validation error, then we will use the tailwind classes, uh, for this, like, color red or something, background red for the with the validation message. So it will, uh, simply indicate that it is an error message. And if there is any success message after the after the form submit, then we will use the another classes of tailwind or background gray or something with the massive detector green. So we will use these approach for the formal user.

Actually, the backpack is using the the the application is for the performance of the projector in the so if if we check the another another uh, websites normally in, like, the asp or other platform. If we load the if we switch from a link to a new link, it'll totally reload the full website. And, uh, with the use of Webpack, if, uh, like in the React, if we switch from one link to another link, it it only reflect the it only change the layout of the page without loading the page or refresh the page.

Actually, load lazy loading is the now the, uh, lesson for the lazy loading of any image, we we can use the simple tag of the HTML, like, loading is equal to lazy. So if if we scroll the pages, the element scroll, uh, element load accordingly. But there are some some key points of it. Like, if there is any image in the first view, so we don't need to implement the low z loading there. In that case, we we will use the, uh, loading error with the fast priority high. So the, uh, the image that has that is in the first view, it will low the priority of this image will be high and low and will low down priority.

If any that component is choosing performance issue, then, firstly, we need to check the the state of the component. Uh, we need to check, uh, for example, if, uh, there are some there are some states that we we we need to, uh, we know to load we we need to load only any specific trigger or something. But, uh, in some components, we are checked at if any any trigger is implemented on the page, then then it will reload the total component That will cause the performance issue in the application. So to avoid this, we we need to reload the specific element only on any on any, uh, trigger. Thank you.

Actually, if we if we implement the flex on the parent, like, the container cross, then the it's a child element with the will have need to have the same property like the sidebar. Uh, sidebar has a width of 0 0, uh, 250 pixel. It means the the flags is the side bar is take the bit of 50 pixel. But if the, uh, the main content is also the child, So it will implement the 100 100 bit. So to resolve this, we need to implement the filter of the main content with the calculate property of CSS like c a l c, and, uh, each width will be 100% minus 4 50 pixels.

Actually, the, uh, reducts, uh, feature we are using to for the, uh, state management for the large scale of projects. So if the if, uh, we know that there is a if there is any project that that have the multiple nesting of components and, uh, the data will be for passed from the 1 component to another phone, child preference. So in that case, we need to use the reducter from NASA state management.

Actually, in the React application, if there is any static element, then it will not implement. It will not affect any any, uh, performance of the website because it will load only the first when the website load. And after that, uh, if there is any any change in the event or any change in the state, So only in that case, the particular state or the content will effect. So it will not effect any static assets in the end.

Actually, uh, I have a perform I have failed this user in one of the my projector in which, uh, if the the, uh, the user factor, the use factor of the work of the React is implemented. If there is any change in the thumb change in any of the, uh, any of those, uh, element or any change in the object. So and, uh, so we have to work on this. We we have, uh, I have changed the I have changed the, sorry. I have changed the state of there from not not to reload the folder if there is any change in the object. And, uh, I I have implement only if there is any particular value of the key of the object will change. So I hope I explain it better. Thank you.