This content originally appeared on DEV Community and was authored by Kushal jangra
One of the coolest (and sometimes confusing) parts about React.js is that there’s never only one way to build something.
From styling to data fetching to animations — React gives you multiple valid options for the same task.
In this post, we’ll break down 8 common UI areas and show the different approaches developers can take.
1⃣ Styling Your Components
React doesn’t force you into a single styling method — you have choices:
Option Example Pros Cons
Plain CSS Import style.css Simple, fast start Risk of global name conflicts
CSS Modules Button.module.css Scoped styles per component Slightly verbose imports
Inline Styles
Styled Components const Btn = styled.button Scoped, theme-friendly Runtime overhead
TailwindCSS className=”bg-blue-500 p-4″ Utility-first, fast Class names can get long
UI Libraries Prebuilt & accessible Limited custom look
Tip: For a design-heavy app, TailwindCSS or Shadcn UI works great. For quick MVPs, UI libraries like Chakra or MUI are faster.
2⃣ Managing State
Different tools for managing component and global state:
Option Example Best For
useState const [count, setCount] = useState(0) Local component state
Context API AuthContext.Provider Small global state
Redux useSelector(state => state.user) Large, complex apps
Zustand const useStore = create() Simple global state without boilerplate
Recoil/Jotai atom, useRecoilState Fine-grained reactivity
Local Storage Sync with useEffect State persistence after refresh
3⃣ Writing Components
You can structure components in various styles:
Option Example Notes
Function Components function Header() {} Modern standard with Hooks
Class Components class Header extends React.Component Legacy, still supported
Compound Components Flexible APIs for UI widgets
Render Props }/> Powerful but can be verbose
HOCs withAuth(Component) Wrap components with extra logic
4⃣ Routing Between Pages
React doesn’t include routing by default, so you have options:
React Router DOM →
Next.js Routing → File-based routing
TanStack Router → Type-safe routing
Custom Routing → Your own conditional rendering logic
5⃣ Fetching Data
Different libraries for API calls:
Option Example
fetch API fetch(‘/api’)
Axios axios.get(‘/api’)
React Query useQuery([‘user’], fetchUser)
SWR useSWR(‘/api/user’, fetcher)
GraphQL Clients Apollo, Urql
Tip: For caching, background refetching, and retries, React Query or SWR is a game-changer.
6⃣ Handling Forms
Forms are everywhere — here’s how you can manage them:
Controlled Components → Store every input in state
Uncontrolled Components → Use ref to read values
React Hook Form → High performance, built-in validation
Formik → Popular form management + Yup validation
7⃣ Adding Animations
Make your UI feel alive:
CSS Transitions → transition: all 0.3s ease;
Framer Motion →
React Spring → Physics-based animations
GSAP → Complex timeline animations
8⃣ Using UI Component Libraries
For quick and consistent UI, try:
Material UI (MUI)
Chakra UI
Ant Design
Mantine
Shadcn UI (Radix + Tailwind)
Takeaway
React is unopinionated — it gives you the building blocks but doesn’t tell you exactly how to use them.
That’s both freedom and responsibility for you as a developer.
Rule of Thumb:
Small project → Keep it simple
Medium project → Use lightweight state & styling solutions
Large project → Invest in scalable state management & UI patterns
Question for you:
Which combo do you prefer for building UIs in React?
Mine is → TailwindCSS + Zustand + React Query for most apps.
If you found this helpful, follow me for more React + Frontend Development tips 
This content originally appeared on DEV Community and was authored by Kushal jangra