survivejs / react-book

From apprentice to master (CC BY-NC-ND)

SurviveJS - React

IMPORTANT! If you want to support the development of this book, you can purchase a copy at Leanpub. There's also a paperback available through Amazon (older book covering both Webpack and React).

This book shows you how to build a little Kanban application using React. During the process you will learn the basics and will be able to take the skills to your own projects. You can read the book online.

How to Use This Repository?

The repository has been split in two main parts: manuscript and project_source. You can find the freely available chapters under manuscript organized per chapter. project_source contains source associated to each chapter.

There is no single right way to approach the book. It depends on your experience level and interest. You can build the project from scratch by following the book or you can start from a specific stage. Just pick the source from previous chapter as your starting point.

Please note that the repository defaults to the dev branch of the book. master contains the source of the most recent version. Each version has been tagged so that it's easy for you to find the source matching to the version of the book you are reading.

Getting Support

As no book is perfect, you will likely come by issues and might have some questions related to the content. There are a couple of options to deal with this:

• Contact me through GitHub Issue Tracker
• Join me at Gitter Chat
• Follow @survivejs at Twitter for official news or poke me through @bebraw directly
• Send me email at [email protected]
• Ask me anything about Webpack or React at SurviveJS AmA

If you post questions to Stack Overflow, tag them using survivejs so I will get notified of them. You can also use the hashtag #survivejs at Twitter.

Announcements

I announce SurviveJS related news through a couple of channels:

• Mailing list
• Twitter
• Blog RSS

Feel free to subscribe.

Contributing

Feedback and PRs are welcome! See CONTRIBUTING.md for more information.

License

react-book's Issues

Add TOC widget to each site chapter

Ie. similar to http://yeswejekyll.com/.

Document repo usage

Ie. how to run projects and so on.

Mention JS AST Explorer

http://felix-kling.de/esprima_ast_explorer/

Implement rubbish bin for DnD example

react-dnd/react-dnd#112 (comment)

Bootstrap ReactJS and WebPack

You have a pretty good bit on CSS with your book, but Bootstrap in particular seems to be a pretty popular CSS framework with ReactJS. I found various bits of info on the net but could not get it to work with your configuration in the book and what I found. I installed the react-bootstrap plugin and can use the components, but the style stuff just keeps on giving me errors when including the various loaders and such. It would be great if you could add this one last section around reactjs bootstrap and webpack to your styling chapter. Or just point me to the right info to make it work. :)

bewidlered by constructor parameters

what is this?? I assume it's an ES6 thing but confused..

constructor(props: {
task: string;
onEdit: Function;
})

Make sure mobile version of the site looks good

Now there's some overlap etc. to take care of.

PDF generation failing w/ `npm start`

1. There's no mention or inclusion in package.json of the antwar-cli dependency. Wasn't enough to do just npm install and npm start to get going.

2. Once I installed antwar, things were able to get kicked off with npm start, but it seems to hang...

   I get stuck here:

     [624] (webpack)/hot/log-apply-result.js 813 bytes {0} [built]
     [625] /usr/local/lib/~/antwar-cli/~/antwar/paths.js 2.7 kB {0} [built]
     [628] template of 291 referencing  322 bytes {0} [not cacheable] [built]
     [629] template of 293 referencing  2.49 kB {0} [not cacheable] [built]
     [630] template of 295 referencing  1.87 kB {0} [not cacheable] [built]
     [631] template of 298 referencing  622 bytes {0} [not cacheable] [built]
        + 2 hidden modules
   webpack: bundle is now VALID.

Just a heads up. Anyway, this is of course an awesome resource. Thank you for sharing it with the community!

Figure out how to deal with `merge` neatly

Current implementation depends on lodash. Maybe it would make sense to push the merge function into some utility library or rewrite without lodash (or both).

Preprocess tips and warnings for the site

Now they look a bit funky. Need to preprocess these into proper divs with easy to style classes.

Add placeholder for DnD

shouldn't be a big deal to add a CSS class to hide it while being dragged

