πΒ 12 Awesome Web Development Libraries For Programmers Using React.js π§΅π
1. React Responsive
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 β¨
πΒ github.com
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 β¨
πΒ github.com
3. Tailwind Headless UI
Created by the team behind Tailwind β Tailwind components for React π₯
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
π headlessui.com
Created by the team behind Tailwind β Tailwind components for React π₯
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
π headlessui.com
3. Create React App
This tool is great when youβre learning React βοΈ
You don't need to learn and configure many build tools π
Instant reloads help you focus on development.
When it's time to deploy, your bundles are optimized automatically.
π create-react-app.dev
This tool is great when youβre learning React βοΈ
You don't need to learn and configure many build tools π
Instant reloads help you focus on development.
When it's time to deploy, your bundles are optimized automatically.
π create-react-app.dev
4. Next.js
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
β π¬
π nextjs.org
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
β π¬
π nextjs.org
6. React Query
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 ππ€©
π tanstack.com
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 ππ€©
π tanstack.com
7. Apollo Client
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.
π github.com
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.
π github.com
8. Zustand
β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 π‘
π github.com
β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 π‘
π github.com
9. React Hook Form
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.
π react-hook-form.com
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.
π react-hook-form.com
9a) RHF is arguably the most user-friendly form library available today β
All the functionality that you need in a form library is provided in one simple hook, called useForm() π€©
All the functionality that you need in a form library is provided in one simple hook, called useForm() π€©
10. Formik
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.
π formik.org
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.
π formik.org
11. Yup
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 π‘
π github.com
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 π‘
π github.com
12. Ant Design
There are a lot of component libraries out there. Want another one of the best ones? π€
Say hello to Ant Design π
Based on Googleβs Material Design principles.
Comprehensive and well designed. Itβs very good and popular π
π github.com
There are a lot of component libraries out there. Want another one of the best ones? π€
Say hello to Ant Design π
Based on Googleβs Material Design principles.
Comprehensive and well designed. Itβs very good and popular π
π github.com
Thatβs a wrap!
If you enjoyed this thread, donβt forget to like, comment, and retweet the first tweet!
I create threads, and hand-drawn illustrations to level up your software development game π 𧡠π¨
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!
I create threads, and hand-drawn illustrations to level up your software development game π 𧡠π¨
Follow @NikkiSiapno
for more free tips and free resources.
Loading suggestions...