On windows it seems impossible to run the npm scripts. It looks like this has to do with the paths in the scripts in package.json.

Error:

'..' is not recognized as an internal or external command, operable program or batch file.

npm ERR! Windows_NT 10.0.10586 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build" npm ERR! node v4.4.7 npm ERR! npm v2.15.8 npm ERR! code ELIFECYCLE npm ERR! [email protected] build: ../../node_modules/.bin/browserify ./src/app.jsx -o ./public/app.js -t babelify npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build script '../../node_modules/.bin/browserify ./src/app.jsx -o ./public/app.js -t babelify'. npm ERR! This is most likely a problem with the react-app package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! ../../node_modules/.bin/browserify ./src/app.jsx -o ./public/app.js -t babelify npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs react-app npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm ERR! npm owner ls react-app npm ERR! There is likely additional logging output above.

I found a very old issue with the same problem: https://github.com/npm/npm/issues/2576

The solution, removing the path, is not working of course. This has to do with the folder structure used in this repo.

npm-debug.log

_0 info it worked if it ends with ok 1 verbose cli [ 'C:\Program Files\nodejs\node.exe', 1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'build' ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info prebuild [email protected] 6 info build [email protected] 7 verbose unsafe-perm in lifecycle true 8 info [email protected] Failed to exec build script 9 verbose stack Error: [email protected] build: browserify ./src/app.jsx -o ./public/app.js -t babelify 9 verbose stack Exit status 1 9 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:217:16) 9 verbose stack at emitTwo (events.js:87:13) 9 verbose stack at EventEmitter.emit (events.js:172:7) 9 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14) 9 verbose stack at emitTwo (events.js:87:13) 9 verbose stack at ChildProcess.emit (events.js:172:7) 9 verbose stack at maybeClose (internal/child_process.js:827:16) 9 verbose stack at Process.ChildProcess.handle.onexit (internal/child_process.js:211:5) 10 verbose pkgid [email protected] 11 verbose cwd D:\Workspaces\Git\react-in-patterns\patterns\composition 12 error Windows_NT 10.0.10586 13 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build" 14 error node v4.4.7 15 error npm v2.15.8 16 error code ELIFECYCLE 17 error [email protected] build: browserify ./src/app.jsx -o ./public/app.js -t babelify 17 error Exit status 1 18 error Failed at the [email protected] build script 'browserify ./src/app.jsx -o ./public/app.js -t babelify'. 18 error This is most likely a problem with the react-app package, 18 error not with npm itself. 18 error Tell the author that this fails on your system: 18 error browserify ./src/app.jsx -o ./public/app.js -t babelify 18 error You can get information on how to open an issue for this project with: 18 error npm bugs react-app 18 error Or if that isn't available, you can get their info via: 18 error 18 error npm owner ls react-app 18 error There is likely additional logging output above. 19 verbose exit [ 1, true ]

Hi,

I fund this repo on twitter because some users mentioned InversifyJS I keep an eye on mentions to InversifyJS because I'm it main author.

Would you be interested in adding examples to the dependency-injection page about DI in react powered by InversifyJS?

You can find some real use cases here and here.

If you think you would like it I can prepare a PR.

Thanks!

In 'One-way direction data flow', Store provides subscription for change. Does Store also need to implement unsubscription for component App to call it inside componentWillUnmount to unsubscribe?

Hi mates

I really excited and wanna translate this repo to Vietnamese for help our React developer community in Vietnam Can i create new pull request or fork new repo 💃

In the High-order example, it seems we forget to return the enhanced component.

var enhanceComponent = (Component) => {
  class Enhance extends React.Component {
    render () {
      return (
        <Component {...this.props} />
      )
    }
  }
  
  // should we return the component here?
  return Enhance;
}

There was a broken link in the Dependency injection section - higher-order component which links to this broken link https://github.com/krasimir/react-in-patterns/tree/master/patterns/higher-order-components.

