20 ms·
My struggle to learn React
- ghostbrainalpha 8y agoFirst 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.
- dwags 8y agoI 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 8y agothe 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.
- leetrout 8y agoI'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 8y agoI'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 8y agoThe 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 8y agoAnd prettier is much much better than Go fmt because it breaks lines for you
- quantumleap22 8y 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 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.
- rhapsodic 8y agoI 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 8y agoEven 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 8y agoIts 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 8y agoI'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.
- diggan 8y agoNot 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.
- halayli 8y agoMore accurate to say 'My struggle to learn ES6'. My newcomers confuse what's ES6 syntax vs React specific.
- jbob2000 8y agoHe 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 8y agoIf you think React is complicated stay far far away from Angular.
- jbob2000 8y agoHa! 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".
- deleted 8y ago[deleted]
- chrisco255 8y agoNah, 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 8y agoHonestly 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.
- tptacek 8y agoSo 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.
- gorpomon 8y agoI 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.
- baby 8y agoNote that I’ve felt the same way for a long time. I ended up giving up and checking Vue.js and it instantly clicked.
- cncrnd 8y agoIf 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 8y agoI got the impression that he's spent a bit more than an afternoon.
- retSava 8y agoEvery 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.
- cncrnd 8y agoI 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.
- tptacek 8y agoThis 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_camel 8y 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.
- matte_black 8y agoThe people who will learn React the quickest are those who have been building applications on other platforms beyond the web.
- quickthrower2 8y agoI 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_black 8y agoI don’t know, I think it’s better to just dive straight into what you’re trying to learn, otherwise you’re basically procrastinating.
- quickthrower2 8y agoI think it depends. For a hard deadline, yes. For building understanding and mental models, I think it can be bad to jump into things that are too much of a struggle. However the best of both worlds is some kind of tutorial that explains it really well. Like the recent "explaining functional programming to my 6 year old" article. Then you can dive straight in, but get off to a solid start.
- reaperducer 8y agoAm I the only one who felt compelled to fill in all those bubbles with color on the web site?
- Kaladin 8y agoHaha. Naa. Same here. No wonder colouring books sells like crazy.
- briantakita 8y agoSvelte - https://svelte.technology/ 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_camel 8y agoFor 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 8y agoThe 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_ 8y agoAs 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 8y ago"My Struggle to Learn JavaScript" would be a much more accurate title.
- TheAceOfHearts 8y agore: #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 8y agoGive React Storybook a look, its tool for easily building component previews for devs.
- handbanana 8y agoThis 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 8y agoI 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 8y agoI 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 8y agoI 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.
- keithnz 8y agoI 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 8y agoI'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 8y agoI'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 8y agoThe examples don't work inline anymore, but https://chibicode.com/react-js-introduction-for-people-who-know-just-enough-jquery-to-get-by/ 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.
- tootie 8y agoI'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.
- gorpomon 8y agoAt 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.
- pknopf 8y agoAgreed. 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 8y agoI'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.
- chrisco255 8y agoHonestly, 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 8y agoIf you're still saying that in 4 years, then I'll believe you.
- nostalgeek 8y agoIt'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 https://caniuse.com/#search=web%20component
- St_Alfonzo 8y agoI 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/ 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 8y agoI 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_Alfonzo 8y agoI'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 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/ http://clojurians.net/ - very helpful community. Good luck!
- klibertp 8y 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?
- boxingdog 8y agoThe problem with the author is that he has not learned ES6, arrow functions, template literals, object decomp, etc are basic things.
- patricius 8y agoI just have to mention Mithril.js (https://mithril.js.org/ 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_ 8y agoMithril 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 8y agoI 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 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.
- jeremiep 8y agoI 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.
- pavlov 8y agoAt 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 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-real-react-firebase-web-app-5dc6fa6f1b61 https://hackernoon.com/the-easiest-way-by-far-to-build-a-rea...
- alexlrobertson 8y agoI 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=&builtIns=false&code_lz=JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4AoczAVwDsNgJa4BhXSWpWmACgEo4Ab3Jw4RGNSjMAPABNgANzhoANigDO6gHIoQSALwAiTBAiG4AegB8FAL5A&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Ces2015-loose&prettier=false&targets=&version=6.26.0&envVersion= https://babeljs.io/repl/#?babili=false&browsers=&build=&buil...
- acdha 8y 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.
- cies 8y agoHave 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 8y agoI 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.
- bitL 8y 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 8y agoI’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 8y agoI 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 8y agoI 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 8y agoReact 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.
- tracker1 8y agoDon't use Redux if you don't need it... Context objects are really easy now, and create-react-app hides the complexity of Webpack.
- tracker1 8y agoI 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.
- hguhghuff 8y agoIt’s hard but eventually clicks. Create-react-app has made it infinitely easier to learn.
- rehevkor5 8y agoI 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.
- imleft 8y agoIt 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.
- imleft 8y agoGot a few upvotes, and then a bunch of downvotes.
- alexashka 8y agoI 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.
- quickthrower2 8y agoI 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 8y agoPoints 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%20%26%20object%20prototypes/ch1.md https://github.com/getify/You-Dont-Know-JS/blob/master/this%...
- draw_down 8y agoA lot of this is nothing to do with React, which is a library for mapping state to virtual DOM, and using virtual DOM nodes to update a real DOM. If you can’t read the ES6 syntax, transpile it. Use the Babel REPL. Throwing up your hands feels good for a minute but it won’t actually help with anything. If too many concepts at one time is overwhelming, narrow it down. None of this stuff is magic. Take some breaths.
- paulddraper 8y agoCould have been titled "My struggle to learn ES6?". Very little if any was specific to React.
- primeblue 8y agoAngular CLI is beautiful Typescript just makes sense. https://github.com/angular/angular-cli/blob/master/README.md https://github.com/angular/angular-cli/blob/master/README.md
- wfbarks 8y agoyou lost me at "I’ve been writing code with Mustache"
- jinushaun 8y agoThis 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-es6.html - https://reactjs.org/docs/react-without-jsx.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 8y agoIf you don’t understand JavaScript, why is it a surprise that you don’t understand one of its libraries?
- scottydelta 8y agoThe 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).
- wilsonfiifi 8y agoI 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.
- yosito 8y agoMy 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 8y agoI 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 8y agoUse 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 8y agoI 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 8y agoI 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.