Summarize UX issues we can learn from a fun video

[gaearon]

Companies often work with UI researchers to conduct user testing sessions.

Lucky for us, @mpj has contributed a whole 40 minute video session of using Create React App, complete with terminal, browser, facial expressions, and funny comments.

We just need someone to watch it all and write up a summary of every frustrating moment there, so that we can identify usability issues and potentially improve Create React App.

Any volunteers? 😄

[Timer]

Of course he was using 0.9.2... 😅 (no I haven't watched it just skimmed it real quick)

God I love his reaction: https://youtu.be/7ctkTFv6XdA?t=12m31s

[lpalmes]

I will. I love @mpj videos 😀. I will watch it and add my notes here. It could be useful to have multiple point of views aswell

[lachlanjc]

1. npm start doesn't start the app because one must cd first. The tool explicitly says this, but it's inside a bunch of other text and no one's got time for reading helpful documentation.
2. Trying to add enzyme was not totally straightforward
3. Semicolons everywhere 😨 — there's a distinct lack of linters
4. Localizing strings is confusing but did add some more bloat
5. Adding useless and harmful dependencies took too long. Measuring the difference in bundle size could be built in to create-react-app so you can monitor your bloat. Maybe include a Twitter button so you can tweet how much useless stuff you've added.
6. React is basically Communism 🇺🇸
7. Redux got way too hipster
8. Removing superfluous things is challenging but helpful
9. Non-ethereal developers have trouble setting up Redux providers and dispatchers and actions and states
10. Testing Redux is like whaaaaaat
11. It all works out!

[gaearon]

Measuring the difference in bundle size could be built in to create-react-app so you can monitor your bloat.

Interestingly, we do show the difference on npm run build. It’s impossible to measure earlier anyway since you don’t know how much they would actually take after envification and minification.

[gaearon]

Trying to add enzyme was not totally straightforward

This is interesting. What were the main problems? It’s described in User Guide, I think. But then maybe reading the guide doesn’t match the video format 😄

[gaearon]

Localizing strings is confusing

Heard this in a couple more issues too. I think we should look into de facto solutions in this area and maybe provide better integration.

[aranajhonny]

First of all thank you for making this tool. in the video, the installation process is very fast. In my computer it takes like 20 minutes, we generally go to anyone in Venezuela it would take that, there are many packages, and the internet here sucks. Should there be an option that allows me to install preferably offline when i use yarn, of course previously already created other applications.

[Timer]

@aranajhonny offline Yarn support was added in the last release. 😄 We don't offer a method to force it to act offline, but turning your internet connection off before running create-react-app will have the tool fall back into offline mode.

Make sure you have the latest CLI by running npm install -g create-react-app@latest.

[icodejs]

@gaearon I built a web app that might make the video summarisation process easier: https://www.docuevid.com

[icodejs]

@gaearon a little late but hopefully helpful: https://www.docuevid.com/docuevid/dasebenetelu

[viankakrisna]

npm start doesn't start the app because one must cd first. The tool explicitly says this, but it's inside a bunch of other text and no one's got time for reading helpful documentation.

is it worth a pr? or any reason that we don't cd to the generated project automatically?

And here's the copy pasted transcription from https://www.docuevid.com/docuevid/dasebenetelu props to @icodejs

Create a hello world app using create-react-app.

00:02:03  
Issue with npm start weren't obvious, even though it was a mistake on mpj's part. However the error provided did give him the correct command e.g. $ yarnpkg start

00:03:54  
LOL!!!

00:04:39  
Integrated VS Code terminal.

00:05:43  
Write code using test driven development with Enzyme.

00:06:18  
Issue running tests without Enzyme module.

00:08:07  
Issue, cannot find module react-addons-test-utils: https://www.npmjs.com/package/react-addons-test-utils

00:08:30  
Issue, cannot read property equal of undefined.

00:08:49  
Issue using the wrong assertion syntax.

00:09:13  
Issue random error after installing new modules, which fixed itself after restarting the server.

00:12:30  
Get lang from browser 'window.navigator.language'!!!

00:15:58  
Issue with peer dependencies when installing redux and react redux https://github.com/reactjs/react-redux.

00:22:46  
Extremely verbose error message.

00:31:29  
Provider is not defined.

00:32:21  
How do you test redux?

This video mostly talks about how to create an overly complicated hello world with di, tests, and i18n.

We haven't touch i18n with create-react-app, is there any plan on how we tackle this? (currently i'm using a custom switch case and json for i18n, so I haven't known de facto solution for this...)

For testing, we already have https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests, but I think we can improve more by using gitbook like what redux docs done. (better toc)

For di, yeah he's making it overly complicated, I think we can link more to react and recommendation of best practices in the readme (right now we don't even link to react doc in the readme)

Btw @mpj videos are really great! Thanks @gaearon for recommending it, been binge watching it from last week :)

[allthesignals]

I'm a little confused by https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests - using create-react-app, none of the examples seem to work because of missing dependencies. For example, if I want to use mount from enzyme, I get a "cannot find module" error in my App.test.js.

Going back, the documentation seems to suggest that this is a dependency: "Note: this feature is available with react-scripts@0.3.0 and higher." I don't really know what that means, but I'm guessing I should install it.

yarn adding that doesn't seem to help, either - enzyme is still missing.

yarn add enzyme gets me a little further: cannot find module "react-addons-test-utils".

yarn add react-addons-test-utils gets me further still, but with a warning: "Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning."

So, finally after installing chai, I can get a failing test with the warning mentioned above.

I guess it's just a little confusing what the documentation is telling me about create-react-app out of the box. I don't really have an opinion about the particular testing framework flavor - I just want to write some integration tests that check that values exist or that certain things exist in the DOM after certain actions. For background, I'm coming from ember-cli, which is super opinionated about these things.

Happy to help contribute to documentation if this point of confusion makes sense to anyone else!

[gaearon]

Closing as stale.

@allthesignals Pretty sure current instructions tell you to yarn add the necessary packages. Maybe you were using a buggy npm version that accidentally didn't install those.