Debugging Chapter

Given eventually something breaks it would be a good idea to provide some tips for common scenarios and how to approach them. For instance a dependency can get broken and so on.

Related to #28 and #57.

Provide some nice way to reset @persist state

If you mess up app structure somehow it's possible to end up in a situation where the app won't run due to persistency and it takes some effort to clean it up.

Mention Twitter account at intro

Discuss how to deploy the Kanban app into production

Related to chapter 11. Need to show whole pipeline and how things go together.

GraphQL/Relay Chapter

Way too early for this but better have a stub here.

Run Lint script in OS X Error

Source code for Chapter 03
Running npm run lint

in case if Lint finds nothing - ok
in case if Lint finds errors:

config/build.js
  1:1  error  Newline required at end of file but not found  eol-last

✖ 1 problem (1 error, 0 warnings)


npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "lint"
npm ERR! node v0.12.2
npm ERR! npm  v2.7.4
npm ERR! code ELIFECYCLE
npm ERR! [email protected] lint: `eslint . --ext .js --ext .jsx`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] lint script 'eslint . --ext .js --ext .jsx'.
npm ERR! This is most likely a problem with the kanban_app package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     eslint . --ext .js --ext .jsx
npm ERR! You can get their info via:
npm ERR!     npm owner ls kanban_app
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/xxx/samples/webpack_react/project_source/03_developing_with_webpack/kanban_app/npm-debug.log

if I run eslint directly without script eslint . - goes fine
looks like some script - OS X related problem

