React
My CSS experiment went very well. New experiment time!
This time I’m gonna learn react. I bought Josh’s react course a long time ago but never bothered doing it. I’ve worked on a lot of production react codebases but I’ve always been the backend guy. So I kinda know the basics but its very surface level knowledge. Also this was during a time where hooks were not a thing yet.
My opinion of react and its ecosystem is honestly not too great. Constantly deprecated libraries and typically badly written codebases. But I’m very excited to see how pros use it because they clearly like it. Time to fix my skill issues!
1 hour a day. No more, no less.
Day 1, 16-06-2025
23% through module 1: react fundamentals. Learnt about how react functions like createElement and render work. Started learning about JSX, expressions in JSX and its differences from html. I knew most of these things already but I did learn some new stuff. eg. how aria attributes and data attributes keep their dashes and don’t need to use camelCase. Did a few exercises related to these.
Day 2, 17-06-2025
37% through module 1. Learnt about whitespace gotchas in JSX and the differences between JSX and other templating languages. Did a lot of exercises related to JSX. Started the section on components.
Day 3, 18-06-2025
57% through module 1. Learnt about simple react components: normal props and the children prop. Did a bunch of exercises related to them. Learnt about why components begin with a capital letter. Learnt about typical react application structure. Also learnt about why fragments exists. I like how the course makes you think in terms of normal React.createElement calls to understand why things like fragments are needed. Also did a few JS refresher lessons on topics like object destructuring and nullish coalescing. I wasnt aware of the ?? operator in JS.
Day 4, 19-06-2025
83% through module 1. Learnt about iteration in react and why the key property is important. Learnt about conditional rendering and its various methods like ternary. All things I knew but was useful as a refresher. Did a lot of exercises.
Day 5, 20-06-2025
Finished module 1. A small lesson about a range utility, more exercises and then a lesson on styling in react. The lesson explored CSS modules. I liked styled components introduced in the CSS course much better but its deprecated now so might as well learn CSS modules instead. Did a few exercises related to that. Also went through a lesson on bundlers like webpack, why its needed and a high level idea on how it works. Quite useful.
Day 6, 21-06-2025
22% through module 2: working with state. Learnt about using event handlers in react like onClick. Did a few exercises related to it. And started the lesson on useState. Was interesting to learn when to pass in a value to useState vs a function.
Day 7, 22-06-2025
43% through module 2. Learnt about the mount -> trigger -> render -> commit loop. Learnt about how state updates in react are async and how they are batched. Did more exercises. Learnt about why react does things differently from something like svelte.
Day 8, 23-06-2025
61% through module 2. Learnt about forms in react. Kinda complex tbh but I understand it pretty well now. Learnt about how 2-way binding in react forms are done. eg. using react state, onChange and the value attribute on an input element. Learnt about synthetic events and how it differs from native events. Learnt about the difference between controlled and uncontrolled inputs. And how setting the value of an input to undefined initially can make it go from uncontrolled to controlled when the value is eventually updated to say something like 1. Learnt how form submits can be done on react. Learnt how all this works on different kinds of form elements like textarea, radio, checkboxes, selects, ranges, etc and the subtle differences in the attributes that need to be used. Finally did a lot of exercises related to these concepts.
Day 9, 24-06-2025
78% through module 2. Learnt about the difference between prop and state. Learnt about how complex state should be mutated in react. And why react state changes have to be immutable. Did some exercises.
Day 10, 25-06-2025
96% through module 2. Learnt about how you can dynamically create keys for data in react and some gotchas associated with it. It was very useful to see examples of bugs that arise from doing keys incorrectly. Learnt about when and how to lift state up in react. Did exercises which drill in these concepts.
Day 11, 26-06-2025
Completed module 2. Learnt how react manages component instances and how unmounting a component destroys its state. Read about other state management tools like Redux and when to use them. There was a really useful cheatsheet lesson which laid out all the different input types and how to use them with react. Next is working on the first project in this course: a wordle like clone. Read through the actual project README and set everything up. Will be working on the project tomorrow.
Day 12, 27-06-2025
Started working on the wordle project. There are 5 sub-tasks in the project + some stretch goals. Managed to do the first 4 sub-tasks today. Quite easy stuff tbh. Just needed to wire up some inputs and manipulate some react state. But good practice.
Day 13, 28-06-2025
Finished the world project. Wasn’t too hard. All stuff I was familiar with. 17% through module 3: hooks! This is the module I’ve been looking forward to because hooks confuse the heck out of me. Learnt about the useId hook and when to use it. Learnt the basic rules of using hooks: they have to be used within a react component and they have to be called at the top level of the component. Went deeper into why these rules exist. Did a bunch of exercises. Also went through a lesson on immutability.
Day 14, 29-06-2025
23% through module 3. Learnt about useRef which is something I’ve always been confused about. Turns out it isnt that complex. Its just a way to get a reference to something typically DOM nodes and do stuff to it. eg. say we want to draw something on a html canvas element on clicking a button. The buttons onClick handler needs a reference to the canvas element so that it can call various functions on it and draw stuff. Did exercises using these concepts.
Day 15, 30-06-2025
33% through module 3. Started learning about useEffect. Did a couple of exercises which helped drive home the concept. But the explanation of the dependency array still confuses me. From what I understand its just an array of state items which when changed triggers the effect function to run. But the course explanation talks about stale values which doesnt make sense to me. Maybe I’m just misunderstanding something and its addressed better later.
Day 16, 01-07-2025
47% through module 3. Continued the lessons on useEffect. Learnt how to make sure an effect only runs on mount. And how to cleanup an effect when the component is unmounted or the effect runs again. There were a lot of exercises done as part of these lessons which demonstrated why these things matter. eg. adding DOM event listeners on mount, cleaning them up later, how effects are rerun depending on the dependency array, etc. Was a bit hard to grasp but today cleared up a lot of past confusion I had wrt useEffect.
Day 17, 02-07-2025
60% through module 3. Finished the lessons on useEffect. Learnt about stale values in useEffect hooks and how to handle them. Learnt about the state-setter callback method. Did a bunch of exercises fixing bugs caused by stale values. Finally learnt about react strict mode and how it can help surface these issues in dev. Honestly a lot more complicated than I thought. React has so many gotchas you need to remember.
Day 18, 03-07-2025
67% through module 3. Learnt about writing custom hooks today. Did exercises practicing this. Pretty cool ngl.
Day 19, 04-07-2025
Learnt about data fetching in react today. Learnt the right way to fetch on event, on mount, keep track of stuff like error/loading states, etc. Learnt about the SWR library and how it helps you achieve the same thing better. Did exercises for all these concepts. Finally learnt about why async functions arent allowed by react in useEffect and how to make them work.
Day 20, 05-07-2025
Finished the module on hooks. Learnt about memoization today. Learnt more deeply about when react rerenders a component. Learnt about writing pure components using React.memo. Learnt about useMemo and useCallback, why and when to use them. Did a lot of exercises fixing issues using these techniques. Learnt how you can architecture your way out of needing these features often. I understand why these tools exist but my god is react complex. There is a staggering amount of footguns. Feels very good to finally understand a lot of how it works.
Day 21, 06-07-2025
17% through module 4: component API design. Learnt about how to think about designing components. I believe the important lesson was to think in terms of composability: build more application specific components from more low level components. So like a spectrum of components. Hard to explain here. But went through a couple of good examples in the modules + did a bunch of exercises where you refactored existing components using these techniques. Nice to see how an expert goes about solving these problems. Also learnt about the existence of component libraries like material ui and why things like that might not be something you should use.
Day 22, 07-07-2025
35% through module 4. Learnt about prop delegation. Pretty simple stuff especially using the JS spread syntax. Learnt about conflicts, delegating styles and ways to think about delegation when designing components. Did some exercises. There was also a lesson on forwarding refs in react 18 and earlier but I just skimmed it because I dont work with those versions of react anymore.
Day 23, 08-07-2025
57% through module 4. Learnt about how to do polymorphism in react. And the general practice of using the as prop for such scenarios. Learnt how compound components work(stuff like <ParentElement.ChildElement />). Learnt how you can just pass in JSX as props. And how you can pass in a component as props and render it later. Did lots of exercises for all these concepts. Fundamentally all these ideas were taught so you can design components thinking about both producers and consumers of the component.
Day 24, 09-07-2025
78% through module 4. Learnt about react context today. Learnt about how it can be used like global state, how it can be used to mitigate too much prop drilling, etc. Learnt the idea of context provider components and the performance implications of using context. eg. how it can mess with pure components. Also learnt when you need to memoize values passed into a context. I get the idea but my god is react complex. It is so easy to introduce re-renders and cause perf issues.
Day 25, 10-07-2025
Completed module 4. Long day today. Learnt about building modals and the complexity involved especially when it comes to accessibility. A lot of this was actually covered in the CSS course. Did some exercises building some stuff like a hamburger nav bar which has behaviour similar to a modal. Learnt about unstyled component libraries like reach ui and radix which give us unstyled components with all the usability and accessibility concerns taken care of. Did a bunch of exercises which involved using radix and headless ui to build components like tooltips, accordions and modals. Very very useful stuff. I’m really glad I learnt about unstyled component libraries!
Day 26, 11-07-2025
Did the toast project today. There are 6 sub-tasks in the project. Completed all of them today! Was very good practice of concepts learnt in the course so far. Included working with managed inputs, forms, hooks, event listeners, component design, memoization and context.
Day 27, 12-07-2025
17% through module 5: happy practices. Learnt about how you can leverage the key prop to rerender the same element. This can be useful in scenarios like restarting a css animation of the element. Also went through a lesson talking about how react uses JSX representations of a component as just a blueprint of what to render finally. eg. const el = <SomeComponent />; return (<>{el}{el}</>); is actually rendering two different instances of the component and not the same component instance rendered twice with shared state.
Day 28, 13-07-2025
29% through module 5. Learnt about how minimising the number or state variables and instead deriving state from existing state variables is a better idea in many scenarios. Did a few exercises building on this idea.
Day 29, 14-07-2025
46% through module 5. Learnt about more general design decisions like lifting state up and always trying to have a single source of truth. Did a few exercises illustrating the point.
Day 30, 15-07-2025
67% through module 5. Learnt about principle of least privilege: basically dont pass in more power to the component that needed. Learnt about useReducer. I’ve worked with redux many many years ago so was surprised to see the same idea of reducers and dispatchers as part of react now. I’m not a super huge fan but I can see the benefits in large components with a lot of complex state transitions scattered around. Did a lot of exercises practicing it.
Day 31, 16-07-2025
83% through module 5. Learnt about immer today. Not sure if I would use it unless the state is complex. Did a lot of exercises to understand the api. There was one using both useReducer and immer and I just felt like the code got too busy.
Day 32, 17-07-2025
Finished module 5. Learnt about portals which was very interesting. The reason for needing portals was kinda covered in the CSS course already. But it was interesting to learn how to achieve it using the createPortal function from react. Did some exercises using it. There was a lesson walking through some less obvious quirks of using refs. Learnt about error boundaries in react which seems pretty useful.