Starting a new series, "30DaysOfReact" For the next 30 days, I'll share what I'm learning. Starting from the very basics, going all the way to all the fancy bells and whistles. Goes without saying but I'm super excited for this. lfg! 🤞

Days 14-16 of #30DaysOfReact Day 14: Error handling Loading states → Better UX patterns Days 15-16: React 19 → useActionState → less boilerplate → Server Components → zero bundle Biggest lesson: Debugging is 50% of dev work. Accept it. 💪 #100DaysOfCode #React #Tailwind

Day 29 of #30DaysofReact. Built a multi-page portfolio app with React Router v6. The thing that hit me: a normal website reloads on every link click. React Router watches the URL and swaps components instead. One HTML file. Zero reloads. #30DaysOfReact #ReactJS

Day 28 of #30DaysOfReact done with @Asabeneh . Built a Twitter clone with CRUD operations. Lesson: never mutate React state. .map() for updates. .filter() for deletes. That is the pattern behind every real app. God's Beloved | ott #reactjs #javascript

Day 27/30 React. Rebuilt my Day 6 hex color generator. Day 6: no hooks, no button, refresh browser for new colors. Day 27: useState useRef, one click generates 27 fresh colors. useRef rule: User sees it? useState. You need it behind the scenes? useRef. #30DaysOfReact #ReactJS

Day 15 of #30DaysOfReact with @Asabeneh Learnt Thirs-party packages. Wrote correct code today. Still got an error. 400 = server rejected your request. Not a network failure. #JavaScript #React #LearningInPublic #WebDev

Day 14 of #30DaysOfReact React components have a lifecycle. componentDidMount = start your timers, fetch your data componentWillUnmount = clean up or leak memory I built a timer with setInterval today. When I toggled it off, the console.log inside componentWillUnmount fired.

Day 8 of #30DaysOfReact (continued). Built a Random Country Selector using React state. What clicked today: - State can hold objects, not just booleans - No .map() needed when displaying one item - CSS animations can retrigger using React's key prop #ReactJS #JavaScript #WebDev

Still on Day 5 of #30DaysOfReact. Built a random hex color palette where each bar generates its own color and displays its own hex code. The lesson: data belongs to one owner. Generate it in App. Pass it down. Components only display what they receive. #ReactJS #Javascript

Day 4 of #30DaysOfReact done. Built a User Card with functional components in React. Key shift today: stop writing JSX variables, start writing components. Same JSX, wrapped in a function. That's it. That's the whole upgrade. {variables} → <Components /> #ReactJS #JavaScript

day 1 of learning react #30daysofreact if i slap you!😂

Day 4 of 30DaysOfReact ⚛ You can use standard JS array methods like map() to turn data into components, and filter() to narrow down what you render. Simple, but powerful. Today's big takeaway in studying for me was keys. React needs a stable, unique key for each item in a list so it can correctly handle updates like reordering, inserting, or deleting items. Without good keys, React can’t reliably tell what changed. What I learned about keys: - Use IDs from your data whenever possible (especially from a database) - For local data, generate IDs once (e.g. crypto.randomUUID()), not during render - Keys must be unique among siblings - Keys should never change In short: 👉 map() renders 👉 filter() selects 👉 good keys keep React efficient and predictable Small detail, big difference.

💬 Day 21 of 30 React Projects — Chat UI If your app feels alive, people stay. Messaging apps don’t win because of magic — they win because of clean UI, instant feedback, and smooth state updates. Today’s project breaks that down and shows how to build it yourself in React. What you’ll build: • A modern chat layout with message bubbles • Left/right alignment based on sender • Timestamps & avatars • Instant message rendering • Auto-scroll to the latest message You’ll learn conditional rendering, list rendering, and UI state flow — the same patterns used in real messaging apps. By the end, your UI feels smooth, modern, and real. And later? Plug it into Firebase, WebSockets, or Supabase to make it fully live. 👉 Day 22 tomorrow: We’re building a Kanban Board (Trello / Notion-style productivity). Want the GitHub repo or tutorial links? Comment “Day 21” and I’ll send them. #ReactJS #ChatUI #FrontendProjects #BuildInPublic #WebDevelopment #30DaysOfReact

Day 3 of 30DaysOfReact ⚛ Conditional rendering is one of the core tools for keeping React components predictable and readable. The goal is simple: model UI branching as close to plain JavaScript as possible, then pick the pattern that best matches the complexity. - Use an early if return when a branch changes the whole output, or when it makes the happy path clearer - Use a ternary for small, inline variations in markup or text where both branches are simple - Use && when you want to render something or nothing, but keep the left side explicitly boolean to avoid 0 accidentally rendering - If JSX starts getting noisy, assign to a variable with let and build up itemContent step by step Prefer readability over cleverness, especially once conditions start nesting or combining.

Day 2 of 30DaysOfReact ⚛ Today I read "Passing Props to a Component" in the React documentation. Props let parent components pass data to child components, similar to HTML attributes. In the child component, read props using destructuring, for example function Avatar({ person, size }) {}. You can set default values in the function parameters, for example { size = 100 }. This only applies when the prop is missing or undefined, not when it is null or 0. You can forward props using the spread syntax, for example <Avatar {...props} />, but it is best used sparingly. Nesting JSX passes content through the children prop, for example <Card><Avatar /></Card>. Props are immutable snapshots, so you cannot change them directly. If you need interactivity, use state.

Day 1 of 30DaysOfReact ⚛ I decided to study and revise the React documentation (from an experienced dev's point of view, staying sharp). For those that don't work with or know what React is, it is a JavaScript library created and maintained by engineers from Facebook for building user interfaces by composing small, reusable pieces called components. It's the underlying tech behind Facebook and Instagram, and X/Twitter. Today’s React revision notes: • Components are the core unit: reusable UI that keeps markup rendering logic together • Function components need a capital letter and must return JSX • File organisation: split components as they grow; be intentional about exports 1 default export per file, many named exports, imports must match • JSX rules worth rechecking: -- single root element -- close every tag, including self-closing like <img /> -- attributes are mostly camelCase (className, strokeWidth) • Curly braces refresher: -- use {} for JS expressions in text and attribute values after = -- quoted attributes are strings -- {{}} is just an object literal inside JSX, not special syntax Since I am a professional who uses React all the time, I thought it would be great to fill any gaps, and really double down on my knowledge. Follow along if you're interested, and reach out / connect if you want to chat. 😀

Whoa! Finally I’m halfway through this. I did #30DaysOfJs , #30DaysOfReact and #20DaysOfFigma, the feeling of actually completing the different challenges shows I can commit to sth and succeed so I decided to try #100DaysOfWeb3 and it’s been going well.

Day 1 of #30DaysOfReact You're sitting in a React interview and the interviewer asks: "What is Reconciliation?"🤔 Here's what you should answer👇

Day 1 of #30DaysOfReact You're sitting in a React interview and the interviewer asks: "What is Virtual DOM?"🤔 Here's what you should answer👇

What's next? Thinking....30DaysOfReact