My struggle to learn React

http://bradfrost.com/blog/post/my-struggle-to-learn-react/

by bpierre • 8 years ago

230 210 8 years ago

First I love the design of this website. I haven't seen a blog that was so simple and easy to read (hacker news style)... ALSO be this pretty.

Also I'm curious what podcasts you were listening to? Has anyone picked up a new language from listening to a podcast. I can't imagine getting much out of it without the visuals to go with it.

leetrout• 8 years ago

I'm surprised the tooling isn't mentioned more...

create-react-app is awesome and huge time saver but as soon as you have to step outside of that realm there are so many dependencies and other tools to get the sausage made that it's daunting for new-comers.

It's not at all fair to compare JS and Go BUT that is the one part of Go I really, really love- `go fmt` is built in and most of the tooling Just Works™ with minimal config (e.g. gometalinter). I find myself stuck when figuring out where the next piece of the JS puzzle should go in my local dev at times and how to make some other things production ready. But we're in a much better place now than we have been!

rhizome• 8 years ago

I'm surprised the tooling isn't mentioned more...

To be fair, this reads to me more as a midstream reflection on the learning curve, not supplying any kind of solution for any of them.

paradite• 8 years ago

The equivalence of go fmt in React/JS would be prettier. It parses JS/JSX into AST and outputs them out using pre-defined formatting.

thatswrong0• 8 years ago

And prettier is much much better than Go fmt because it breaks lines for you

quantumleap22• 8 years ago

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

This is why a lot of front end folks should look at an alternative like intercooler:

http://intercoolerjs.org

It is far less violent to deal with, with a much lower barrier to entry and satisfies most needs of most web apps.

rhapsodic3• 8 years ago

I don't get what the benefit of using React is, aside from having it on my resume. A virtual DOM? What does that get me? It renders faster? Rendering speed is not a problem my CRUD screens have. Etc., etc.

Perhaps some UIs are so complex and dynamic that they're easier to build and maintain using React. I'm not saying other people shouldn't use React, but I'm fairly certain it wouldn't give me enough payback to justify the investment it requires.

hamandcheese• 8 years ago

Even if you don’t need it for its speed, it’s a fine choice if only to use JSX for your templating.

Aside from that, it and a handful of other technologies (webpack, maybe redux) seem to be coming out ahead as industry standard for SPAs. So yes, learn it “for your resume”, or as I like to put it, “staying employable”.

Edit: this is assuming you already have a SPA based CRUD app. If you are rendering server side then by all means keep doing that.

camdenreslink• 8 years ago

Its top down `(props) => rendered view` paradigm is a breath of fresh air if you've ever spent a significant amount of time in an Angular 1.x application with a complicated web of watchers and scope sharing all over the place.

tenaciousDaniel• 8 years ago

I'm currently still on Angular 1 at work. We migrated to 1.6, where they introduced Angular.component(). It's actually very nice, since it allows for explicit I/O and enforces isolate scopes. It's actually made Angular 1 enjoyable for me.

diggan2• 8 years ago

Not sure what you're trying to say here. Sounds like you don't need React, and that's perfectly fine. I've had applications like that as well. React becomes useful when you have really complex and dynamic websites, not when you're building basic CRUD todo applications.

rhapsodic3• 8 years ago

React becomes useful when you have really complex and dynamic websites, not when you're building basic CRUD todo applications

I realize you're just trying to be dismissive, but in point of fact, my CRUD applications are far more complex than basic todo applications.

ben5093• 8 years ago

I don't get what the benefit of using React is

It's frontend technology that is robust enough to deliver Facebook. If you haven't worked on or aren't working on a complex UI with a team of developers, you might not appreciate how incredibly solid React is. This isn't something that can be explained well through anecdotes, but this comment is getting at it:

Its top down `(props) => rendered view` paradigm is a breath of fresh air if you've ever spent a significant amount of time in an Angular 1.x application with a complicated web of watchers and scope sharing all over the place.

The complicated web issue isn't peculiar to Angular. Many UI frameworks are modeled in such a way that they become a rats' nest of objects, events, etc. all firing back and forth. Using React with good practices enable an overall structure that mitigates that tremendously.

olavgg• 8 years ago

Actually, I find the DOM surprisingly structured for reading and manipulation. This button have one or more events? No problem! Want to see the code in that event, no problem. The DOM is the truth, and you are free to read, understand and modify it as you like.

What is a problem though, is that there is no consensus in the team about how the code should be structured. So everyone creates their own mess.

Oh state management? There is something called observer pattern for that.

pests• 8 years ago

The virtual DOM is an implementation detail and is codified as separate packages react and react-dom.

React gets you a consistent UI paradigm (state->ui) that scales well as your app gets more complex or as more members are added to your team.

jwr2• 8 years ago

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 the usually tiny adapter libs) was just a way to efficiently produce DOM renderings of that state.

