React Query is often described as the missing data-fetching library for React.
In more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.
Building components takes time.
Wouldn’t it be great if there were a library of components already built for you?
Welcome to MUI.
Inspired by Google’s material design.
Use them directly or as a basis for your own UI Kit.
Created by the team behind Tailwind — Tailwind components for React.
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Next Generation Frontend Tooling.
Vite provides a React development environment like create-react-app.
But it’s a lot faster and scales a lot better than create-react-app.
I’m a big fan of Vite.
Next.js can be thought of as React.js on rocket-fuel.
It’s React with extra features.
And those extra features are a huge deal.
Out of the box:
→ Static site generation
→ Server side rendering
→ Route pre-fetching
→ 💬
All web applications you build should be responsive.
You can write CSS media queries for your React apps if you want.
There is a much cleaner and effective solution though. React Responsive.
If you’re working with GrahQL APIs in React then this library is amazing.
It allows you to easily build UI components that fetch data via GraphQL.
Forms are a huge part of frontend web development.
Handling basic tasks like input validation and error states writing our own React code is not efficient.
Thanks to open source, we have awesome form libraries.
All the functionality that you need in a form library is provided in one simple hook, called useForm().
Formik is the world’s most used open source form library for React and React Native.
If you want an alternative to React Hook Form, this is it.
I’ve used both, and can say they’re both great.
I lean towards RHF these days.
Yup is a JavaScript schema builder for value parsing and validation.
Define a schema, transform a value to match, validate the shape of an existing value, or both.
It is commonly used with forms for input validation.
Use with Formik.
”Bear” necessities for state management in React.
Zustand has the best of both worlds of Redux and React Context.
Best thought of as the power and functionality of Redux, with the simplicity of React Context.
I simplify software development and getting into tech💡
Follow @NikkiSiapno for more free tips and free resources.
If you enjoyed this thread, don’t forget to like, comment, and retweet the first tweet. https://twitter.com/1511613750637318151/status/1594975459284250624
Follow: @NikkiSiapno
[Via]
