yupDead simple Object schema validation
Yup is a worthy package for validation and highly recommended if you want ease with validations. I have used Yup for validations like email which seems like Yup.string().email().required("Email is required") and this is called chain validation because it will give an error if it is not a string and if it is a string but not email and if it is required and you leave it empty.
Without Yup this all would have been a lengthy process, thus saving you a lot of time.
@material-ui/stylesMUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.
When using material-UI for the first time I always wondered why they provide only blue borders to the textfields and then I came to know about styled-components. I have used styled-components to show a green or a red border if the entered email is correct or wrong.
Styled components help you to style inbuilt material UI components by overriding their properties with your requirements. To understand read the docs, try some samples and you are good to go.
eslintFind and fix problems in your JavaScript code.
ESLint is necessary if you want to prevent yourself from unnecessary debugging. It gives you warnings for not using a variable that is declared and whatever rules you set it works according to that. People generally ignore warnings but I must say it's a good code standard and will help you if you follow proper standards and by using ESLint I have been delivering good projects to the project managers without unnecessary warnings while running the app.
react-domA declarative, efficient, and flexible JavaScript library for building user interfaces.
Ever wondered what makes react the best tool when developing applications. It's the Virtual DOM. React-DOM provides the optimized way of handling DOM. It provided APIs like render(), findDOMNode() and few more. This provides you the ability to render a single component and update the DOM by only changing the sub-tree. The DOM changes are fast as only the differences are checked and updated. This is what makes react-DOM useful for react applications.
dotenvLoads environment variables from .env for nodejs projects.
I have used dotenv in almost all the projects and the most useful was when I used it to keep Stripe_Secret_Key as a secret to pass it to another file using process.env. It's easy to use and helps you keep your keys as secrets. Documentation is also good and for payment related applications I will definitely ask you to save your secret keys in .env and public keys for testing can be used openly but secrets must be secrets and that is done with .env.
stripeNode.js library for the Stripe API.
Stripe has the best and easiest to use API to help you build payment and checkout experiences better. I myself have created a customized checkout page using Stripe, React & Material-UI. They provide a proper dashboard with details for payments, customers, etc. The only problem I had with Stripe was with 3D secure authentication. I found the docs good but some things were not beginner-friendly or we can say not in-depth. I wasn't able to figure out how to use 3D secure authentication for a long time and had to use other tutorials on the web to do so. So, docs should be made beginner-friendly. Also, the customization options are good, so you can customize checkout pages, subscription payments, and you can also make custom invoices (this I have not tried) or invoices using the dashboard, and receipts is an add-on.
In all, it's a worthy and bulky package with many options for a good payment experience.
@material-ui/coreMUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.
I have been using Material-UI for the past few months and I must say it's the best UI library I have ever used. The ease with which you can use reusable components like DatePickers, Snackbars, AppBar, TextFields is better than many other UI libraries for React and moreover, it provides customization also. I have used Buttons, Grid, Checkboxes, alerts, and many more components.
This definitely saves time and the best part is documentation. Documentation is always up to date like the current version (version 5) is already there in the docs and they have given docs for all the versions. I have used both versions 4 & 5. There are some changes in the way we import like @material-ui/pickers is now @mui/lab and many more UI changes and bug fixes have been done. So, they also provided you 'how to migrate from version X to version Y' which helps you stay up-to-date without any hassles.
@material-ui/iconsMUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.
You have to use icons in every place. Like showing eye icons for passwords using InputAdornment or using tick icons for validation and many more. I have used material-UI icons for validations and customized them according to my needs using MakeStyles. The best thing is that the library is very vast. Sometimes when using other libraries you may be in a situation that you can't find the icon you want and customization is also not easy for other libraries.
But I have spent a large amount of time using material-UI icons and must say I got an icon in this library for all my needs. Moreover, customization is also easy and you can follow docs to understand the same.
reactA declarative, efficient, and flexible JavaScript library for building user interfaces.
React has provided me with tons of options to build better web pages than I ever thought of. It's easy to start with if you are experienced or have somewhat used JS earlier. Good command of CSS is a plus if you want to play with customization. Reusable components and stateful components are what make react stand out from others. I must recommend react with material-UI for building good quality frontend for your application. React uses VirtualDOM and keeps the last DOM version in memory and only updates the changes we made not the whole DOM node.
This is what makes react a more efficient approach to build a good frontend for the web pages.
prettierPrettier is an opinionated code formatter.
I used to write code in a bad way, with no spacing, no tabs, you will have to use a horizontal scroll bar to see my code if I wasn't using Prettier. But with Prettier I got to write neat and clean code with proper spacing not only for the working code but also for the comments you make.
Sometimes you might feel like why is it necessary but trust me and compare the codes you have written with & without prettier and you will love how the code looks when using prettier. It comes under better code standards that should be followed by every developer.
For beginners, customizing it might be a little tricky else it's all good.
