1. Tailwind CSS
2. React Query
3. Demo
Part 1
Tailwind
But First...
Bootstrap
Bootstrap
Bootstrap CSS classes represent "Components" comprised of multiple styles
(rounded corners, background, color, hover)
Bootstrap
Bootstrap is great!
So what's wrong with bootstrap?
- "It looks like bootstrap" - designers
- customization can be complex
- opinionated
- third party implementations for react, ng, etc (because of JS)
What's Tailwind
Tailwind takes utility classes all the way
Here's what that looks like:
Ugh, but all those classes!
You'll get over it
Controlling File Size
Controlling File Size
Purgable HTML
- Don't use templates for classnames
- React classnames library helps
Development
Use the classname editor instead of the style editor
Development
Reference docs for classnames
Learn more at tailwindcss.com
Tailwind
What's the abstraction?
Tailwind is a low level abstraction over writing plain css
benefit: fast, easy, intuitive, more flexible than bootstrap, built in "purge" for small file size
costs: discourages (but doesn't prevent) direct interaction with css
Intermission
Part 2
React Query
Oh look, It's another state management thing
(Nice)
Why is (client-side) state management so important?
Traditional Server Side Rendering
Client side single page app
JS State Management Libraries
- Keep state in one or more "stores" (state tree / object)
- Mutate (change) state
- Update components when state changes
vue x, React Context
state management
or cache management?
React Query
By the author of react table
Text
React Query
React Query
React Query
Also check out SWR
React Query
What's the abstraction?
React query is a high level abstraction over local state management patterns concerned with http caching.
benefit: simple api, consistent data fetching and caching, may reduce need for dedicated state management libraries in some apps
Demo Todo List App
Demo Todo List App
Demo Todo List App
