Ecosystem and workflow on a typical React project

How we use create-react-app, Storybook, Jest, Flow and Storyshots to build a sound React project.

Slides together with live coding session (link to code inside) was presented at Weekly Talks meetup at March 15, 2017 in Grodno, Belarus.

To access links from slides or post comments to them please use original Google Slides at https://docs.google.com/presentation/d/1b8cQyCCWjTQGPKfgrs0eTUuAB02Mjc2MQWXppY1bssE/edit

Next meetup would be on Redux, stay tuned ;)

Transcript

1. Typical React project ecosystem and workflow
2. https://github.com/petehunt/react-howto If you’re new to React (or frontend in general) you may find the ecosystem confusing. There are a few reasons for this. • React has historically been targeted at early-adopters and experts • Facebook only open-sources what it actually uses, so it doesn’t focus on tooling for smaller-than-Facebook projects • There’s a lot of bad marketing masquerading as React guides
3. [react-howto] How to tackle the React ecosystem All software is built on a stack of technologies, and you need to understand enough of that stack to build your app. The reason why the React ecosystem of tooling seems overwhelming is because it’s always explained in the wrong order. You should learn, in this order, without skipping ahead or learning concurrently: React itself, npm, JavaScript “bundlers”, ES6, Routing, Flux. What? Sounds like a lot...
4. [react-howto] You don't need to learn all of these to be productive with React. Only move to the next step if you have a problem that needs to be solved.
5. DO IT YOUR WAY!
6. development environment • Node.js • yarn ◦ yarn is good, but it is one letter more than npm • Chrome ◦ because React (Chrome only) and Redux developer tools are available as extensions • good enough text editor
7. Update to the latest versions • Node.js • global create-react-app, flow-bin
8. Node.js via nvm • nvm ls, nvm ls-remote ◦ installed v7.6.0, latest v7.7.2 • nvm install v7.7.2 • nvm reinstall-packages v7.6.0
9. Global npm packages • npm outdated --global • npm ls --depth 0 --global 2>/dev/null
10. source code from live coding https://github.com/weekly-talks/alarm-typical-react
11. create-react-app • use `create-react-app` to create application skeleton ◦ setup instructions at https://github.com/facebookincubator/create-react-app • it is the first thing to do, even before initializing your local Git repository • check out hints on CRA output ◦ yarn start ◦ yarn test • yarn start ⛵
12. keep an eye on • yarn start output or DevTools console ◦ for warnings from internal ESLint, which checks for programming errors, not style • yarn test ◦ for results on incremental test runs ◦ it is even better in VS Code ▪ test results are shown inline https://github.com/orta/vscode-jest ◦ yarn test -- --coverage
13. Adding components to Storybook • Storybook is … ◦ a UI component dev environment for your app • setup Storybook ◦ follow instructions from https://getstorybook.io/ • create some components ◦ see next slides
14. create components • start from smoke test at Component.test.js ◦ it('renders without crashing', () => { … }); • implement presentational component with mocked data inside ◦ e.g. no props for now • add single story for it to Storybook
15. routing • https://github.com/ReactTraining/react-router ◦ View the docs > Web • LEARN ONCE, ROUTE ANYWHERE • react-router is at version 4.0 right now ◦ … yes, it means that API was changed again ;) • route to components directly, for now ◦ i.e. don't create containers • https://egghead.io/courses/add-routing-to-react-apps-using-react-router-v4 ◦ ! free for now, will be paid soon
16. time for controllers • create controller proxing to component • change routing ◦ i.e. reroute to controller • add props to component • pass mocked data from controller to component • add more stories to Storybook for that component • no redux or react-redux for now
17. Snapshot Test Case A typical snapshot test case for a mobile app • renders a UI component, • takes a screenshot, • then compares it to a reference image stored alongside the test. A similar approach can be taken when it comes to testing your React components.
18. Jest Snapshot Testing read guide import React from 'react'; import Link from '../Link.react'; import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer.create( <Link page="http://www.facebook.com">Facebook</Link> ).toJSON(); expect(tree).toMatchSnapshot(); });
19. snapshot file exports[`Link renders correctly 1`] = ` <a className="normal" href="http://www.facebook.com" onMouseEnter={[Function]} onMouseLeave={[Function]}> Facebook </a> `;
21. jest --updateSnapshot
22. Jest Snapshot Testing for Storybook https://github.com/storybooks/storyshots With StoryShots, you could use your existing Storybook stories as the input for Jest Snapshot Testing. When using `yarn test`... Press u to update failing snapshots.
23. type checking with Flow • it simplifies refactoring • because it allows to spot errors early • TK add reference to Flow talk from latest React Conf
24. adding Flow to the project • yarn add flow-bin -D • add flow script to package.json ◦ scripts: { "flow": "flow" } • ./node_modules/.bin/flow init
25. using flow • yarn run flow • use @flow to mark files requiring a typecheck ◦ never ever run flow check --all on a React (or any other project) with a lot of dependencies • configure your editor to show type checking errors ◦ personal preference: linter-flow package in Atom
26. Flow + React = ... https://flowtype.org/docs/react.html Flow isn't magic, you need to understand type theory and functional programming to get a lot of benefits ;)
27. Flow + Jest = friends • yarn global add flow-typed ◦ https://github.com/flowtype/flow-typed • flow-typed install jest@18.1.0 hint
28. Redux and useful functionality • read You Might Not Need Redux by Dan Abramov People often choose Redux before they need it. “What if our app doesn’t scale without it?” Later, developers frown at the indirection Redux introduced to their code. “Why do I have to touch three files to get a simple feature working?” Why indeed! • Redux offers a tradeoff.
29. Redux offers a tradeoff. It asks you to: • Describe application state as plain objects and arrays. • Describe changes in the system as plain objects. • Describe the logic for handling changes as pure functions. None of these limitations are required to build an app, with or without React.
30. … if you’re just learning React, don’t make Redux your first choice.
31. Thinking in React [...] don’t make Redux your first choice. Instead learn to think in React. https://facebook.github.io/react/docs/thinking-in-react.html Come back to Redux if you find a real need for it, or if you want to try something new. If you feel pressured to do things “the Redux way”, it may be a sign that you or your teammates are taking it too seriously.
32. Local state is fine. The tradeoff that Redux offers is to add indirection to decouple “what happened” from “how things change”. Is it always a good thing to do? No. It’s a tradeoff.
33. Should you use Redux? Probably not. That is, not unless you have a plan to benefit from this additional indirection. Having a plan is, in the parlance of our times, the . quote
34. make sure you get something in return Redux library itself is only a set of helpers to “mount” reducers to a single global store object. You can use as little, or as much of Redux, as you like. But if you trade something off, make sure you get something in return.
35. Weekly Talks: Redux March 29, in two weeks https://www.facebook.com/weekly.talks/
36. style guide • use external ESLint • use airbnb config ◦ follow instructions from https://www.npmjs.com/package/eslint-config-airbnb ▪ use yarn add -D instead of npm install ◦ export PKG=eslint-config-airbnb ◦ npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add "$PKG@latest" -D ◦ Add { "extends": "airbnb" } to your .eslintrc • create-react-app would use prettier for code formatting
37. recap • review ◦ README generated by create-react-app • read ◦ You Might Not Need Redux by Dan Abramov and ◦ Thinking in React originally by Pete Hunt • experiment and practice
38. React Conf 2017 • http://conf.reactjs.org/ • day 1: video, review • day 2: video, review ◦ e.g. reason-react
39. Welcome to Fight Club and thanks for joining!
40. First of all EXPERIMENT!