Live data from Hacker News

My struggle to learn React

bradfrost.com

201–210 of 218 posts

Re: My struggle to learn React

#201

I've been doing web development for over 15 years, and I've seen a lot of trendy web application / UI frameworks that are going to be the The Final Paradigm come and go. That experience has taught me an important lesson about trendy framework stuff: If it doesn't make sense to a lot of people after a lot of thought, and there's a lot of rationalization required to plug that gap, it's probably not working out very wel…

Angular/React/Vue is nothing more than template rendering, with built in data binding. It is a major leap in the way you write web UI, enabling true separation of view and business logic.

(ok, slight lie, there's tons of other junk inside those frameworks also, but just stay away from everything except the data binding and you'll be much happier.)

Re: My struggle to learn React

#202

I've been doing web development for over 15 years, and I've seen a lot of trendy web application / UI frameworks that are going to be the The Final Paradigm come and go. That experience has taught me an important lesson about trendy framework stuff: If it doesn't make sense to a lot of people after a lot of thought, and there's a lot of rationalization required to plug that gap, it's probably not working out very wel…

I haven't found a JavaScript framework that truly makes things easy. I've been a developer for a long time, going back even before the web itself, and a lot of the older technology was pretty easy in comparison to what we have today for web development. My impression of React is actually quite positive; it solves a real problem in a highly performant way and with a relatively good model. But it is still pretty low-le…

Try Vue.js then :)

Re: My struggle to learn React

#203
post #149

Earlier quoted context omitted.

> Say, if you keep you containers, reducers, and actions in their own directory trees. That layout is the biggest reason it took me so long to understand it when my team brought it in. It goes a bit against the spirit of Redux, but the tutorials really should pair up action and reducer in the same directory, then later explain why the other way is also useful. We currently do this: state/ |---some_piece_of_state/ | |…

Redux itself doesn't actually care how you organize your file structure (per the FAQ entry at https://redux.js.org/faq/code-structure ). For the size of the tutorials, it's probably simpler to use a "folder-by-type" structure. But yes, for real apps, I myself have settled on a "folder-by-feature" structure. Note that either approach is completely orthogonal to whether you have multiple reducers listening to the same…

I agree. When you learn React, small examples typically follow folder-by-type but, in larger apps, it becomes apparent this doesn't work.

If you take the recommended path, i.e add redux iff you need it, you've already settled away from folder-by-type. It's natural to organise by feature since you're generally doing it anyway by that point.

Instead of a rework, it might be easier to add a small page on folder structure.

Noticed you on Reactiflux too, hi!

Re: My struggle to learn React

#204

Earlier quoted context omitted.

I have a blog. It's a set of static pages, generated offline and served via Nginx. There's nothing dynamic there and the content is perfectly readable in lynx. Once in a blue moon, I want to add a screenshot or other image to a post. Such images are of various sizes, mostly larger than the (max)width of the content. I use CSS to scale them down to fit with the text, but sometimes images displayed like that are too ti…

No. For anyone else covering the same dilemma and doesn't care about transitions: https://codepen.io/gschier/pen/HCoqh Or, reduced further: CSS .lightbox { display: none; position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8); } .lightbox img { max-width: 90%; max-height: 80%; margin-top: 2%; } .lightbox:target { outline: none; display: block; } HTML…

Sweet! Thank you very much, I'll definitely check it out!

Re: My struggle to learn React

#205
post #19

Honestly I don't know how I learned React. It's not fun at all. Oh sure, the basics of React is not too hard. If you ignore all the outdated examples and code (using var, no JSX, overusing component lifecycle, not using functional components). But then learning Redux, React Router, React JSS, Reselect, Redux Thunk, Webpack, etc., is just terrible. Sure, there are tutorials for each individual library, or maybe even t…

So don't use Redux, React Router, and Thunks. I don't even know what React JSS is. Use create-react-app's tooling. Even Redux's author tells people Redux is overused. A pretty big percentage of the value of the flux pattern is just in having an event pubsub system, so if your application is so complicated that you really feel like you need to structure it, you can just use EventEmitter. I frankly don't understand the…

Good points. I enjoy VueJS and AngularJS, thought I wouldn't like JSX and React but React and React Native have surprised me. However, Redux looks overblown for most use-cases and takes all the fun out of it.

For some cases you can just do a singleton on your shared data component. So for handling a multi screen form it just looks like export const MultiFormState = new MultiFormData();

