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))} />

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

React's context prior to 16.3 is undocumented and not recommended by Facebook. But you don't warn the reader of this until the start of the Using React's context (v. 16.3 and above) section, by which time they may well have worked their way through that prior v. 16.3 section, and would now be wondering "why did I just waste my time learning that?"

I think you need add a warning at the start of the prior v. 16.3 section.

The sorting of the chapters currently is like this:

chapter-1
chapter-10
chapter-11
chapter-12
chapter-13
chapter-2
chapter-3
...

This doesn't feel natural. If the chapters with a number below 10 had a leading zero it would be sorted in the correct way:

chapter-01
chapter-02
chapter-03
chapter-04
...
chapter-09
chapter-10
...

So I suggest that all chapters below 10 get a leading zero added before their number.

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 🌹

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:
npm/npm#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 ]

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).

The title says it all.. If you don't find time, let me know I can work on the week end :)

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).

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?

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??

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 💃

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

If you click next page on https://krasimir.gitbooks.io/react-in-patterns/content/chapter-2/#output it takes you back to https://krasimir.gitbooks.io/react-in-patterns/content/chapter-2/#input

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;
}

If you read from a printed version of this book then feel free to use a pen ¯\(ツ)/¯

CHANGE TO:

If you are reading from a printed version of this book then feel free to use a pen ¯\(ツ)/¯

Love the book so far!

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.

Hi This book is quite awesome!
If it's OK to let me translate it into Chinese?
Just want to share this with more people.

Night Theme : Search Results Content's Text Color issue

In Night Theme, the contents for the Left Nav options were visible but for the Search Results, For Every Results the Heading is visible by dark blue, but its content were hard to see.
Check the below Attachment!

This is not a good example:

var OriginalComponent = () => <p>Hello world.</p>;

class App extends React.Component {
  render() {
    return React.createElement(enhanceComponent(OriginalComponent));
  }
};

It is slow and blows away the DOM and state completely in all components below OriginalComponent because enhanceComponent(OriginalComponent) gives you a different type every time you render().

Here’s how to fix:

var OriginalComponent = () => <p>Hello world.</p>;
var EnhancedComponent = enhanceComponent(OriginalComponent);

class App extends React.Component {
  render() {
    return React.createElement(EnhancedComponent);
  }
};

The trick? We do this just once, so render() always returns the same type of EnhancedComponent.

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!

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 .

ESLint is a great way to enforce coding standards; I recommend using the Airbnb configuration for this. Later tonight I will see if I can send you a PR to add it.