0 info it worked if it ends with ok
1 verbose cli [ 'node', '/usr/local/bin/npm', 'run', 'lint' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prelint', 'lint', 'postlint' ]
5 info prelint [email protected]
6 info lint [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec lint script
9 verbose stack Error: [email protected] lint: `eslint . --ext .js --ext .jsx`
9 verbose stack Exit status 1
9 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16)
9 verbose stack     at EventEmitter.emit (events.js:110:17)
9 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:14:12)
9 verbose stack     at ChildProcess.emit (events.js:110:17)
9 verbose stack     at maybeClose (child_process.js:1015:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
10 verbose pkgid [email protected]
11 verbose cwd /Users/xxx/samples/webpack_react/project_source/03_developing_with_webpack/kanban_app
12 error Darwin 14.3.0
13 error argv "node" "/usr/local/bin/npm" "run" "lint"
14 error node v0.12.2
15 error npm  v2.7.4
16 error code ELIFECYCLE
17 error [email protected] lint: `eslint . --ext .js --ext .jsx`
17 error Exit status 1
18 error Failed at the [email protected] lint script 'eslint . --ext .js --ext .jsx'.
18 error This is most likely a problem with the kanban_app package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error     eslint . --ext .js --ext .jsx
18 error You can get their info via:
18 error     npm owner ls kanban_app
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

Explain why Alt was chosen instead of some other Flux implementation

The other biggest question mark for me came at the part where Alt was introduced. A little more explanation of why to use Alt vs other flux implementations and what functionality comes from using it would be nice

Need to go through basic functionalities of various implementations here. Maybe show how to implement Flux yourself?

Chapter 6 - Explain how to convert HOCs into decorators

It may make sense to discuss HOCs here. Now the code looks a bit iffy at the end due to HOCs.

Testing Chapter

I'm gathering some ideas for the testing chapter here. I'll cover at least:

• Jest - There's no nice loader for Jest yet. jest-webpack is relevant, though.
• mocha-loader - Mocha should be much faster than Jest and it works with React too after some tweaking
• Coverage testing
• rewire
• tap and tape
• substack on testing

Other ideas?

Colors

would be great to know how to get the colors back for the output from scripts

Discuss how to debug Alt (Flux)

Figure out how to make package.json scripts work on Windows

Ideally there should be some cross-platform way to achieve this.

Related to f2f4b35#commitcomment-11029492 .

Redux Chapter

Show how to go from Alt to Redux and how the approaches differ.

Clarify eslint section

nzakas: The one thing that isn't quite clear is that the ability to change rule options inline is only a global setting, so you can't change rule options just for specific areas of code

ilyavolodin: Whenever there's a comparison between ESLint and other linters the emphasis is always on ability to write your own rules (which is the biggest difference, true), but there are other advantages that ESLint has, like clear documentation for every existing rule, and ability to turn on/off absolutely everything, as well as pluggable parsers/reporters as well. Feels like those advantages gets overlooked a lot.

ilyavolodin: Btw, I don't remember this off the top of my head for sure, but node_modules are ignored by default (pretty sure about that)

ilyavolodin: Also, you might want to mention warrning vs. error in .eslintrc

me: include or exclude? inclusion feels cleaner than having .eslintignore, need to investigate

Discuss pros/cons of various configuration approaches in detail

Ie. separate files, merged config, config pushed to library and so on.

Push baobab Notes to root level?

Possible structure (thanks to @gaearon):

lanesById: { // { laneId -> lane }
  1: { id: 1, name: 'Lane' },
  2: { id: 2, name: 'Other Lane' }
},
notesById: { // { noteId -> note }
  1: { id: 1, name: 'Note' },
  2: { id: 2, name: 'Other Note' },
  3: { id: 3, name: 'Yet Another Note' },
},
laneOrder: [2, 1], // [laneId*]
noteOrder: { // { laneId -> [noteId*] }
  1: [2, 1],
  2: [3]
}

I need to see if facets can be used to provide a nicer API and hide id stuff from components. I wonder if those are dynamic enough.

Performance Chapter

There should be a chapter to cover various performance tricks. I suppose both Webpack and React could be covered. In case of Webpack I can show how to speed up build using various techniques. There's a little bit about this at the book already but there can be much more.

When it comes to React it would be a good idea to show how to measure performance and what to do about the slow bits. Reference:

• Performance Tools - official documentation
• react-render-visualizer
• react-mixin-transformer
• render-flash-mixin - Port to a decorator?
• react-pure-render - PureRenderMixin ported to ES6/ES7 world

This would be a good place to discuss React rendering in more detail. Understanding that helps in improving performance when it's needed.

Implement edit for lane names

ESLint peer dependency issue

Looks like theres a conflict between eslint-plugin-react and eslint. I had to specify "eslint": "0.23.0", in my package.json to get passed the peer dependency error.

I don't know if you want to specify versions in the book or not, but it might help get around some of these issues in the future.

Errors running chapter 8

When I do npm install in the chapter 8 code and then npm start, I get the following. This has been dogging me in my own version of the code as well. Is there a Lane somewhere else?

ERROR in ./app/components/Lane.jsx

/Users/aries/Workspace/webpack_react/project_source/08_kanban_style/kanban_app/app/components/Lane.jsx
  14:21  error  Lane is already declared in the upper scope  no-shadow

✖ 1 problem (1 error, 0 warnings)


ERROR in ./app/components/Notes.jsx

/Users/aries/Workspace/webpack_react/project_source/08_kanban_style/kanban_app/app/components/Notes.jsx
  14:21  error  Notes is already declared in the upper scope  no-shadow

✖ 1 problem (1 error, 0 warnings)

html-webpak-plugin templates

Hi,

I just came across this repo and saw that you are preferring setting all scripts/links using blueimp over the inject option.
Is there a specific reason for it because I believe that the inject options simplifies the app development a lot?

https://github.com/survivejs/webpack_react/blob/master/project_source/05_webpack_and_react/kanban_app/app/index.tpl

Could easily be

https://github.com/ampedandwired/html-webpack-plugin/blob/master/default_inject_index.html

06 - Think about @persist

If the browser crashes or the PC closes, the persistence will not work.

This can be discussed in more detail. Perhaps one way would be to show how to connect to a store and other approaches.

Allow lanes to be swapped by dragging from headers

https://github.com/gaearon/react-dnd/tree/dnd-core/examples/_customize-handles

Write about design patterns for React

Thx! Maybe someone (or we) should create a website with small snippets of code use cases in React. Not entire applications but small snippets for everything (hiding something, filtering an element, etc., without strict organization but with tags for searching maybe. I realize this when I am stuck on simple things (like the above). I understand that this was more ES6 thing, but the fact of JSX intermingling with code makes me always feel that I do not do something correct.

Need to show how to achieve basic things and compose in React.

Cover function variants briefly

Looks like these can cause some confusion. Ie. () => ..., () => {...} and so on.

Customizing ESlint

This section doesn't make much sense to me - how where do these customisations get applied?

i18n/l10n/a11y Chapter

This is an advanced topic. It would be good to discuss various available libraries such as react-a11y and basic approaches to i18n. Webpack's i18n-webpack-plugin should be discussed.

Discuss React component lifecycle

This is an important topic that often gets missed but that's very important to understand.

Rename `npm run dev` to `npm start` for better dev experience

Isomorphism Chapter

The Node example is good but it would be a good idea to cover perhaps some other options.

Figure out how to make React Dev Tools work at Chrome

From #9.

I know this is completely irrelevant: I am using your code (from this example 06) for trying to learn and I added the "React Dev Tools for Chrome" to debug, etc.

However, the "Top Level" continuously refreshes inside React Tools. So I cannot do anything debug-wise! It appears as if it is created and re-created continuously. Do you have any idea what the case may be? Thanks!

Getting error in DragManager

Hi-
Wanted to see the end result, so jumped to project_source/08_polishing_kanban/kanban_app, do npm run dev, get this at DragDropManager:30 ("this.backend = createBackend(this);")
Uncaught TypeError: undefined is not a function

Thanks -- looking forward to checking out this book and recommending it to team members!

Update Baobab example to use validation function

https://github.com/Yomguithereal/baobab#options

Misc. @kevinflo feedback

Last few things I thought would be nice in the book were a discussion of when/why to use es6/es5, where/how to handle requests to external APIs, some discussion of isomorphism, and how to handle auth with components. A lot to ask I know but those are just the things I'm still trying to figure out/learn with flux

Need to split this up into separate issues. Just opening this one to track.

Host demos for each chapter on the site

Check Kanban app on Safari (private mode)

Expand Alt discussion to show how to use multiple Stores?

A recommendation for your great book: I would love to see you using 2 stores, for example add 1 store for UI management or user management
For example, if I have a panel with checkboxes (options), like "[ ] Color of Notes [ ] BG Color of Notes" , etc... you get the point
These options affect the "drawing/viewing" of the notes but NOT the DATA of notes themselves.
It is a good "separation of concern" example and will clarify to all of us what best practices to use.

Maybe make it with 3 stores, add another one for "user management" (i.e. my name, my login info, address, etc.)
Not something complicated for you to write, just a way for us (readers) to see how 3 stores can be independent and affect the application.
The goal would be that if I read your book and use your code, I would be able to develop an app that has user management, options management (UI) and actual rendering/manipulation of the data based on UI actions.
Which will be a great "boilerplate" for ALT applications.

This could work for the styling chapter.

Explain the process of "session state", login/logout, with ReactJS, SPA

You may cover this topic, not entirely sure, but one other area of confusion for me around SPA in general, but ReactJS in particular is handling login, logout, and maintaining session state. In particular, if a user's browser closes (accidentally, crashes, etc), and the user then restarts it and goes back to the site.. they should remain logged in. How does a ReactJS application manage the state, and return the user to where they were within the application?

This topic could also be applied to something similar, like a web cart... back in the day, web carts typically stored data in HttpSession on the server side, but today with our stateless Rest APIs and Ajax requests, how would a SPA and in this case ReactJS application maintain state across requests, browser restarts, etc.

04 chapter

This will get problematic with our import TodoItem from './TodoItem'; statement.

Todo is mentioned for the first and the last time.

Through out the chapter it was difficult to understand where to insert some code into the Config. Code examples should be easier to understand.