Tyr Bujac

What 100 lines of React taught me

· 237 words

Last week I created this blog in pure HTML and CSS. After a JavaScript refresh this week, I moved focus to React. React is the most popular web framework, so I’m trying to spend time learning it properly.

React has more concepts upfront than I expected, so I’m working through them deliberately. I’m using SuperSimpleDev’s React course on YouTube. I’ve found that he’s really good at explaining web programming concepts, and have previously done his HTML/CSS and JavaScript courses.

After completing the first few sections I didn’t feel like I understood how to build a project in React. So I built a classic small website — a todo list. I’ve previously made this in HTML and JavaScript so I knew half the problem. I just needed to learn how to do it in React.

One thing clicked while building it.

Components are small reusable pieces of an interface. Think of them like Lego blocks — you build a block once, then reuse it anywhere. A button is a component. A list item is a component. Coming from HTML this felt natural. Building one and seeing it work across the app made the idea concrete in a way watching the course didn’t.

I managed to build the todo list in around 100 lines of code. The focus wasn’t on making it look beautiful, just simple and clean.

A simple React todo list with a text input, an add button, and a few list items.

I’ll keep working through the course and building bigger from here.

References