Is it means the this link? https://krasimir.gitbooks.io/react-in-patterns/content/chapter-4/#higher-order-component

I recently read your book and I really like it! I spotted some grammar issues and typos here and there. These commits fix the ones I found. Also some parts sounded a bit weird, I corrected these aswell.

I'm sure though that there are more typos/grammar issues that I overlooked so I definitely suggest that you run this through a tool like Word that helps you in finding the issues and fixing them. It would make the reading experience a lot more pleasant.

When I use a JSX expression as children, I got the warning..

...
const record = {
      title: 'foo',
      status: 'bar',
};
return (
  <Record>{record}</Record>
);

warning is like this:

Warning: Failed prop type: Invalid prop `children` of type `object` supplied to `Record`, expected a single ReactElement.

React version is 16.2.0 can you help me??

Refering to : https://github.com/krasimir/react-in-patterns/tree/master/patterns/children-in-jsx

I think:

        <i className='something-else'>
          { props.children }
        </i>

Should be :

        <i className='something-else' children={children}/>

Note that they are not equivalent. First one creates new children with a single item, the second one reuses the children. I've heard issues with the first pattern e.g. keys/ids confused React. Don't have an issue report as the second syntax fixed it :rose:

Hi Saw your repo on Hacker News; Wanted to help a bit

• Changed the onClick on the communication patter files to not bind on every click but use it on constructor (it is considered a good practice)
• Changed the order of the methods, render should be the last method called in a react component, handlers and other things should be up.
• Remove extra spaces on curly braces and so (this will help if you consider adding ESLint to the flow later)

React has moved the mixins content to this link instead https://reactjs.org/docs/react-without-es6.html#mixins. Should we update it to the new one instead.

Great book, thank you for writing it!

I've noticed that the GitBook links no longer work - none of the downloadable options work and neither is the link in the "About" section. Can still read everything on here, obviously, but perhaps these can be fixed as I understand GitBook has gone through some major changes recently but is still free for personal projects. Alternatively, there is a free GitBook-inspired option you could move the book to: https://github.com/filipowm/BooGi .

The second section of Chapter 10 reads:

Using React's context (prior v. 16.3)

Since prior is an adjective (or noun), one of these would probably read better for the part in parentheses:

1. prior to v. 16.3
2. below v. 16.3 (this would align with "v. 16.3 and above" in the next section)
3. before v. 16.3

Whichever change is chosen, the same change would be needed in Chapter 10 itself (book/chapter-10/README.md), the Summary (book/SUMMARY.md), and the Content section of the repo readme (README.md).

I didn't see a mention of Flux Util's(https://facebook.github.io/flux/docs/flux-utils.html) which seems like one of the least boilerplate implementations of Flux, and provided by facebook.

You allude to this kind of solution in "Using a helper", but dismiss it because "may decide to switch to another Flux provider". That rationale is quite bizarre, I think 99.99% of applications will not be, and should not be, switching Flux providers.

Would like to hear your opinion on using Flux-Util's ReduceStore with Containers

Use String.fromCharCode() for special characters.

// bad
<div>John · Doe</div>

// nope
<div>John &middot; Doe</div>

// good
<div>{'John ' + String.fromCharCode(183) + ' Doe'}</div>

// better
<div>{`John ${String.fromCharCode(183)} Doe`}</div>

// Unicode
<i data-icon={String.fromCharCode(0xf00f)} />

// or if you have it as a string for some reason
<i data-icon={String.fromCharCode(parseInt('f00f', 16))} />

I've created a gist that shows how DI could be solved for cases using only React features: https://gist.github.com/topa/efd6b170e18bda579aa751c5164f9211.

Do you think this could be also a valid approach?

This won't work with isomorphic apps as you'll have to initialize .getAppLocale() while bootstrapping the app either on server (e.g. in express Apps req.locale ) as on client (using window.navigator).