A response “my Struggle to learn react”

This is largely aimed at Brad Frost who recently posted about his difficulties learning React, but it might be useful for others. His post was helpfully broken down into points, and rather than reiterate them at length, I’ll just suggest you read the original post so you understand what i’m responding to.

1. i haven’t invested enough time on learning it.

It’s hard to suggest anything concrete above what Brad’s already done, other than maybe to take a week or two out from regular commitments to really dive into trying to build something. Don’t try to learn Redux, CSS-in-JS, GraphQL or any other sibling technologies. Try to build something that reflects your interests, so if you’re into design systems, build a small suite of UI common components. Or reproduce something that already exists like TodoMVC.

2. react and es6 travel together

Largely true these days, but wasn’t always the case. Originally JSX (those offensive HTML-like angular brackets) was the only thing on top of old-school JavaScript that React devs needed to learn. At the time most JavaScript frameworks (React included) tended to invent their own mechanisms (like createClass) to make up for shortcomings in the language, but now the language provides a lot more for us. This is a double-edged sword, it means someone who already knows JavaScript theoretically needs to learn less to get up and running with React than they used to, but it means React is no longer responsible for teaching constructs that it used to provide for you.

For the most part, with the (arguably) exception of es6 classes, you don’t really need to know any modern JavaScript to use React, but your life will be easier if you do.

3. syntax & conventions + 4. getting lost in this-land.

These are more-or-less the same as the previous one — a lack of familiarity with JavaScript. Some people prefer template languages, but I fell out of love with them years ago and was waiting for something like React to come along. My reasoning is that I was fed up with learning yet-another-template-syntax every time I switched to a different CMS or backend framework. But if you’re not comfortable with programming, I get the appeal of template languages. As for `this`, it still confuses the fuck out of me sometimes. Luckily, good React code tends to shy away from use of the confusing parts of JavaScript, so i’d hazard a guess that if you’re seeing it a lot, you might be looking at poor examples. If you’re looking at a React component and this means anything other than the component instance itself, then something has usually gone wrong.

5. i haven’t found sample projects or tutorials that match how i tend to work.

This was the interesting one for me, because in theory React should be perfect for people who are heavily involved in design systems and pattern libraries. Ultimately it feels like the issue is coming at the examples with a different expectation of the maturity of the hypothetical projects.

When coming up with the visuals for a website or app, the early stages might involve exploring mood boards to establish an aesthetic goal, pre-wireframe UX, wireframes, a few high-fidelity mockups, animation concepts, and about a billion other types of design artefact. Any Sketch files are probably a mess of unnamed layers, no widespread use of symbols, and so on. In essence the design system has yet to emerge.

Programming follows a similar model. We’re essentially just cobbling things together as our understanding of the problem solidifies. An app codebase doesn’t start out as a cohesive system any more than the visuals do. It takes time for patterns to emerge, the process parallels between visuals and code are obvious but sadly have been overlooked for a long time.

When I look at things like this code snippet, I don’t see an example of what a travesty CSS-in-JS is, I just see some code that someone threw out, safe in the knowledge that if it ever became important, they’d improve on it. In programming there’s a lesson that takes a really long time to learn, which is that premature abstraction is significantly more costly than no abstraction. It means that as you get more experienced, you learn to embrace messy poorly-structured code, because you know that it just means haven’t worked out what the right patterns are yet.

React projects can and do coalesce around the same building blocks as pattern libraries do — in fact they probably use even lower-level blocks than you’re used to seeing that don’t have any visual representation in the system. The problem is, if you think exclusively in terms of a cohesive holistic system, you’re very unlikely to find an example of that in a sample project or tutorial. The simple reason being that “productionising” a sample project to this level is a huge amount of work, and it’s rarely the focus of a tutorial.

6. i’m less competent at js than html and css

It can be intimidating to pick up a new skill, even just a new programming language as an experienced programmer fills me with anxiety and usually leads to heavy procrastination. Fortunately, the majority of what you’ll end up doing with React isn’t computer science programming. You can superficially think of it as a template language, just one where you can introduce “real” programming if necessary without having to switch to a different way of working. The beauty of the component paradigm is that difficult code tends to be hidden inside components with simple APIs (if it’s not, it should be), which means it should be possible to understand how an app works with just basic knowledge of React and JavaScript. Codebases won’t always be in this state, especially in the early days of a project, but they to trend towards decent encapsulation. I avoid largely avoid libraries like Redux if possible, because they tend to raise the barrier for understanding the code.

Ultimately, because React is “just JavaScript”, a codebase has the potential to be hugely unapproachable based on the whims of whomever built it. But it can also result in beautifully understandable code if approached in a considered way. If it all seems overwhelming, try using it in the ways it was used when it was first released — for building standalone UI widgets on a page, rather than for building an entire website or application. I’ve built a few datepicker/calendar widgets in my time, and they’re a nice problem for introducing yourself to both JavaScript programming and the state aspect of React.