Then import {MultiFormState} of course... Very useful. Between that and EventEmitter as you noted you can avoid a lot of extra code in many applications and get your components working well without the bloat and mental overhead.

Re: My struggle to learn React

#206

Earlier quoted context omitted.

I mean this in a nice way, I'd really appreciate a gist showing how you get the core concept of react-router in 50 lines. It's in a project of mine now and maybe it shouldn't be.

Well, it really boils down to const path = findThePath(); class Router extends Component { render() { if (path === "/about") return else if (path.match(someRegex)) { const data = parseSomePath(path); return } else { return } } } Seems as though React Router has gotten a bit complex because it's abstracted away from the concept of a webpage, such that one can use it in the browser, or React Native (which can be a numb…

The absolute most important thing in ReactRouter does indeed boil down to what you said, no disagreement. But there are some niceties, if I'm not mistaken.

You want the things in your app that look like links to have some interesting behaviour. They should look like links, they should act like links when right-clicked.... but when left-clicked, they should not actually load the new page. Instead, they should update the History and also trigger the router to reconsider the routing. That's why ReactRouter includes Links and Redirects.

I suspect there's at least one other feature-of-some-utility in it that I can't think of right now. Hmn.

There's also some weird logic around multi-routing, which I suspect is a bug rather than a feature, but maybe there's a sweet use-case. And there's also some weird stuff about not propagating children, which seems like a bug not a feature, but the workaround is easy, and again maybe there's actually a good reason, I dunno.

Anyway, as with what you talked about, this isn't rocket science, you could do it yourself with some work. But if someone follows your advice and thinks that's the end of it, they'll eventually feel some minor pain points.

That said, I honestly can't be bothered to actually properly learn React Router. I think that some company, ideally one specializing in react training, should write better documentation for it.

Re: My struggle to learn React

#207
post #91
post #69

Earlier quoted context omitted.

Let me add a different point of view. The adoption of React in the world of ClojureScript was pretty much instantaneous and total. I don't think anybody writes ClojureScript webapps in any other way these days. But the way React is used is different: it's used as a smarter mapping from application state to DOM. Clojure and ClojureScript programmers already know how to manage state and limit its spread, React (plus th…

Do you have any links/resources for using React with ClojureScript?

One point about libraries: I would recommend starting up with Reagent, as it has a simple and fairly intuitive model, and then moving on to Rum, which allows you to do anything, while being small and elegant.

I do not recommend Om for starting.

Re: My struggle to learn React

#208
Use Vue and you can be happy. Use angular 4/5 and you can at-least be sane. Use React and then pull out your hair, lost in a sea of badly-matching libraries, versions and continuously outdated best-practices.

React is a nice engine. A modern web-app is a car. Personally, I prefer leaving to the framework designers the job of giving me a car. Yes, you have to like the car they give you, but at-least it will be standardised and well-tested.

Re: My struggle to learn React

#209
post #12

This is a fine article. But I just want to say, as an alternate data point, my experience has been exactly the opposite . I love React. React is the first front-end technology I have ever managed to get to stick. * ES6 is just a detail, I know. But for me, ES6 transforms Javascript from an idiosyncratic scripting language where I constantly have to look up the ordinary way to handle basic programming tasks into somet…

I similarly love plain React and ES6 as it reduces my cognitive load. create-react-app is fantastic as well.

What I do wonder about is inline styling in JSX that I encounter so much in React code.

It feels "wrong" to me as inline styling has been considered a "bad" thing forever.

Among React pros is inline styling not considered a code smell?

Shouldn't style live nicely in CSS files?

Re: My struggle to learn React

#210

Honestly I don't know how I learned React. It's not fun at all. Oh sure, the basics of React is not too hard. If you ignore all the outdated examples and code (using var, no JSX, overusing component lifecycle, not using functional components). But then learning Redux, React Router, React JSS, Reselect, Redux Thunk, Webpack, etc., is just terrible. Sure, there are tutorials for each individual library, or maybe even t…

I learned React before all these unnecessary addons and it was still borderline terrible. JSX and its school of thought is a horrible, horrible mistake and having to learn to use slightly-different names for everything (className vs class, etc) was infuriating. Still, everything one needed for an SPA was there. With thoughtful design one didn't need any of those addons. Then, suddenly, Flux comes out and it seems lik…

FTR changing class to className and for to htmlFor is not JSX, but React specifically. If you configure JSX to use a different hyperscript framework (Mithril is the one I use), then you can keep the standard HTML attributes.
Post reply on HN