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
3. syntax & conventions + 4. getting lost in
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