My struggle to learn React
bradfrost.com
bradfrost.com
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.
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.
const path = findThePath();
class Router extends Component {
render() {
if (path === "/about") return <About />
else if (path.match(someRegex)) {
const data = parseSomePath(path);
return <Page { ...data } />
} else {
return <Default />
}
}
}
Of course, I say just buck-up and learn the damn thing, it isn't that complex... earn the "Engineer" in your job title!
Maybe I'm just an out-of-touch neckbeard these days?
So yeah, it works good when you get it working, so yeah, the best thing to do is to just buck up and learn if it you need it. But boy does it suck getting there.
All of that said, I don't understand where this view comes from that Redux is extremely confusing. It can indeed sprawl a little. Say, if you keep you containers, reducers, and actions in their own directory trees. The overall architecture didn't take me very long to grasp and start to leverage.
Plenty of folks find their home in Flux or MobX instead, but I'd have to guess that a lot of the confusion is actually confusion about state containers and their uses.
If the router was just "Buck up, learn it, and you're golden" I suspect we wouldn't hear too much hollering about it. Unfortunately, the hassle of using it is so close to clockwork I feel like I should just schedule a week every six months or so for maintenance.
I had the same problem with react-bootstrap, which I used for about a year and ran into regular upgrade compat problems. I wouldn't mind that much except that wrapping a React component around a fragment of HTML is not a problem so difficult that I'd endure compat problems in a dep to solve it.
With the router, it was never a matter of us just deciding to upgrade for the sake of upgrading but rather ending up being painted in a corner with peer dependencies requiring upgrade. Additionally, because we were a micro service / many SPA outfit, we ended up with a dozen or more applications at varying levels of libraries so you had to deal with 2.x, 3.x, and 4.x or just upgrade.
For those of you reading along thinking "This sounds like a dysfunctional environment!" You're right! Imagine having five heads of department, albeit two interim, in a year.
> I had the same problem with react-bootstrap, which I used for about a year and ran into regular upgrade compat problems.
I'm in the middle of building out an internal component library based on `react-bootstrap`, so that's fun to hear...
Have your issues mostly been upgrades of the library? Or of Bootstrap versions? We internally decided we're just sticking with Bootstrap 3 for the foreseeable future with the hope that it will mean we don't have many issues to deal with.
It's possible react-router has settled down too, but the experience I had of "I can't believe I ever wasted time trying to figure out react-router" after implementing a "router" myself was so powerful that I'm pretty averse to finding out.
That layout is the biggest reason it took me so long to understand it when my team brought it in.
It goes a bit against the spirit of Redux, but the tutorials really should pair up action and reducer in the same directory, then later explain why the other way is also useful.
We currently do this:
state/
|---some_piece_of_state/
| |------reducer.js
| |------actions.js
| |------tests.js
|
|---another_piece_of_state/
|------reducer.js
|------actions.js
|------tests.js
For the size of the tutorials, it's probably simpler to use a "folder-by-type" structure. But yes, for real apps, I myself have settled on a "folder-by-feature" structure. Note that either approach is completely orthogonal to whether you have multiple reducers listening to the same action.
The tutorial is already trying to explain a lot of concepts that are new to most people, so we try to keep it focused on the meaningful concepts. Throwing in side discussions on folder structures would probably add more confusion at that point in the learning curve.
> so we try to keep it focused on the meaningful concepts.
For me, scattering a single feature across multiple directories makes it far harder to understand what relates to what. It's _less_ meaningful to group by type than by feature, which makes it harder to learn than it should be.
I'm not saying the docs should go into asides about the alternative structures all over, but rather the people promoting Redux should definitely consider whether or not their examples smell more of spaghetti code than they need to be.
If you take the recommended path, i.e add redux iff you need it, you've already settled away from folder-by-type. It's natural to organise by feature since you're generally doing it anyway by that point.
Instead of a rework, it might be easier to add a small page on folder structure.
Noticed you on Reactiflux too, hi!
You want the things in your app that look like links to have some interesting behaviour. They should look like links, they should act like links when right-clicked.... but when left-clicked, they should not actually load the new page. Instead, they should update the History and also trigger the router to reconsider the routing. That's why ReactRouter includes Links and Redirects.
I suspect there's at least one other feature-of-some-utility in it that I can't think of right now. Hmn.
There's also some weird logic around multi-routing, which I suspect is a bug rather than a feature, but maybe there's a sweet use-case. And there's also some weird stuff about not propagating children, which seems like a bug not a feature, but the workaround is easy, and again maybe there's actually a good reason, I dunno.
Anyway, as with what you talked about, this isn't rocket science, you could do it yourself with some work. But if someone follows your advice and thinks that's the end of it, they'll eventually feel some minor pain points.
That said, I honestly can't be bothered to actually properly learn React Router. I think that some company, ideally one specializing in react training, should write better documentation for it.
He teaches a good chunk of the react nanodegree course on Udacity and has a lot of good blogs on react.
You also have a few (single-digit) lines of code to wire up the history API so that the back button works.
You have a tiny helper function that uses the history API to directly navigate to a URL inside your application.
You have a tiny Component that renders an <a>...</a> whose onClick calls that helper function.
I'm sure React Router does a lot more than this. I mean, it'd have to, right? It's so complicated. But I don't know what those things are, because until I'm forced to, I'm not going to bother with it.
Similarly: I appreciate flux and think Redux is a reasonable implementation of it, but at this point, after doing a couple applications with it, I'm going to get as far as I can with a simple EventEmitter and hierarchical state before I bring it into a project. For straightforward applications --- really, a pretty big chunk of the apps I see are fundamentally straightforward --- I don't think it's a win.
When React was originally released it was sold only as a view layer that you plug into your application stack. Since no official way of approaching the rest of the stack emerged from Facebook, when Flux was announced it seems that it was taken as the rest of the stack by many.
I'd also just look at the React Router codebase. The components are pretty well written and somewhat easy to understand: https://github.com/ReactTraining/react-router/blob/master/pa...
I believe this is the post [0] in question.
[0]: https://medium.com/@dan_abramov/you-might-not-need-redux-be4...
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.
First time I used react I hated it, because everything was done through flux, want to add a field to a form. Now you need to update 4 different files and create 8 methods. Not to mention interacting with non-react components in a react way can be super painful.
It was insane. Second time I dropped all of the libraries. Only used react, and any time I needed to use a non-react component I wrapped it myself, and many times did very unreacty things like use methods to do a lot of interaction.
And I loved it. Everything is so much easier. I can focus on solving the user's problems, and not my react problem.
The apps weren't huge, but they weren't small either. 3 months of work for 3 devs full time.
It is a total nightmare and a horrible use of redux. That is like binding every variable and function to the window object because you have no concept of scope.
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.
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.
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.
m('.foo', {...attrs}, ...children)
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...
Why do not use a more simple approach, say jQuery?
Once in a blue moon, I want to add a screenshot or other image to a post. Such images are of various sizes, mostly larger than the (max)width of the content. I use CSS to scale them down to fit with the text, but sometimes images displayed like that are too tiny to be legible. For a long time I handled this case by wrapping <img> with <a>, basically like this:
<a href="$IMG_SRC"><img src="$IMG_SRC" alt="" /></a>
At some point, I gave up and included a bit of JavaScript, which enlarges the image while you stay on the same page. I used some kind of fancybox derivative - a jQuery plugin.
Now tell me that I should've used React.
For anyone else covering the same dilemma and doesn't care about transitions:
https://codepen.io/gschier/pen/HCoqh
Or, reduced further:
CSS
.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
outline: none;
display: block;
}
<a href="#img1">
<img src="image.png" class="thumbnail">
</a>
<a href="#_" class="lightbox" id="img1">
<img src="image.png">
</a>
(See CodePen link for code credit. Pretty clever little item, if you don't have to parse the pure markup. Even then it's not overly intrusive.)
Source: I'm currently building out my own Javascript-light blog/cv site, even though I generally like working with React. It's just not needed for everything. I'll likely extend on this at least a bit for some nicer effect with some current Javascript— barring older browsers from the lightbox effect but still able to read the thing in lynx and if need-be.
It shouldn't affect screen readers or Lynx users too much.
I also highly recommend Spectre CSS! I've been toying with it, and it seems like great work. I suggest checking out the "experimental" features.
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.
What's your take on things you miss from Redux now that you've switched over to Mobx?
mobx-state-tree is what you are looking for. You can model it similar to your Redux setup. It is immutable. It also has the snapshot stuff Redux has.
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...
Nit: It maps it to a virtual DOM, not XML.
That it transpiles down to something else is just an implementation detail to the developer. For all I care it could be jQuery statements :)
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...
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.
That's a good point - I wonder if devs think enough about when not to use the tools they build. I was about to mention that the Redux docs do this but the only thing I could find was the 'Before Proceeding Further' section on the first page. I think my impression came from Dan/Mark's tweets and articles, like this one: "You Might Not Need Redux" [0]. But even that article talks about all the benefits of Redux first :)
>> Also, is it just me or is the tic tac toe tutorial really not useful?
I agree it's contrived. Building a game I think is a good way to get introduced to working with state in a slightly more complex and interesting way. React is at its heart all about rendering a state machine. It's up to you how to represent that state machine - either as primitive state, context provider, or redux. Personally I'm not a fan of address book examples but that's just because I've seen so many of them they don't hold my interest...
[0]: https://medium.com/@dan_abramov/you-might-not-need-redux-be4...
> So hard to write the new docs. Many different audiences to cater to. Should make sense to: Flux beginners, FP people, FP people who don't get Flux, Flux people who don't get FP, normal JS people too. Flux people: “is this proper Flux?” FP people: “is this that weird thing called Flux?” Normal people: “why not Backbone”
Both React and Redux introduce a lot of new concepts for someone coming from a typical jQuery / Backbone-type background. The larger the example apps you show, the more potential there is for them to get lost on what concepts are actually relevant (which is actually part of what Brad was saying in the original linked post for this discussion).
The docs for both React and Redux are open for PRs. If you feel that we need to have sections that better lay out the pros, cons, and reasons to use React and Redux, please submit a PR and we can figure out the best solution from there.
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).
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!
Old context will continue to exist through React 16.x, but will be removed in 17.0. Meanwhile, we've got a proof-of-concept PR open for React-Redux to switch it to use the new context API instead ( https://github.com/reactjs/react-redux/pull/898 ). Given the other changes related to React 16.3+, we're likely to put out a React-Redux 6.0 that includes the context usage changes, and make it 16.3+ only.
All that said: you really _should_ stop using the old context API, upgrade to React 16.3, and switch to the new context API instead. It solves the issues inherent to the old APIs design, and is the supported approach going forward.
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.
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.
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.
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.
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
I've had my whimsical entries into experimenting with Web Components, but they just haven't felt like they're quite there—ignoring the lack of support. They're workable, but I think design patterns surrounding current paradigms might need more readily addressed. As they are, you'd probably want a framework on top of Web Components to improve the semantics and just make working component state in generally less verbose.
I have a hastily-written example here playing with them:
https://robert-fairley.github.io/es6-webcomponents/
(No repo, it's not worth it. Just check the source–it's short enough)
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.
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.
AngularJS 1.x + Angular-Material came close, but Google then released backwards-incompatible Angular 2.
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.
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.
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.
(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.)
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.
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.
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?
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.
For me personally it would be exasperating to learn all of the stuff that CRA bootstraps before actually getting to learn React.
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.
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/
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.
import React from "react";
import { connect } from "react-redux";
function _HelloWorld({name}) {
return <div className="intro">{name}</div>
}
function mapState(state, ownProps) {
return {
name: state.name
}
}
function mapDispatch(dispatch, ownProps) {
return {}
}
export const HelloWorld = connect(mapState, mapDispatch)(_HelloWorld)- Only add the `ownProps` argument to `mapState` or `mapDispatch` if you actually need it, because `connect()` will now call those functions more often (whenever the incoming props have changed). If you're not actually _using_ values from `ownProps` in there, don't add those arguments.
- The `mapDispatch` function isn't doing anything at all in that example, and can be omitted completely
- I personally recommend using the "object shorthand" form of `mapDispatch` instead. To me, there's never actually a good reason to write a separate `mapDispatch` function. Just write action creators, and pass them in an object to `connect`, like this:
import {addTodo, toggleTodo} from "./todoActions";
const actionCreators = {addTodo, toggleTodo};
export default connect(mapState, actionCreators)(TodoList);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!
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.
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.
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?
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?
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.
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!
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.
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.
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.
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:
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...
- 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
add({'num1': 1, 'num2': 2}) -> 3
add({'num2': 2, 'num1': 1}) -> 3
add({'num1': 2, 'num2': 2}) -> 4
Same with Redux. When you eventually start writing large React applications, you will eventually end up re-inventing something similar to Redux.
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.
This is why a lot of front end folks should look at an alternative like intercooler:
It is far less violent to deal with, with a much lower barrier to entry and satisfies most needs of most web apps.
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.
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.
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).
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.
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.
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.
HTML, js and CSS aren't separate concerns. Each component is a separate concern.
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.
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.
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.
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.
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.
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/
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.
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.
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.
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.
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.
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.
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.
[0] https://github.com/getify/You-Dont-Know-JS/blob/master/this%...
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).
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.
Very little if any was specific to React.
In addition to that, one needs to keep reading the release notes because it is constantly evolving.
> 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...
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.
<button class="MyButton" onclick="doSomeJsStuff()">...</button>
<script>function doSomeJsStuff() { ... }</script>
function MyButton(props) {
return <button className="MyButton" onClick={this.props.onClick}>
{props.children}
</button>
}
Create-react-app has made it infinitely easier to learn.
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.
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.
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.
I think that's a fair point. And I think others have remarked that it illustrates Conway's Law.[1] For a front end like Facebook's, that has numerous moving parts, developed by different teams scattered all over the world, and those parts have to fit together and work together in combinations that may not even be foreseeable, then a framework like React may be the only possible way it could be successful.
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.
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.
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.
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.
For an example of how a Clojurescript project would be built using these libraries, I'd recommend checking out re-frame: https://github.com/Day8/re-frame
1. Assuming you have leiningen installed, run `lein new figwheel hello-world -- --reagent` and follow the instructions in the output
2. Follow along with https://reagent-project.github.io/
3. Enjoy a nice, refreshing beverage.
I do not recommend Om for starting.
Disclosure: I learned some Haskell before Elm so I may be "immunized" against some of the struggle!
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.
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.
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.
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.
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.
const HelloPerson = ({ person }) => <div>Hello, {person}</div>;
ReactDOM.render(<HelloPerson person="ChrisCo" />, document.getElementById("root"));
That's elegant as fuck.