It fits like a glove. And while it's not all roses, there are fewer friction points it seems than in JavaScript (but then I think JavaScript programmers don't have it easy anyway). Plus, because of the nature of ClojureScript, most articles I read about optimizing React performance do not apply to me, because all the hard work has already been done for me (for example, immutable data structures mean that you can efficiently prevent re-rendering if data hasn't changed).

Anyway, to sum this up with an example that I'm basing my opinion on: PartsBox (https://partsbox.io/) is something I wrote, using React.

pknopf4• 8 years ago

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

bitL2• 8 years ago

But you can display likes and notifications realtime on top of your screen with no effort! Can't you see the immediate benefit? /s

halayli• 8 years ago

More accurate to say 'My struggle to learn ES6'. My newcomers confuse what's ES6 syntax vs React specific.

jbob20002• 8 years ago

He didn't even get to the part that I find confusing; the naming of things. componentDidMount? componentWillMount? Wtf is mounting? This isn't a goddamn harddrive. Props? Do you mean properties? or arguments? Wtf is a prop? Reconciliation? Portals? The fuck?

And then, to top it all off, you can't just use React, you need to pair it with a set of other libraries, each with their own set of ridiculous jargon and paradigms.

I honestly think a bunch of very talented Facebook devs got bored and decided to make something complex just so they could keep themselves entertained. And then other developers followed suit because it has cool words that make you sound important and inflate your ego, even though it's doing the same shit the web has been doing for 30 years.

watty• 8 years ago

If you think React is complicated stay far far away from Angular.

jbob20002• 8 years ago

Ha! I'm a full time Angular dev. It's full of the same kind of bullshit, but for some reason, I found it easier to "get".

chrisco2552• 8 years ago

Nah, it solved huge problems in UI for complex projects. One-way data flow, functional component abstraction, virtual DOM, simple & minimal API (11 methods). It encourages componentization in a way that no other framework quite does as nicely. Because the components are one-way, it's trivial to break up a component that has gotten "too big". I mean, a simple react component is:

const HelloPerson = ({ person }) => <div>Hello, {person}</div>;

ReactDOM.render(<HelloPerson person="ChrisCo" />, document.getElementById("root"));

That's elegant as fuck.

hardwaregeek• 8 years ago

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 two or three of the libraries at once. But combining all of them and making sure that it's not a total mess of code is like trying to play QWOP with your code. Now that I have everything compartmentalized and understood, it's pretty easy. But getting there is a long long journey.

I've played around with an idea for a tutorial on modern web development that starts with just basic JS DOM fiddling, then introduces various features and techniques as they're needed. So you'd start with just using old school document selectors. But then, as all the getElementByClassName calls become annoying, maybe you'd introduce transpilation, so that you can querySelector with a map/filter. Then, as the updating starts to get hairy, you could introduce a library like React. As state becomes an issue, Redux. But the point would be to start with the basics and build up an understanding of why we need these libraries. And what problems they solve and what problems they don't solve. But of course, the moment anybody writes this tutorial, half of it will become outdated. Ah well.

tptacek7• 8 years ago

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 popularity of React Router. The core thing React Router accomplishes can be done in ~50 lines of code including the switch statement for "routes". If you like and grok React Router, use it. But I don't think it's a good idea to push through your resistance to it.

gorpomon2• 8 years ago

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.

icc97• 8 years ago

Even Redux's author tells people Redux is overused.

I believe this is the post [0] in question.

[0] https://medium.com/@dan_abramov/you-might-not-need-redux-be4...

_hardwaregeek3• 8 years ago

You're not wrong for beginners. They shouldn't use all or any of these tools starting out. But when you reach the point where you understand React and you start to reach the limits of React's features, i.e. inline styles isn't cutting it anymore, setState is growing too big and too complex, etc., that's when it starts to get hairy. Because continuing down the path of pure React is painful, but learning all these damn libraries is also painful. That's where a lot of people get lost imo.

Not to mention the times where the codebase predates you. My first experience with React was on a codebase that was pretty horribly managed. Basically a combination of magpie developers and a total lack of understanding of React patterns. When the developers are finding and trying to integrate the next new shiny lib every other week, it becomes a nightmare for any new developers.

rmrfrmrf4• 8 years ago

The core thing React Router accomplishes can be done in ~50 lines of code including the switch statement for "routes".

This is a pretty common theme for me when considering any react-* library, and I think it says a lot about how nicely React lets you abstract away behavior.

As for Redux, I feel like the payoff has been worth it, especially when adding in the benefits of tooling and middleware. When I learned React for the second time, I did it with Redux out of the gate, and while it did take a while to ramp up, the upside was I was able to see immediately where bugs were occurring (React + Redux DevTools) and didn't have to grok the component lifecycle before getting some data on the page.

exclusiv• 8 years ago

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.

j-b• 8 years ago

Any pointers for someone in my position?

I have a million LOC windows forms system that going to be ported to the web. I've reviewed React, Angular, Vue, etc. As a beginner, Vue seems the best to me, however, all of the experienced web developers I talk to recommend React. After reviewing the code and walking through tutorials it just seems like overkill and overly complex but I suppose I'm missing something. It's concerning because I need to have our team port a huge code base and am not sold on React but that's what we're starting with. The developers I talk to say Angular is too complicated and React has good component based features. Nobody has Vue experience. My gut tells me Vue would be better but if I can't find guys who actually use that and have React experience instead then it seems that's the direction to head.

forgot-my-pw• 8 years ago

Sometimes react ecosystem and all the dependencies feel way too much. Sometimes all I want is to use data bindings, and at those times I just ended up using Vue.

tptacek7• 8 years ago

None of these are React dependencies.

strkek• 8 years ago

Same here, but in my case when I need that I usually go with Mithril.js[1]. I found it by chance and instantly liked it. It's a shame that nobody seems to know it.

[1] https://mithril.js.org/

a_c• 8 years ago

In the pursuit of React, something is added everyday. In the pursuit of enlightenment, something need to be dropped everyday. [1]

In the react realm, every problem is solved by throwing another layer of complexity/abstraction/whatever you call it

[1] Adapted from https://www.goodreads.com/quotes/175803-in-the-pursuit-of-kn...

IloveHN84• 8 years ago

Like Java/Spring.

Why do not use a more simple approach, say jQuery?

chubasco2• 8 years ago

I recommend the e-book Fullstack React (https://www.fullstackreact.com/) (I have no relationship to these guys, other than being a customer).

I have had junior engineers read it in the past to get up-to-speed and it does a great job of teaching all of those technologies together in a way that makes sense and is easy to understand.

chubasco2• 8 years ago

Let me also add that it doesn't teach them all at once. It starts from first principles and adds on new libraries as the tutorial apps become more complex.

tootie3• 8 years ago

I found react to be extremely intuitive and easy to learn. Redux and react-redux are horribly non-intuitive. So much boilerplate and meaningless terminology and stringly-typed objects. I avoid it.

pknopf4• 8 years ago

Switching from Redux to Mobx dramatically decreased my mental load. It is much more straight forward.

mieseratte6• 8 years ago

React is just mapping data to XML, which may or may not end up as XML (React DOM vs. React Native). Throw in a component lifecycle, and you're good to go. Sure, it's not jQuery simple but for a modern SPA it's about as good as it gets. It allows you to just deal with things in terms of composed functions which is wicked elegant, and since you're almost surely thinking of your page and application hierarchically it maps to reality nice and clean.

Redux makes managing global / central state reasonable, and in conjunction with the `connect()` function allows you to A) pull in needed global state and B) dispatch data to be centrally processed such that your component gets to not give a shit. It'll just update as-needed. It's dumb.

Strings for types sucks (it's better with Flow, or Typescript I assume) but it is what it is... the immutability can also lead to some subtle bugs if you fuckup and mutate something, but overall I'd rather write a React app with Redux than without at this point just for ease of reasoning about the system as a whole.

If you've never dealt with this type of architecture, it can be strange at first but it makes managing state / data flow much easier.

[0] https://medium.com/@dan_abramov/smart-and-dumb-components-7c...

mephitix4• 8 years ago

> But the point would be to start with the basics and build up an understanding of why we need these libraries. And what problems they solve and what problems they don't solve.

This is exactly what the well-written official React docs do. It doesn't involve any CSS-in-JS, Redux, Thunking, Webpack, etc.

1) Start off with a basic app - build the Tic-Tac-Toe app through the official React docs

2) Build a simple React app with the official CRA (Create-React-App) tool

3) Build a more complex app

4) Keep building a more complex app, learn about routing, lifecycles, performance...

N) Look into Redux if you need it

---

Re. Redux:

The React docs have jumping off points throughout this process to understand why setState-based state management can get difficult in large applications (prop drilling) and the problems Redux solves. Look at this excellent doc on 'Lifting State Up' (https://reactjs.org/docs/lifting-state-up.html). This makes you go through the motions of setting up a component with setState, lifting state up, and experiencing prop drilling. Redux isn't even mentioned here.

Re. Thunking:

In the 'Basics' section of the Redux tutorial (https://redux.js.org/basics/actions), here's an excellent snippet: "Action creators can also be asynchronous and have side-effects. You can read about async actions in the advanced tutorial to learn how to handle AJAX responses and compose action creators into async control flow. Don't skip ahead to async actions until you've completed the basics tutorial, as it covers other important concepts that are prerequisite for the advanced tutorial and async actions."

Re. Reselect:

Again, in the Basics section, in "Usage with React" (https://redux.js.org/basics/usage-with-react): "These are the basics of the React Redux API, but there are a few shortcuts and power options so we encourage you to check out its documentation in detail. In case you are worried about mapStateToProps creating new objects too often, you might want to learn about computing derived data with reselect."

None of these 'power options' and extra tools are talked about in depth in the Basics sections of any of these docs. They are mentioned as jumping off points and the reader is warned not to dive into them early without continuing with the tutorials/docs. This seems to be exactly what you're looking for...

_hardwaregeek3• 8 years ago

Yeah, I guess I'm not giving the documentation enough credit here. The main issue I see is all the companies rewriting their applications in React. Because I don't think they see it as a complicated engineering decision with tradeoffs and potential issues. They see it as "we need x buzzword and y buzzword". I'd prefer that the documentation outright say "This is a BAD idea if you're just doing xyz" instead of "if you need, you can check out this". Because it's very easy for developers, especially magpie developers or younger developers to think "oh yeah, of course I need this. I need my app to be S C A L E Able". The idea behind the tutorial would be giving precise problems that are solved by the tools, while also demonstrating what can be accomplished without them.

Also, is it just me or is the tic tac toe tutorial really not useful? Sure, it's a good isolated example, but it's a really contrived one as well. Something like an address book or a blog would be a lot more fitting with people's usecases.

tomduncalf• 8 years ago

This makes me sad as I can’t help feeling that Redux being promoted (earlier on in React’s life certainly) by the community as the de-facto way to manage state has caused a huge amount of pain for newcomers.

This isn’t the fault of the Redux authors - it does what it does well, and they’ve always said it’s not intended to be used for everything - but I honestly feel (and have anecdotally observed a few times) that being introduced to the complexity of Redux completely ruins people’s first steps in React (the two are often seen as inextricably linked to newcomers).

Personally I feel the community should be pushing people much more towards lighter weight solutions such as component state and MobX for when the application grows.

I know Redux has theoretical advantages but in the real world I’ve always found it a large burden and would personally use MobX in preference every time (which isn’t to say MobX also doesn’t have its rough points, but it’s much more intuitive).

frandroid2• 8 years ago

So our React site is fairly static, but as it grew we had more and more state to manage across components, and more of it trickling down; in some cases state would come from fairly high up in the structure, and have to be ingested pretty far down the component chain.

So as I read the React docs, I discovered childContext, and I started using it. Some of my coworkers would stick to passing props along 2 or 3 or 4 layers down, because every time I'd point childContext to them, they'd point to the part in the docs where it says it's experimental tech and that it could be removed in the future. I'd point out that the React devs have a very sane code-breaking policy and we'd just cross that road when we'd get there. It's not like we're aggressively updating to the latest release anyway. Some other people would suggest using Redux, but would agree with me that we just didn't manage _that much_ state.

(We also have a React Native app, and as we manage more state in there, we did implement Redux, though it still bothers me as a tech.)

Anyway, fast forward to last month, where I read Abramov explain that Redux actually uses childContext!! So:

1) there's no way they'd just rip it out of React without warning,

2) if childContext works for you, don't worry about the complexity of Redux, just pass down state and a few state-modifying functions in childContext!

baddox• 8 years ago

I suppose the “early on in React’s life” part is relative. The era before Redux, though, was far worse. There were so many flux implementations with very different answers for even the most fundamental questions (like where to put data fetching and side effect code), and none of them developed a community large enough that these answers were sufficiently documented and discoverable.

Competition is good, obviously, and we certainly still have that, but I much prefer this era where there are a relatively small number of competitors in the space, each with (mostly) well-baked answers to common questions and mature and active communities.

godot• 8 years ago

I feel similar to both OP and you; especially when first learning React a year ago. I feel like the only real way to learn it is to get a job where you work with React full time, and after a few months you will finally get comfortable with it. (that's how I learned it) I was fortunate enough; when shutting down my startup a year ago and needing to land a new job, a team of coworkers I used to work with took me in without much of an interview, so I was hired into a React shop even with zero React experience. I can imagine the predicament when you have no React experience, and also can't get a React job to learn it.

spapas82• 8 years ago

I've written a react and a react-redux tutorial that, although are a little old, I believe that teach most important topics: https://spapas.github.io/2015/06/05/comprehensive-react-flux... and https://spapas.github.io/2016/03/02/react-redux-tutorial/

tomc1985• 8 years ago

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 like a few months later the whole scene says React+Flux is the only way to go. (I personally found Flux confusing as fuck, but I didn't give it more than 15 minutes) It amuses me to see some of these JavaScript proponents get so cocky over something that only lasts a couple of months.

brlewis• 8 years ago

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.

antoaravinth• 8 years ago

With react context in place now starting from 16.3, I guess we can start using them for app level storage rather going to tools like redux.

baby• 8 years ago

Note that I’ve felt the same way for a long time. I ended up giving up and checking Vue.js and it instantly clicked.

cncrnd2• 8 years ago

If the author sat down for an afternoon he could fix most of these struggles, in probably less time than was invested writing about them.

The thing about ES6, braces, promises, and anything else in programming is that you need a few core examples to wrap your head around and everything else is an application of that.

Beautiful website btw.

andrezsanchez• 8 years ago

I got the impression that he's spent a bit more than an afternoon.

retSava• 8 years ago

Every question is easy to answer once you know the answer, the trick is finding the answer. It's often harder to know what you don't know, than actually finding the answer.

cncrnd2• 8 years ago

I agree with this statement, but in this case the author lists concrete things he has difficulty with, like => and promises.

I am responding based on my experience doing some react/redux work coming from a non-JS background, but the author says he is a designer so maybe that's where the difficulty is coming from.

That's not to say there aren't hard parts, but those come farther down the line when you're trying to do something unconventional.

tptacek7• 8 years ago

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 something resembling a modern high-level language. To me, ES6 turns Javascript into Ruby. I don't love programming in Ruby, but I can do it quickly and without the language getting in my way.

* The basic idea behind React, that your UI rendering code is always working with a snapshot of the current state, and 95% of your job is just to take that state and re-render it wholesale, eliminates a huge amount of the cognitive load I experience trying to do front-end stuff. I allows me to stop thinking in state machines, and just write straight-line code. If you've been primarily a backend person and have always sort of hated doing front-end stuff, check out React and see whether it's just the programming model that's been bugging you.

* Unlike the author, I've always been more of a programming person than an HTML/CSS person; I would kind of rather eat a bug than fiddle with CSS. One thing that makes React so nice for me is that you can just buy an HTML template and gradually turn it into JSX to "animate" it into a UI. Another thing is that it so nicely decomposes into components that there are a bunch of high-quality UI component libraries to draw from.

I have a lot of the same problems with React that everyone else does:

* "This" and the JS class model still feel like own-goals and I'm regularly tripping over them. But I'm never stumped by them; the bugs are always pretty obvious and easily fixed.

* Perf has been an issue, particularly memory consumption. But to me, this just suggests that I'm actually productive in React, that I'm getting to the point where I'm comfortable enough belting out code that I'm generating perf problems to go fix. (This has come up on relatively complicated UI projects, like the debugger interface we did at Starfighter, which was a monstrosity).

* The tooling was a disaster before create-react-app. But now there's create-react-app, so the tooling isn't a problem.

* I still have no idea what the right way to test things is.

I'm not rebutting the article at all! Different people, different issues. I just thought, if that perspective was valuable, mine might be too.

enraged_camel2• 8 years ago

>* The tooling was a disaster before create-react-app. But now there's create-react-app, so the tooling isn't a problem.

But what happens when you inevitably need to step outside the boundaries set by create-react-app? From that perspective, it simply delays the problem, rather than solving it.

tptacek7• 8 years ago

I don't know, because haven't needed to step outside those boundaries. I'm sure it will be painful when that happens, but by that point, I'll have gotten so much done that I probably won't care too much.

I had a gulp build process I used before create-react-app; it was gross to get working, but then worked just fine. I could live without create-react-app, but why would I?

crooked-v• 8 years ago

My last and current job have both uses react-app-rewired to monkey-patch create-react-app.

sli3• 8 years ago

You can eject the app to exit CRA's umbrella. All of your configuration and code still works, you just also gain access to the project config and Webpack config that CRA formally dealt with for you.

A lot of the time, simply using react-app-rewired is sufficient in place of ejecting, especially if the only thing you need are some Webpack plugins.

mephitix4• 8 years ago

I guess it depends on how you learn. I personally used CRA in my learning process and it helped me get up to speed in understanding React fundamentals (reconciliation, lifecycles, state management..) Then I started going down into the stack and understanding Webpack, etc..

For me personally it would be exasperating to learn all of the stuff that CRA bootstraps before actually getting to learn React.

allover2• 8 years ago

But what happens when you inevitably need to step outside the boundaries set by create-react-app?

Been working on a real-world c-r-a based project for 8 months and this is yet to happen. And the upgrade process has been a dream (update 1 dependency), no breakages so far.

In fact I now regret my other attempts to go off the rails (adding Sass), it wasn't worth it.

pg_bot2• 8 years ago

Some unsolicited advice from someone who has also been down a similar path.

I normally suggest eschewing the javascript class model in favor of using stateless functional components.[0] I've found them simpler to understand and it cuts down on unnecessary typing. I almost never use 'this' in javascript, and instead have favored an OLOO[1] or pure functional style as it fits into a simpler mental model for how things are working.

I normally only test the actions that modify state in my javascript applications. I care that I'm correctly changing the state of my application, not what that state renders. (This is similar to rails apps not typically testing html output) I normally use mocha[2] for testing and if something goes wrong I can open up a normal chrome js debugger using the --inspect-brk flag when running via the cli.

You will eventually find yourself needing to support multiple routes in your react applications. Most people would recommend the "react-router" library, but I've found a lot more success with "redux-little-router"[3]

[0] https://reactjs.org/docs/components-and-props.html

[1] https://github.com/getify/You-Dont-Know-JS/blob/master/this%...

[2] https://mochajs.org/

[3] https://github.com/FormidableLabs/redux-little-router

allover2• 8 years ago

And I 100% disagree. If you're new to React I strongly recommend sticking with classes and embracing React's 'component' model which is one of its strengths and which Redux + trying to use only stateless functional components throws out with the bathwater.

ilikehurdles3• 8 years ago

I normally suggest eschewing the javascript class model in favor of using stateless functional components.

So I do this whenever possible, but the way this advice is worded (both here and often in the wild) makes it sound like you can just use them everywhere.

Most UIs have state. I can't imagine a UI that doesn't. Every third component or so I write I end up using classes for, so I've got a mix of classes and functional components throughout the codebase. Do you _never_ use classes? If so, what do you do instead? Otherwise if you're like me, you get to use functional components occasionally which is nice, but are nowhere near being able to get rid of the class syntax.

billdybas• 8 years ago

+1 for testing actions / reducers.

Snapshot testing probably makes sense if you're making a design system of component building blocks or a purpose-built re-usable component. Anything more and your tests will probably end up being brittle.

For routing, I usually recommend "connected-react-router." [1] Never heard of "redux-little-router" - will have to check it out!

[1] https://github.com/supasate/connected-react-router

svnsets2• 8 years ago

Same here. Learning React for me was pretty simple. I think many get confused as to what React is and what it isn't. Like many view or template libraries, a React "app" is really just a function that takes properties and outputs markup. In React's case, there's a little more behind-the-scenes magic as to when changes propagate to the DOM, but the concept is still very similar. React isn't MVC/MVVM/MV*/etc, it just manages the view layer. With React, you also get the ability to render server-side and target other platforms such as iOS, Android, etc.

Redux on the other hand was a little more confusing for me to learn (the concept makes complete sense, it's the implementation and debugging that gets confusing). The great thing about Redux is that you don't have to use it or learn it. The React ecosystem is pretty well decoupled so you can choose how you want to manage state and async tasks. That is it's biggest selling point for me personally.

My experience with front-end frameworks started with Backbone + a ton of jQuery to AngularJS to React (with many different state management libraries). I found that Backbone didn't really provide much on top of jQuery + lodash/underscore, but I liked that it didn't make too many decisions for you. Angular (v1) on the other hand, forces you into some unconventional patterns (ie: the whole service vs factory fiasco and it's own dependency management system). It's fine if you aren't using a separate dependency management library (or ESM), but if you are, you have to declare dependencies twice. Angular 2/4/5/whatever-arbitrary-number-they-are-on-now has been way more confusing for me to learn as they make you learn their own templating language for things like loops, control flow, etc and still have some weird patterns around dependency injection. JSX is a lot simpler if you know basic JS. React seems to have the least amount of boilerplate code as well especially if you make use of functional components.

svnsets2• 8 years ago

I still have no idea what the right way to test things is

At my company, we use cucumberjs (https://github.com/cucumber/cucumber-js) to write scenarios for basic front-end testing. I wouldn't go overboard and start writing test to measure padding or font sizes, but you can easily see isolated scenarios and write automated tests to simply verify that a react component actually put the right element in the dom or to check conditional class names.

We also unit test many of our Redux reducers which is pretty simple with any unit testing library. Just create an initial state and expected state, call the action creator, and deep compare the new state with the expected state.

sireat• 8 years ago

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?

matte_black2• 8 years ago

The people who will learn React the quickest are those who have been building applications on other platforms beyond the web.

quickthrower23• 8 years ago

I think it is worth learning Elm first because it many ways it is much simpler. No JS "this" issues to worry about. No props vs. state. It is very opinionated. But it is also virtual dom and "component based" so the paradigm is instilled in the brain to go across and learn React.

Disclosure: I learned some Haskell before Elm so I may be "immunized" against some of the struggle!

matte_black2• 8 years ago

I don’t know, I think it’s better to just dive straight into what you’re trying to learn, otherwise you’re basically procrastinating.

reaperducer• 8 years ago

Am I the only one who felt compelled to fill in all those bubbles with color on the web site?

Kaladin• 8 years ago

Haha. Naa. Same here. No wonder colouring books sells like crazy.

briantakita• 8 years ago

Svelte - https://svelte.technology/ has components written in HTML. It's compiled to vanilla javascript, which results with components that are faster, use less memory, & have a smaller payload.

Also, Svelte is easier to work with. A simpler API, Computed Properties, events. The Svelte Store is also nice. I'm forced to use React in a project, but I prefer to use the Svelte Store opposed to Redux or MobX.

enraged_camel2• 8 years ago

For me, the process of learning React has been terribly frustrating. The ecosystem moves too fast, and the various training materials out there become outdated very quickly. I was going through one of them and got stuck several times, and after spending several hours I found out that the function call covered in the course had been deprecated.

lrajlich• 8 years ago

The takeaway I got is that it seems like the React stack has worse or non-existent separation of concerns and thus it'll affect how your frontend engineers work, possibly to their detriment if they're not proficient in javascript.

_betty_• 8 years ago

As a proficient developer I find react to be one of the first languages where I can group concerns correctly.

HTML, js and CSS aren't separate concerns. Each component is a separate concern.

hajile• 8 years ago

"My Struggle to Learn JavaScript" would be a much more accurate title.

TheAceOfHearts• 8 years ago

re: #5: At my previous job we wrote our own UI toolkit with React and css-modules. We had many dev-only views that we used to inspect and test our components. It worked great because it let you visualize all the states a component could have for a wide range of inputs, so you knew they were all being handled well. For example: If you get a long input prop do any of your styles break from visibility overflowing? If a nullable value is missing, are you styling it appropriately while showing a placeholder? Unfortunately it wasn't open source, but it's being done.

Ralfp• 8 years ago

Give React Storybook a look, its tool for easily building component previews for devs.

handbanana• 8 years ago

This is pretty cool. But I've seen it done at a handful of companies. Where they have component libraries written in house. All those companies never open sourced their work - and it seems to me that it's a lot of reinventing the wheel

at-fates-hands• 8 years ago

I guess this is part of the whole divergence of the JS community.

This is one of the questions I ask at every interview I do now when looking for a new gig:

"Do you prefer one JS framework does it all like AngularJS, or do you like to mix and match your JS libraries like taking ReactJS and combining it with say AmpersandJS, BackboneJS, etc?"

This is where we are. One group wants to use ReactJS and add complexity as they need it. Others just want a complete framework (however complex, and let's be honest, Angular is pretty complex!) out of the box. I've always been happy with full stack frameworks out of the box for several reasons, but it's what I prefer.

I'd be interested to know where all of this ends up in the next 18 months though.

daylightsavings• 8 years ago

I think this is the reason so many are picking up Vue rather than React or Angular these days. Vue offers the component approach and is generally fun to learn IMHO.

vanadium• 8 years ago

I can relate to Brad Frost's issues picking up React. Vue, on the other hand, took me a day to wrap myself around and pick up with some certainty.

keithnz2• 8 years ago

I have done both Vue and React projects. I like React philosophically. But my coworkers, who were keen to learn react, struggled conceptually and I ended up doing a lot of the React work. Then on another project we trialed Vue which worked out far simpler for people to learn and I also find I'm far quicker developing things using Vue. So while I'd tend to recommend Vue, I'd encourage people to trial both on something not too trivial before settling on either.

faitswulff• 8 years ago

I've been doing React Native development in my spare time, and I've found that React is...finicky. `class` this and `extend` that, and if you get it wrong, the whole thing screeches to a halt. There are a few other comments noting that it's mostly difficulties learning ES6 and I would actually agree - that doesn't mean React itself is any less difficult to learn, due to the fact that the entire ecosystem depends on all of these ES6 features.

I was discussing this with another developer who had the same sort of impression - it seems like it should be simple, conceptually, but there are a myriad of details to keep track of to keep the build system happy, to keep the components happy, to keep JSX happy. Compared to learning Vue, the whole process is much more difficult.

pixelperfect• 8 years ago

I've also struggled to learn React, but for me it's because I learned ClojureScript/Reagent/re-frame first. I get demotivated because I vastly prefer those tools, but unfortunately there are many more job opportunities for JS/React than CLJS.

Brendinooo• 8 years ago

The examples don't work inline anymore, but https://chibicode.com/react-js-introduction-for-people-who-k... was what made React click for me.

My approach to React was similar to Brad's, as I am far more proficient with HTML and CSS than JavaScript. I'd done plenty of wacky stuff in jQuery, and that tutorial demonstrated how React can iron out some of the problems that spaghetti jQuery can create.

I'll also add that part of the problem with wading into React is that, if you're a certain kind of frontend designer, you remember the browser wars, and you would often wait until tech was mature before you went out and used it in production. But React was adopted quickly and has changed quickly. React Native is even worse in that regard. So even if you learn how to do something a certain way, that knowledge could be obsolete in a year, or less.

tootie3• 8 years ago

I've been writing Java for 20 years and never for a moment had the least doubt about the value of 'this'. ES6 has been slowly morphing into Java yet it hasn't solved this basic issue very well.

arosier• 8 years ago

Why did you decide to learn React? Could you share some resources you used to learn it?

tootie3• 8 years ago

Just the Facebook docs really. That and sitting with experts.

gorpomon2• 8 years ago

At this point, the JS ecosystem with React is a bit too complicated for a hobbyist to learn quickly. I have friends spending months with just React, not including other libraries.

But React is a tool for building complicated UI's, and overwhelmingly complicated UI's are requirements for startups, corporations and organizations, not personal sites or small toys. So like many other technologies, this one is perhaps best learned on the job, and it doesn't need to be optimized for the hobbyist.

That being said, losing the hobbyist comes with serious costs to community and innovation, a fine balance needs to be found.

pknopf4• 8 years ago

Agreed. I am very familiar with most front-end stacks. I typically choose React for my projects, and I really love it. But when a beginner asks me "What is the best framework for me, having little knowledge of front-end dev/ecosystem?", I almost always just recommend Vue.js. I personally don't mind the setup of React, even for small projects, but I wouldn't wish that upon someone jumping into front-end dev for the first time.

kyledrake• 8 years ago

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 well.

As of now, I have still yet to see a JS framework that made any sense to me. They're all really weird to me and solving problems I've never had with UI development, or regressing previous best practices in ways I don't think make any sense.

I'd much rather just use template rendering than this stuff most of the time. At least with that, you're just using Real JavaScript (TM) and you don't have to learn some new special HTML attribute based language.

chrisco2552• 8 years ago

Honestly, something like React/Vue has got to be as close as it gets to "The Final Paradigm". At this point, it's been a long time since I've seen a new paradigm that does anything vastly different or more productive and simple than JSX + React/Vue lifecycle & state hooks. Most of the new UI libs that come out (Glimmer, Marko, etc) seem to be heavily influenced by React and don't offer a giant leap in how UI is done.

I think there's plenty of more opportunities in state management, CSS management, application structure, tooling, and making those more simple, but generally I think the view layer is more or less solved.

NeoBasilisk• 8 years ago

If you're still saying that in 4 years, then I'll believe you.

nostalgeek2• 8 years ago

It's funny to think retrospectively that something like Backbone.js absolutely did not solve view state management at all and people adopted it because it somehow looked like Rails with big models, Angular.js misunderstood the issue completely with factories everywhere instead of a single dataflow.

The new paradigm would be the browser handling all that and there is no need for frameworks anymore. We are not there yet given how poor web component support is : https://caniuse.com/#search=web%20component

keithnz2• 8 years ago

I don't think so, I'm thinking it's all about to change . why? WASM.

We now see languages targeting the browser, and the beginnings of front end frameworks being developed in traditionally backend languages. I think this is going to create quite a different landscape for the web world in the next 5 years. Different languages bring different approaches to problems.

wvenable• 8 years ago

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-level to me; even if you add in a dozen or so other libraries.

My needs are fairly different from Facebook or most startups -- I don't work on a single highly optimized application -- I build a new application every few months (and maintain all of the previous ones). The current set of JS frameworks don't do a lot to help me.

arbie• 8 years ago

I haven't found a JavaScript framework that truly makes things easy.

AngularJS 1.x + Angular-Material came close, but Google then released backwards-incompatible Angular 2.

_mrmnmly• 8 years ago

Try Vue.js then :)

westoncb• 8 years ago

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 well.

This makes me think of an interesting/bothersome phenomenon I've seen a lot in web development (it seems to be more present here than in other domains—but I won't pretend to have any profound objectivity on the subject). People speak confidently about rationales for architectural decisions—and at first it sounds coherent and persuasive (especially paired with their confidence), but if you start trying to test it, considering specific cases, or more generally just drilling into the specific meanings of the very abstract statements—then you are likely to discover that the supposed rationale is really a justification.

I'm guessing this comes about because decisions about technology often have to be made with time constraints, and the time required to really investigate the set of viable alternatives exceeds what's available. So you're left with a partially completed search process, where the engineer has told himself a story about why choice X was the best, based on promising looking aspects of the search so far completed.

At this point, you're sort of committed to the decision you made, so you have to continue justifying it to yourself and others; and since there isn't necessarily a valid justification, the one you employ has to succeed in part through its obfuscation and your rhetoric.

Vinnl• 8 years ago

web application / UI frameworks that are going to be the The Final Paradigm come

Are there any that would claim that? As far as the popular ones that have been there (which is really just JQuery and Angular, but could also encompass thins like Underscore, Knockout, etc.) go, I think most of them presented themselves as band-aids for limits in Javascript/DOM API's. I think React is that first one that gained widespread adoption that actually promoted a paradigm (view is a function of state).

That is not to say it's The Final Paradigm, but I think an important reason for both Angular and JQuery to lose adoption is because the wounds they band-aided over were cured.

nostalgeek2• 8 years ago

As of now, I have still yet to see a JS framework that made any sense to me.

The basic issue with the DOM is that it makes state management a pain in the arse.

So you have written a DOM widget and you want to incorporate it in a bigger widget, so you have to have some kind of "composite" API with a widget life-cycle that pumps data and dumps custom events from/to somewhere. It's not that hard to code, but by the time you are finished coding a library that handles all that you have created you own front-end framework basically.

Web Components help a bit by it doesn't seem that Google, Mozilla or Microsoft and co are doing a very good job at promoting them, pushing them in their browsers or even education people about them. It looks like it is one of that spec browser vendors don't like for whatever reason :

https://caniuse.com/#search=web%20component

Vue.js actually retains most of the philosophy of Web Components like Polymer so I went with that instead of React,Angular and co. Front-end development is all about state management.

rmrfrmrf4• 8 years ago

I'd like to know how implementing a template parser in JavaScript is more "Real JavaScript (TM)" than an actual function call (i.e., `React.createElement`).

Too• 8 years ago

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.)

St_Alfonzo3• 8 years ago

I think I can understand the struggle of the author. I experienced JS as a non-robust / fast-moving programming environment. Frameworks, Buildsystems and Language Features that change every few month. So when I first heard, that React is the new thing and everyone should use it, I did not want to use it. I use React now everyday and I really like it. But instead of writing it with JavaScript I use ClojureScript with a library called reagent(https://reagent-project.github.io/). So changes in JS or React aren't really my problem and CLJS seems to be a reasonably finished language. But I do not want to rate whether it makes sense to trade the weird React syntax for a Lisp.

jasonkostempski• 8 years ago

I tried a handful of times to get the same setup going but every part of the stack, from viable editor options, to the final output, is completely foreign to me. It's so much at once, I keep getting burned out after a day. Your comment has given me the urge again though :) It's going to click this time, I can feel it.

St_Alfonzo3• 8 years ago

I'm glad that my comment gave you some motivation. CLJS also had a steep learning curve for me. There are a thousand different aspects to learn, but just start with a template or example app and try to understand everything step by step. Maybe the re-frame template (https://github.com/Day8/re-frame-template) will give you a good framework for building your first webapp. And if you get stuck, just visit http://clojurians.net/ - very helpful community. Good luck!

klibertp3• 8 years ago

and Language Features that change every few month

On the other hand, there was a period where JS devs could use one new language feature in a decade. And when it did come, it was ActiveX. (I'm exaggerating, but not by much.) From this perspective, it was kind of inevitable that at some point JS will overdo this and become a kitchen sink.

I tried using ClojureScript in its early days, but the JVM ecosystem was painful. I don't see a point in having very similar, but not 100% compatible languages on backend and frontend. Either you use the same language, or two different languages, in which case you can as well use something you like more on the backend.

Some time ago (a year or two, I think?) CLJS got bootstrapped - is it finally possible (and practical) to use with node only?

St_Alfonzo3• 8 years ago

I don't see a point in having very similar, but not 100% compatible languages on backend and frontend.

I have an applications consisting of frontend cljs code, backend clj code and some code that will be compiled to both ends (called cljc). Even if its not 100% compatible, I think its helpful that I only have to write data validation (e.g. clojure.spec) once and can use it in every part of the system. Also if you wrote pure algorithms for complex data structures, its nice to use it in cljs and clj. The parts that are missing to 100%, can often be bypassed with a simple reader conditional (https://clojure.org/guides/reader_conditionals).

Some time ago (a year or two, I think?) CLJS got bootstrapped - is it finally possible (and practical) to use with node only?

I dont have much experience with this, but I think that shadow-cljs (http://shadow-cljs.org/) will make this mostly possible.

patricius2• 8 years ago

I just have to mention Mithril.js (https://mithril.js.org/) here as an alternative to React. It has built-in routing and XHR, and I think it is fairly easy to learn. Combined with the (optional) streams library, it makes developing web UIs extremely pleasant. Like React, it is also based on virtual DOM diffing.

As a very minor point, I think its surface API looks more JavaScriptesque. For example, the life cycle event componentDidMount in React is called oncreate in Mithril.js. Doesn't matter much, but looks better to me.

pygy_2• 8 years ago

Mithril is conceptually very close to React (it was released a bit after, but developed independently), and it comes with less cultural baggage.

It can be used productively with plain ES5, thought it also supports JSX and ES6 constructs (or even TypeScript) if you like it. I'd recommend TypeScript for large apps, actually.

The API is also closer to the plain DOM (e.g. no synthetic events). More advanced uses of the lib will lead to learn common Web standards (JS/DOM) rather than framework-specific idioms.

pdfernhout• 8 years ago

I second Mithril as a great choice. My latest spare-time project in Mithril a couple months back was a port to the web of an interactive fiction Delphi desktop app I wrote twenty years ago. That project also used Tachyons for (essentially) inline CSS so almost all of the app is just plain JavaScript/TypeScript. https://github.com/pdfernhout/storyharp-js

Mithril works well and has a small friendly community and works well. That said, it is the HyperScript API used by Mithril that I consider most essential -- and a similar API can be used with React instead of JSX. Several other vdoms support the HyperScript API as well.

== Some design and industry rambles

JSX is IMHO an unfortunate choice emphasizing making code look sort of like HTML to seem simple to web designers at first glance because it looks familiar -- but in reality JSX actually makes development more complex by requiring more tooling and making debugging and refactoring harder.

React has in my opinion a lot of needless complexity and bad design enshrined as best practice through pushing JSX and also by encouraging storing a lot of state in components.

React obviously has good features too like widespread adoption, third-party add-ons (unfortunately mostly using JSX), mobile support, and server-side rendering. React used to have a huge licensing problem related to their non-standard patents clause (why I looked for alternatives like Mithril) but the React licensing issue finally got fixed a few months ago.

So, React used via HyperScript is not that bad -- but even that combination still has lots of accidental complexity relative to what most single-page web applications need. Of course, React+HyperScript is still a far better combination than, say, Angular.

I have been using Angular for my day job for the last two years due to technology choices made by people before I joined the project -- people who have mostly moved on and so have not had to face the legacy consequences of maintaining their choice of (a then alpha) Angular. Angular can be made to work, but Angular makes supporting a web app far more painful than it has to be -- especially when you know of better alternatives like Mithril or even React+HyperScript. Angular's HTML-ish templates create the same kind of issues JSX does, making debugging and refactoring harder. Plus then Angular adds my-way-or-the-highway dependency injection, Zones, routing, RxJX/Observables as other layers of complexity for little payoff. And all those interlocking choices in Angular make it harder to migrate away from them piecemeal. Still, at least Angular is in TypeScript and its dirty checking is not that bad -- so it has some redeeming qualities.

It's sad that so many technology choices get made based on fads or promotions by big companies or even licensing issued instead of based on the intrinsic merits of the technologies. Kind of like when I knew ParcPlace Smalltalk well and loved working in it but the world and job opportunities moved to Java and then JavaScript. Sun tried to license ParcPlace Smalltalk but ParcPlace wanted run-time fees, leading to Oak/Green/Java, and then IBM put marketing muscle into Java instead of its own Smalltalk, and then indirectly we got JavaScript as a copy-cat of some of the Java syntax even though the semantics were somewhat more like prototype-based Self. Although Self was never proven as a good language or IDE the way Smalltalk was given a different tradeoff in flexibility vs. maintainability of prototypes vs. classes.

That said, programming in HyperScript+TypeScript+Tachyons feels to me a bit like Smalltalk development used to feel -- still not quite as integrated, but certainly better than many worse alternatives and with its own advantages including no run-time fees and easy deployment. And modern computing power makes feasible the easier-to-reason-about redraw model with vdom and the Mithril approach (to update on any data change or network response) rather than to use a harder-to-reason-about dependency-based approach to hooking up UIs common in Smalltalk and used in many other UI tookits in different languages. And a functional model mixed with strong-ish typing of classes can sometimes provide the best of both worlds when designing.

patricius2• 8 years ago

I am also using Tachyons together with Mithril. I can’t recommend it enough.

jeremiep• 8 years ago

I feel React's best use case is as a view backend in micro-frameworks like re-frame in ClojureScript.

React only gets complicated when you use states and mutable props, or when logic is put inside components.

As a view backend it just becomes a FSM translating app state into pure views and nothing more.

dwags• 8 years ago

I originally started with AngularJS and hated it, I was learning javascript alongside it and I couldn't stand the abstraction layer, I felt I wasn't learning anything except how to make things 'work' in angular. Then comes react, I get to see all my logic right along with my html/css! It was great, I learned how to debug, where things were going wrong or right and then began to work on the better practices and work flow. They take time and deliberate practice to really understand 'why'. THEN add redux and see how you can use it to help your app communicate. Multiple component-prop passings/pervasive callback chains all start to disappear and that's great. I can't stress enough how sexy and clean a productive vanilla react app looks to me now. I also just started a new job 2 months ago where we use modern angular(i actually really like it now). So it goes...

meesterdude• 8 years ago

the fact that the author spent so much time/money/effort to learn react, and it still isn't clicking... I don't think that's a good sign. I think react has an approachability problem - maybe it's a design feature, or an issue of speed and documentation.

Obviously, react works for some people. It clicks with them. But I think a lot of folks prefer something with more clarity. Things change so fast that guides go out of date and devs/codebases fall behind on whats best practice. and this isn't without significant costs on the people who are trying to learn or maintain.

Conversely, Frameworks like Rails (<3) and Vue.js are powerful but more natural to pickup, with a clearer surface area and better docs. Also different problem spaces in some sense too.

My point is: It doesn't have to be this way. This mess is man-made and not beyond clean-up, but doing so may require some changes.

pavlov3• 8 years ago

At the risk of looking like a shill for my own stuff, I'd suggest an alternative way to learn React.

Part of the difficulty is trying to understand it all "from the bottom up", where you can't see the big picture because you're getting constantly tripped by ES6 vs. JSX features and trivial differences in component declaration syntax and whatnot. Instead you can learn it "from the top down" using React Studio:

https://reactstudio.com

It's an application modeling environment that lets you experiment visually with concepts like data binding and immediately see how it affects the resulting JSX code.

Because you're always working on a complete web app (rather than e.g. isolated components), it can be easier to understand the full picture of how things fit together. For example, you can start by simply placing some elements in a screen, then move them into a component of their own, then bind the contents of those elements to some props that come through the component, and finally use that component within a list that gets populated from a real data source. (Speaking of working with real data, there's a great plugin for Firebase Cloud Firestore [1] that lets you do realtime database reads and updates.)

Under the hood, the exported projects are using Facebook's create-react-app. There's no proprietary framework layered on top, it's just plain React with minimal dependencies (no Redux, etc.) There's also git integration and a rather elaborate plugin system, so you can modify the output and integrate custom code as needed.

This "top-down" approach isn't right for everyone, but might be a good fit for a UI designer skill profile. You get to build applications and learn modern JavaScript along the way by examining the output, rather than having to figure out everything from scratch.

(Disclaimer: I wrote a big chunk of the React Studio UI and code export.)

[1] https://hackernoon.com/the-easiest-way-by-far-to-build-a-rea...

alexlrobertson• 8 years ago

I found React one of the easiest frameworks to learn and pick up but I had the benefit of learning React after working for a few years with Backbone and Angular. I found the opinions of the framework to be sensical and guided by the realities of web application development and developer experience.

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

I usually find the types of tutorials Brad references in this section to be very bad at actually connecting with the real process of using a framework. What you're building is just as important as what you're building it with. When you find the right project to use the right tool, it helps the principals click so much more quickly.

2. react and es6 travel together

This is definitely a pain point but I think the crux of this is JSX. Most every other convention in React is a very straightforward use of ES6 syntax. Most of the awesome, difficult, but not broadly available parts (generators) of ES6 aren't used in React's public API.

3. syntax & conventions

I think React could benefit from a clearer breakdown of how JSX translates to actual JavaScript. Babel's REPL is a good first step. [0]

4. getting lost in this-land.

For the most part I've found React's use of JavaScript OOP and `this` to be the most sane. You can use what amounts to a bit of boilerplate in any component that needs state and use `this` within lifecycle methods without batting an eye. Backbone and Angular had all kinds of headaches when trying to explain `this` to junior developers. And don't get me started on libraries that used `this` to pass context around.

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

I think React excels at matching his ideal workflow, but doesn't do a good job explaining how to achieve it. Higher Order components and smart/presentation components are very under-documented.

[0] https://babeljs.io/repl/#?babili=false&browsers=&build=&buil...

acdha• 8 years ago

I think React could benefit from a clearer breakdown of how JSX translates to actual JavaScript.

I think a key factor here is that JSX is JavaScript but it pretends to be HTML. Things like `className` vs. `class` aren't insurmountable but it seems to be a common source of confusion until people have internalized that divide.

tracker14• 8 years ago

I don't think so...

   <button class="MyButton" onclick="doSomeJsStuff()">...</button>
   <script>function doSomeJsStuff() { ... }</script>

    function MyButton(props) {
      return <button className="MyButton" onClick={this.props.onClick}>
        {props.children}
      </button>
    }

The latter is a reusable component, the former is a one-off that has to be repeated over and over instead of re-used. Both wrap one syntax into another.

cies• 8 years ago

Have a look at Elm, Cycle.js, ReasonML with BuckleScript-TEA, GHCJS/Miso or PureScript/Halogen.

I tend to believe the problem with React is not React it is JS. Therefor most FWs mentioned above are not in JS (except for Cycle.js, but that uses JS functionally).

ccostes• 8 years ago

I can definitely sympathize with the issues that come from not being familiar with ES6. I'm working through a React Native tutorial currently and, while I've managed to understand some of it via context, there's some very odd looking syntax that I still don't understand.

Can't really comment on the rest of the React ecosystem until I get through the tutorial and start trying to do things on my own.

bitL2• 8 years ago

4. Getting lost in this-land.

This is one of major design flaws in JavaScript; when one goes deeper into prototype land and using 'this' in closures/functions, facepalming happens all the time as the semantics is completely different to what one would expect in better designed languages like C++ and Java. So you have to workaround around these warts, making the programming akin to walking on eggshells. Especially if JavaScript is only one of languages you know well, and you have to switch back and forth between many different languages that are more-less compatible with each other in this regard.

Roboprog• 8 years ago

I’ll take EcmaScript over C++ any day :-)

But I started programming back in 83, before the PC industry decided that some bastardized knock off of Simula 67 was the one true programming model. In contrast, a language which traces its origins back to Smalltalk/Self with a longing to use some Lisp/Scheme techniques can’t be all bad.

fiatjaf• 8 years ago

I use react, react-dom and react-hyperscript. Write a component, render to the DOM. Transpile with browserify. End. Maybe there should a be tutorial that just does that, but no, people want to write a begginer tutorial that uses JSX, Babel, Redux, React Router, Webpack and GraphQL.

rw2• 8 years ago

I am pretty disappointed that React won the JS UI wars and not another framework. Angular 1.0 was I think the best framework for UI around and then then they smashed that with Angular 2.0 which went into obscurity. Probably Google's biggest mistake that ended up with them losing the UI framework war to Facebook's React.

jaequery• 8 years ago

React is fine. The problem is:

1) Flux (Redux) 2) Ecosystem (Webpack)

It really feels like something out of Dr. Seuss labs, where things just feels hacked together and wants everyone fit into their use case. It's over designed and some of the process is not required for most projects.

We really need some pragmatic hackers to come in and simplify these things. Someone who can create an efficient alternative that will fit into 99% of web projects and not the 1%.

I do see Vuejs / Mobx are going that direction. But I think we need more of it.

tracker14• 8 years ago

Don't use Redux if you don't need it... Context objects are really easy now, and create-react-app hides the complexity of Webpack.

tracker14• 8 years ago

I had the complete opposite experience... I've managed to stay fairly current with JS all along from ES5 through the influence of babel and other tooling towards ES6 and now. When I first started playing with React, I felt "finally!"

I had worked with .Net (both VB and C#) in the past as well as with ActionScript (Flex and Flash) and working with EcmaScript for XML (E4X) combined with XML literals in VB.Net was very natural to me... I'd wanted something similar to build from in JS/HTML for a very long time. React did that for me.

The flux pattern made sense, but most of the earlier libraries had way too much going on... when Redux came out it was such a natural fit to me.

When I look at other state management, or even Angular (1 and new) they just feel like less to me.

rehevkor52• 8 years ago

There's also mobx which imo is even better.

tracker14• 8 years ago

mobx just feels dirty to me, kind of like ngrx instead of angular-redux on the angular side... I like the cleaner feel of a state reducer in redux.

hguhghuff• 8 years ago

It’s hard but eventually clicks.

Create-react-app has made it infinitely easier to learn.

rehevkor52• 8 years ago

I find it odd that he tried to learn it by having someone else implement something in it for him. That's like expecting to learn by having someone else do your homework.

imleft2• 8 years ago

It appears that the biggest argument for React is:Facebook is using it. Really? PHP folks say they same thing: FaceBook is using PHP. There is article on how they write a custom PHP in C. When I view source of FB, it looks like SSR - and they are not using node.

Maybe some small notification widget is sprinkled on top of PHP.

But what kind of argument is: FB is using it? What is the FB reputation even?

It is: who cares. My POV is, show me a react project, and I'll show you a poor tech manager. Because react and js frameworks are so much worse than LAMP even. The productivity is shit. The maintenance is: lets re-write it. Etc. etc. The point is not to program, but to solve business issues, ex: SEO, user engagement, etc. Best thing you can do as a manger: get the react programmer to work for your competitor, that is a win.

imleft2• 8 years ago

Got a few upvotes, and then a bunch of downvotes.

alexashka• 8 years ago

I don't know that non-programmers should or need to learn react.

I understand that for employment - front-end devs need to learn react. I just question if websites have finally become more app-like, and hence require app-developers, not front-end developers.

They're two separate skills, and one cannot easily go from one to the other, nor should one expect it to be a smooth transition.

quickthrower23• 8 years ago

I think this person needs to think in terms of a series of onboarding ramps. You aren't going to learn to fly a commercial jet from nothing. You might want to get a private license first. Before that you learned to walk, talk, read, write and add up.

In other words, learn JS proficiently without any libraries first.

Then learn basic react, maybe without all the complex toolchains - just include the CDN link that compiles the code on the page and grok React.

Then finally do some basic React coding without the Redux etc.

t3h2mas• 8 years ago

Points 2-4 reinforce my suggestion to learn modern (es6/es7) JavaScript before taking on React. Vanilla JS alone can be tricky, see: `this`[0]

[0] https://github.com/getify/You-Dont-Know-JS/blob/master/this%...

paulddraper• 8 years ago

Could have been titled "My struggle to learn ES6?".

Very little if any was specific to React.

jinushaun• 8 years ago

This is more of a criticism of modern web development, and not specific to React. A modern web developer has to install node, webpack, babel/typescript, react, redux, sass/less just to write HTML, Javascript and CSS. It's especially frustrating for newbies since ES6/JSX and React always seem to "travel together." But you can write non-ES6 and non-JSX React.

- https://reactjs.org/docs/react-without-es6.html

- https://reactjs.org/docs/react-without-jsx.html

This is what all the JSX and ES6 compile down to. It's just not as fun.

But React at its core is very simple: Same props always render same UI. Different props always render different UI.

  add(1, 2) -> 3
  add(2, 1) -> 3
  add(2, 2) -> 4

That's the core principle. And it is the drive to organise your code into declared props that naturally drive how your React code is organised.

  add({'num1': 1, 'num2': 2}) -> 3
  add({'num2': 2, 'num1': 1}) -> 3
  add({'num1': 2, 'num2': 2}) -> 4

It's a reaction to the unpredictable nature of "typical" jquery code where data and actions flow in both direction and it became difficult to pinpoint why something changed. If you clean up how you use jquery and are disciplined about it, you will eventually build something like React. There's no magic to React. The virtual DOM is not React. It's just an optimisation.

Same with Redux. When you eventually start writing large React applications, you will eventually end up re-inventing something similar to Redux.

baron816• 8 years ago

If you don’t understand JavaScript, why is it a surprise that you don’t understand one of its libraries?

wilsonfiifi• 8 years ago

I can understand to a certain extent the need for advanced (complex) frameworks like React, Vue, Ember etc... if you're working on a sizable team and really complex front-end application. However if like me, you're used to the simplicity of Backbone.js you end up very quickly getting a tad frustrated with the hoops and loops you have to jump though to wrap your head around the frameworks and the development setup they all encourage you to use (webpack, framework cli, ...)

I've finally settled on Riot.js. It's easier in my opinion to consume in morsels and build up your development workflow anyway you see fit. I must say although the online documentation is good enough to get you going, I found the "Master Riot" course [0] was very helpful in synthesizing all the various concepts.

  [0] https://www.udemy.com/master-riot/

Edit: Seems the course is no longer free but I think for $10, it's still very much worth it. Ray is a great instructor and really makes getting up to speed on the framework a breeze.

scottydelta• 8 years ago

The problem that I have faced repeatedly in the past is whenever I try to follow a tutorial, most of the time things don't work because React/other react libraries change so frequently and articles get outdated very quickly.

Where can I learn react and its other components if so far my only experience is in javascript and Jquery(similar experience as point 1, 2 and 3 in the article).

yosito• 8 years ago

My skill set used to be very similar to Brad's. I followed his blog for years and learned a lot from him. Several years ago, I decided that there seemed to be better jobs for people who could write JavaScript, so I started teaching myself. The learning curve was insanely difficult. There were so many tools, syntaxes and buzzwords that I had to navigate and on top of that, it felt like things were changing every week. I'd post a question on StackOverflow or IRC about how to do x, and the answer would be that first I had to do a-w. I feel like this is what Brad is going through now. But by the time I got to learning React, I had already been writing ES6 for over a year and I had figured out the worlds of Grunt, gulp, Webpack, Babel, etc. And I knew some fundamentals like functional programming. Having all of that background made React extremely easy. I've never felt that I've used a technology or framework that's so easy and straightforward. Redux took a little bit more effort for me to wrap my head around, especially when trying to sync application state with a database, but I think that's difficult for a lot of people, which is part of the problem that things like GraphQL and Apollo solve. And even though Redux was more challenging, I found it to be a really useful pattern that ultimately helped me keep apps way more organized as they grew. All of that being said, I empathize with people who are trying to learn all of the parts of being a developer from ant high level entry point like React. There are a lot of contextual things that you have to know first and it can be overwhelming to someone who hasn't yet had the opportunity to learn those things. The biggest problem, in my opinion, is that things in the JavaScript world are moving so fast and the APIs for things are changing faster than people can keep up. I can't remember the last time I read Getting Started docs or examples that weren't already outdated by the time I was trying them out.

olingern• 8 years ago

I think the way developers tend to think about front-end is misguided. Front-end development can be just as complex as backend, and IMO is analogous to iOS / Android, but interacting with a different environment.

Having started in ASP.NET web forms, I wholly welcome React & Redux / etc., because those were painful years.

Also, in many cases, developers are paid quite well ( a doctor like salary in some cases). I don't see problems with the notion of "having to keep up with the industry" since we're paid so well to do so.

lenkite• 8 years ago

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.

fjahr• 8 years ago

I know that feeling. To me as someone who is not fully immersed in the JavaScript world the problem was also that there are so many different parts working together. You are describing that in your article as well. It helped me a lot to really just focus on one part of the machinery at a time and completely understand what it's purpose is and how it works exactly before moving on to the next. For example, take 1-2 days to learn webpack, then do the same for JSX and so on. Things become a lot clearer quickly when you understand why each part exists and it will make a lot more sense why things are done in a certain way.

JavaScript frameworks are more like loose constructs that don't hide the interfaces between the different parts very well. This is not a good or a bad thing but it is very different from, for example, Rails which I found much easier to learn as a whole. You can accomplish a lot with Rails without even knowing about the different gems of which it is composed.

gymshoes• 8 years ago

I had quite a similar experience. The looking at the official site method is not an easy way to learn react.

In addition to that, one needs to keep reading the release notes because it is constantly evolving.

My struggle to learn React

Related Stories