DEV Community: Kushal jangra

🚀 React.js UI Development: 8 Different Ways to Do the Same Thing

Kushal jangra — Thu, 14 Aug 2025 17:24:34 +0000

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

Dynamic per-element styling No media queries easily
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 🚀

Day 13 strive sheet

Kushal jangra — Fri, 25 Jul 2025 18:10:14 +0000

Day 12 striver sheet

Kushal jangra — Fri, 25 Jul 2025 18:08:58 +0000

Day -9 Striver SDE series

Kushal jangra — Tue, 22 Jul 2025 18:07:59 +0000

Striver Sheet

React Progress till now..

Kushal jangra — Sun, 13 Jul 2025 19:29:53 +0000

🧠 Following the React Course on Udemy

React - The Complete Guide (incl. Redux)

GitHub Profile: Kushal Jangra

I've been diving deep into React through this course and building projects to solidify every major concept. Here's a look at what I've built so far 👇

🔹 React Concepts & Projects

1. Essentials – Components, JSX, Props, State

📌 Core building blocks of every React application.

function Player({ name, symbol, isActive }) {
  return (
    <li className={isActive ? 'active' : ''}>
      {name} ({symbol})
    </li>
  );
}

React is component-based, meaning the UI is split into reusable pieces. JSX allows HTML to be written inside JavaScript, and props let components receive data. State enables interactivity.

📂 Project: Tic-Tac-Toe Game

Repo: GitHub

Website: Live Demo

🧠 What I Learned:

Functional Components
Conditional Rendering
State Updates
Lifting State Up

Preview:

2. Investment Calculator – Handling User Input & State

Repo: GitHub

Website: Live Demo

🧠 Concepts Used:

Two-way binding
Controlled vs Uncontrolled Inputs
Dynamic rendering of result tables

const [enteredAmount, setEnteredAmount] = useState('');

<input 
  type="number" 
  value={enteredAmount}
  onChange={(event) => setEnteredAmount(event.target.value)}
/>

Fun Fact: React recalculates the entire virtual DOM on every render, but efficiently updates only what's changed.

Preview:

3. React Styling – Tailwind CSS, CSS Modules, Styled Components

Repo: GitHub

Website: Live Demo

🧠 Techniques Explored:

Scoped styles with CSS Modules
Utility-first approach with Tailwind
Dynamic theming with Styled Components

import styled from 'styled-components';

const Card = styled.div`
  padding: 1rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
`;

💡 Did you know? Styled Components uses tagged template literals to let you write actual CSS in your JavaScript.
*preview : *

4. Debugging React Apps

Tools Used:

React Developer Tools for Chrome
React Strict Mode

🧠 What I learned:

Debugging helps detect unnecessary renders and side-effect errors early in dev mode.

<React.StrictMode>
  <App />
</React.StrictMode>

5. Refs and Portals – Countdown App

Repo: GitHub

Website: Live Demo

🧠 Concepts:

Refs to access and manipulate DOM nodes
Portals to render components outside the root DOM tree

Snippet - use Ref to Focus Input:

const inputRef = useRef();

useEffect(() => {
  inputRef.current.focus();
}, []);

Snippet – ReactDOM.createPortal:

return ReactDOM.createPortal(
  <ModalOverlay>{children}</ModalOverlay>,
  document.getElementById('modal-root')
);

💡 Portals are great for modals, tooltips, and overlays.

*preview : *

6. Project Management App – Working with Forms and CRUD

Repo: GitHub

Website: Live Demo

🧠 Implemented:

Nested components
Task data handling
Real-world app structure with form validation

Snippet – Handling Form Submission:

function handleSubmit(event) {
  event.preventDefault();
  onAddTask(taskData);
}

*preview : *

7. Context API & useReducer – Shopping Cart

Repo: GitHub

Website: Live Demo

🧠 Key Concepts:

Avoided prop drilling using Context
Used useReducer for complex state logic

Snippet – useReducer Setup:

const cartReducer = (state, action) => {
  if (action.type === 'ADD_ITEM') {
    return { ...state, items: [...state.items, action.item] };
  }
  return state;
};

const [cartState, dispatchCartAction] = useReducer(cartReducer, initialCartState);

💡 useReducer is especially useful when you have interdependent state variables or multi-step state transitions.

Preview:

8. Side Effects & `useEffect` – Place Picker

Repo: GitHub

Website: Live Demo

🧠 Highlights:

Running code after component mount
Managing cleanup functions
Working with maps or external APIs

Snippet – useEffect:

useEffect(() => {
  const storedPlaces = JSON.parse(localStorage.getItem('places'));
  setPlaces(storedPlaces || []);
}, []);

Preview:

9. Quiz App – Personal Project

Repo: GitHub

Website: Live Demo

🧠 Skills Practiced:

Component-driven architecture
Local state and score logic
Dynamic rendering of questions

Snippet – Dynamic Rendering of Questions:

{questions.map((q, index) => (
  <Question key={index} data={q} onAnswer={handleAnswer} />
))}

Preview:

10. React Behind the Scenes

Explored:

Reconciliation
Virtual DOM diffing
Component lifecycle

💡 React uses a concept called the fiber architecture for faster rendering and concurrency support.

11. Sending HTTP Requests – Backend-Connected Place Picker

Updated Place Picker to connect with a basic backend using fetch() to GET and POST data.

🧠 Topics:

Side effects + async/await
JSON serialization
Error handling with .catch() and UI fallbacks

Snippet – Fetch with useEffect:

useEffect(() => {
  async function fetchPlaces() {
    const response = await fetch('http://localhost:3000/places');
    const data = await response.json();
    setPlaces(data.places);
  }
  fetchPlaces();
}, []);

DEV Community: Kushal jangra

🚀 React.js UI Development: 8 Different Ways to Do the Same Thing

Day 13 strive sheet

Day 12 striver sheet

Day -9 Striver SDE series

React Progress till now..

🧠 Following the React Course on Udemy

🔹 React Concepts & Projects

1. Essentials – Components, JSX, Props, State

📂 Project: Tic-Tac-Toe Game

2. Investment Calculator – Handling User Input & State

3. React Styling – Tailwind CSS, CSS Modules, Styled Components

4. Debugging React Apps

5. Refs and Portals – Countdown App

6. Project Management App – Working with Forms and CRUD

7. Context API & useReducer – Shopping Cart

8. Side Effects & useEffect – Place Picker

9. Quiz App – Personal Project

10. React Behind the Scenes

11. Sending HTTP Requests – Backend-Connected Place Picker

8. Side Effects & `useEffect` – Place Picker