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.