Hey, author here :) I am curious about your experiences using/learning React. Are there any other JavaScript topics which are important when starting out with React? Would be great hearing your opinion!
One suggestion I'd make is to use ES6 template literals over concatenation, since you're using other ES6 constructs anyway.
getName() {
return `${this.firstname} ${this.lastname}`;
}
If you are trying to unit test a function that calls another function in the same class you cannot mock the second one it if it is a fat arrow.
If 'baz' was a fat arrow function, you would never be able to test bar in isolation.
for example: Jest is set up so it's super easy to say `jest.spy(Foo.prototype, 'baz').mockReturnValue('whatever')`and test that bar is doing the right thing.
Why should mocking only be used in 'extreme circumstances'? I want to test what bar does, and I don't care what baz does, and if someone breaks baz, my unit tests for bar shouldn't fail, because it is doing its job.
I would mock it if it was calling some function in another module, so what's the difference if it's calling another function in the class?
Then the value of the original, mocked unit test is questionable. It only provides additional information in the event that the mock differs from the actual component. If that's unintentional, then either the component is wrong (which should be caught by the tests for that component) or the mock is wrong. In either case, the mocked test provides little or negative value.
Then the remaining case, where mocking is actually useful, is when the mock intentionally shows different behavior. Mocking a slow computation to return the result instantly. Deliberately failing, to test error-handling code. Simulating unlikely events in general. Those are good uses of mocking.
TL;DR: Write more integration tests instead of unit tests with mocking.
Interesting. I will investigate what that looks like at work tomorrow. Thanks!
I wrote a tutorial that would be the next step to yours, called React From Zero[0] I try to teach React here with the basic JavaScript knowledge most people already have.
One section I was hoping would get more treatment in your article (like the same treatment you gave classes, which was great) was imports/exports. Named vs. default exports are kind of baffling for a newcomer, and the usage of the named import with curly bracket syntax seems completely arbitrary.
I am sure there are many, many good explanations of named vs. default imports/exports out there on the Internet, but this is one that leaped out at me. I was a little disappointed that the section on imports/exports was so comparatively short. It mostly discussed the usage of imports/exports in CRA.
Still, awesome article. Thanks again.
<button onClick={ () => this.smth() }></button>
We do not use class arrow functions but instead have helpers to bind specific functions to the component's context or generate setter functions.
<button onClick={ (arg) => this.smth(arg) }></button>
createOpener(folder) {
return () => this.props.dispatch(Actions.listFiles(folder, this.props.member));
}
// Target function
onItemClicked(item) {
// ...
}
preBind() {
const { data } = this.props;
// Bind with primary key
data.forEach(item => {
this[`__boundFn_data_${item.get('primaryKey')}`] = this.onItemClicked.bind(this, item);
})
}
render() {
const { data } = this.props;
return <Fragment>
{
data.map(item => {
const pk = item.get('primaryKey');
return <div key={pk} onClick={this[`__boundFn_data_${pk}`]}>{ item.get('label') }</div>
})
}
</Fragment>
}
By doing this, though, we can rely on props checks for components to determined the necessity of rendering which allows us to use React's PureComponent in 90% of our components.
You do define a function, but only once. Constructor:
this.smth = this.smth.bind(this);
<button onClick={this.smth}></button>
This totally works but only if `smth` has been declared as an arrow function (so that is captures the class `this` context).
1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
two minor things that you might include are
1: rest in the context of function args
2: short circuiting: e.g. `isLoading && <Loading />`