1. Tailwind CSS

2. React Query

3. Demo

4. One last thing about state mgmt

Part 1

Tailwind

But First...

Bootstrap

Bootstrap

Bootstrap CSS classes represent "Components" comprised of multiple styles

(rounded corners, background, color, hover)

Bootstrap

Utility classes

Bootstrap

Utility classes

 

 

Here's what that looks like:

 

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 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 alleviate need for dedicated state managment libraries in some apps

 

costs: chatty(?) learning curve(?)

Demo Todo List App

Demo Todo List App

Demo Todo List App

taiwind + react query

By gpspake

taiwind + react query

  • 36
Loading comments...

More from gpspake