Shadan Khan

Hi, dear. I am working on front-end technologies. I have five plus years of experience. I have done various projects. I have done an ERP project. I am currently working on an ecommerce website in which I have done lots of dashboards. I have worked in React JS, JavaScript, HTML, CSS, Bootstrap, jQuery, and a library. So, and right now, I'm working on the HP project, which is for the ecommerce side. In this project, I have done work in ReactJS, Redux, and JavaScript as well. And I'm using Material UI as a UI interface in this HPE project. Previously, I was working on an ERP project. In that project, I have done fifty plus dashboards. In those dashboards, I used Highcharts for charts and for data tables. In those data tables, that project was for Sedan International Saudi Arabia company.

React JS and Redux is a management storage tool. Suppose if we want to change anything in another component, it is very hard to get things from React JS. So that's why some developers developed Redux. Redux means you can store any value in the Redux store. After that, if you want to use that value, you can use it from wherever you want in the application, vice versa. We also have that thing in React JS, but it's not appropriate as compared to Redux. And if you go with Redux, then you need to do prop drilling. Prop drilling means you need to pass your variable into different components. After that, you can change it. But in Redux, there is no need to change or do prop drilling in two different components. We just directly put that variable there, and you can use it with the help of your selector. If you want to dispatch anything, you can dispatch it. And based on the dispatch, you can take any action on it.

In HTML and CSS for web accessibility, we need to use ARIA. ARIA means a web accessibility point. If we are giving any ARIA attribute to the HTML at that time, we can assure that it is a correct format for an accessible person or an unable person to read that properly. If we use a tab or enter anything, then it will tell correctly. If we are using, like, dev or some unsymmetric text in that case, then accessibility will not work. That accessibility works only in semantic text. So whatever HTML5 is using, like, header, footer, nav, mark, address, video, audio, these new decks, to, basically, and that as well. In this case, if we also need to give a hyphen label, hyphen, click, those values, also, we need to mention them. Based on that, it will work fine, and we can ensure that the accessibility is correct, or it is good.

In this case, what we can do is determine how to build a system to share a state. To do this, we build a Redux middleware. In that Redux middleware, we need to put it first. We create one state to see in the store folder, where we can create two files: one for actions and another for reducers. So, we can write all the code. If it's for an action, we write all the code in the actions folder. If we want to get a value, we write all the code in the reducers folder. If we want to get a username, which is in authorization.js, we write that code in authorization.js only. In Redux, we can also create the same file name with authorization.js, and write all the reducer actions over there. If we want to call it, we directly recall one file in that file. We just need to create one file in both places. In the index.js file, we can call all the proper files from that folder, and based on that, we can directly pass one file. So, wherever we need to dispatch or use a reducer with the user state, we can directly use that file and get it. Based on that, it will be easy for us to maintain things.

I will choose Material UI because Material UI is better. Material UI is better. Tailwind is, CSS is also better, but in Tailwind CSS, we need to write our own HTML as well. But in Material UI, there is no need to write our own HTML. They already provided their own components. Based on that, we can call those components. And, right, the code, if you want to change it, we can change it in Material UI as well. But in live, Tailwind CSS, we need to write CSS directly in HTML. So, sometimes, it's not good as compared to Material UI. And Material UI is also answered by Google, then that is also a plus point to Material UI. Based on that, if you can see, there are lots of developers working behind this. So if we get any updates directly, we can use them.

Yes. No response or not. Because as you are seeing that in style, we are using inline with 800, it means that if we want to overlap or override this value, we can't override because we are using that with 800 in this inline CSS, which is not good if we are using any CSS external or we can see in the file, so we can make it responsive based on the direct media query. Based on that media query, we can give the value, whatever value, whatever max width we want. So based on that, it will work fine. But in this case, that will not work because we cannot change this value or we cannot override this value because if we give anything in the CSS, it will not override because in div, it is taking only directly in line, which is not a good practice. As well as not good for our code to make any application responsive. If we want to make any application responsive, in that case, we need to give terminal CSS only. Because in external CSS, if we want to change anything, we just need to give the class name to that file. And first, we need to use the media queries. Based on the media queries, we can give the value. Like, edit media, screen, and only screen, and max width if we give 767, after that, whatever class we are giving there, based on that class, we can give the width and change it. In most cases, there is no need to take specific width away because which is not good. We just need to take 100%, it automatically fixes to the screen based on the screen size or resolution. Sorry. So there is no need to write anything in inline because that is not a good practice and which is also not.

In this case, if you will see the code, in this case, we have two options. In this case, we have two options. What we can do is, we can do the first thing, if we want to make this code with an exceptional error, so we can use a try catch. After that, we can put the logic there. Or in the other case, what we can do is, we can take this data. After that, we can use if or else condition. Based on that condition, we can handle the exceptional errors. And that's it for this fetch. In this fetch, what we can do is, fetch the API endpoint. Then, we get the response. After that, we get the response data. We can console log it. If we are getting anything, then directly, we need to write a try catch. In that catch, we can give the exceptional error. Whatever error we are getting, we can pass or throw an error based on that. Or if we want to do it differently, then just we take the response. After that, we can use an if condition and check if we are getting a correct status. Based on that status, we can show the value to the user or to the customer who is seeing that.

First, we need to create a constructor based on the constructor prop. In that prop, we can take the value. If we directly use it, then this is not good and it will reduce the speed or we cannot optimize it. So first, we need to create a constructor. Based on that, we can pass this product to the name. Is that will help us to optimize and optimize the application as well. But now, if in this case, as you know, it is an old syntax. If we change the syntax to React 17 or React 15. So based on that, what we can do is use React-based use selectors, meaning React hooks. In those hooks, we have lots of things to reduce or optimize things, sir, like lazy loading, React lazy loading. Based on lazy loading, we can give suspense and a loader that value. It will give a boost to our application and optimize it as well. If we are using any value that is currently or we are seeing that value not changing, then there we can directly use memo. Based on memo, we can reduce the application optimization, and the application will be fine. And the application will give the speed as well. This is recommended by React as well in the current and present scenario.

As you know here, they're mentioning that the speed of optimizing any speed, then I will recommend that we need to write our own code. If there's no need to use a third-party library, like Material UI, because in Material UI, if we want only some features, like buttons, we want inputs, we want models. In that case, what will happen if we install it? We will get all other things as well, like dialogs, and tables, menus, all those things, which are not required for our application. Then, in that case, it will impact speed optimization. That's why I suggest that we can use simple HTML, CSS, JavaScript, and React JS directly. So, we can write our own code based on that. If we want to optimize anything, we can optimize it directly ourselves. So, it will speed up our application, and it will be good to write less code compared to using a third-party library.

Suppose we want to, like, we are making one banking application. That application, we want to add or subtract direct while a user is withdrawing or depositing an amount, so in that case, we have one structure in the system, we just see that if the user is putting some values and we just send or save after that, it needs to be updated in other places as well, like in the bank, not on the front page. It needs to be managed in the ATM, in the bank account, in other applications, like right now, nowadays, we are using many third-party applications as well. So, what we can do, we can make one Redux in Next.js, basically, just for the backend. So, if we change anything, we will push it, then directly Next.js will be automatically updated with those things. But if we want to show those things in the frontend, then how can we show it? We can show it based on the Redux. If we update anything, we will need to dispatch that action. The reducer will work, and after that, once the things will be updated automatically, that will update our UI without any refresh or refreshing thing. That's why it is a single-page application, and it is also a web progressive application as well.