diff --git a/docs/docs/installation.md b/docs/docs/installation.md index 0039fc7750..15da2f4d17 100644 --- a/docs/docs/installation.md +++ b/docs/docs/installation.md @@ -99,6 +99,10 @@ By default, React includes many helpful warnings. These warnings are very useful If you use [Create React App](https://github.com/facebookincubator/create-react-app), `npm run build` will create an optimized build of your app in the `build` folder. +#### Brunch + +To create an optimized production build with Brunch, just add the `-p` flag to the build command. See the [Brunch docs](http://brunch.io/docs/commands) for more details. + #### Webpack Include both `DefinePlugin` and `UglifyJsPlugin` into your production Webpack configuration as described in [this guide](https://webpack.js.org/guides/production-build/). diff --git a/docs/docs/optimizing-performance.md b/docs/docs/optimizing-performance.md index fe1d93077a..86acb8cdb7 100644 --- a/docs/docs/optimizing-performance.md +++ b/docs/docs/optimizing-performance.md @@ -13,6 +13,7 @@ If you're benchmarking or experiencing performance problems in your React apps, * For Create React App, you need to run `npm run build` and follow the instructions. * For single-file builds, we offer production-ready `.min.js` versions. +* For Brunch, you need to add the `-p` flag to the `build` command. * For Browserify, you need to run it with `NODE_ENV=production`. * For Webpack, you need to add this to plugins in your production config: diff --git a/docs/docs/refs-and-the-dom.md b/docs/docs/refs-and-the-dom.md index eaf19e7b39..85a0429eb4 100644 --- a/docs/docs/refs-and-the-dom.md +++ b/docs/docs/refs-and-the-dom.md @@ -145,7 +145,7 @@ function CustomTextInput(props) { Your first inclination may be to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. See the [Lifting State Up](/react/docs/lifting-state-up.html) guide for examples of this. -### Legacy API: String Refs +### Legacy API: String Refs If you worked with React before, you might be familiar with an older API where the `ref` attribute is a string, like `"textInput"`, and the DOM node is accessed as `this.refs.textInput`. We advise against it because string refs have [some issues](https://github.com/facebook/react/pull/8333#issuecomment-271648615), are considered legacy, and **are likely to be removed in one of the future releases**. If you're currently using `this.refs.textInput` to access refs, we recommend the callback pattern instead. diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json index cc109e1001..5de1a7d4b8 100644 --- a/fixtures/dom/package.json +++ b/fixtures/dom/package.json @@ -6,9 +6,11 @@ "react-scripts": "0.8.4" }, "dependencies": { + "classnames": "^2.2.5", "query-string": "^4.2.3", "react": "^15.4.1", - "react-dom": "^15.4.1" + "react-dom": "^15.4.1", + "semver": "^5.3.0" }, "scripts": { "start": "react-scripts start", diff --git a/fixtures/dom/src/components/Fixture.js b/fixtures/dom/src/components/Fixture.js new file mode 100644 index 0000000000..1f6ef9ba09 --- /dev/null +++ b/fixtures/dom/src/components/Fixture.js @@ -0,0 +1,21 @@ +const React = window.React; + +const propTypes = { + children: React.PropTypes.node.isRequired, +}; + +class Fixture extends React.Component { + render() { + const { children } = this.props; + + return ( +
+ {children} +
+ ); + } +} + +Fixture.propTypes = propTypes; + +export default Fixture diff --git a/fixtures/dom/src/components/FixtureSet.js b/fixtures/dom/src/components/FixtureSet.js new file mode 100644 index 0000000000..9c6e8581eb --- /dev/null +++ b/fixtures/dom/src/components/FixtureSet.js @@ -0,0 +1,28 @@ +import React from 'react'; + +const propTypes = { + title: React.PropTypes.node.isRequired, + description: React.PropTypes.node.isRequired, +}; + +class FixtureSet extends React.Component { + + render() { + const { title, description, children } = this.props; + + return ( +
+

{title}

+ {description && ( +

{description}

+ )} + + {children} +
+ ); + } +} + +FixtureSet.propTypes = propTypes; + +export default FixtureSet diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js index fb9d143f0f..83f77eee31 100644 --- a/fixtures/dom/src/components/Header.js +++ b/fixtures/dom/src/components/Header.js @@ -1,4 +1,5 @@ import { parse, stringify } from 'query-string'; +import getVersionTags from '../tags'; const React = window.React; const Header = React.createClass({ @@ -9,13 +10,12 @@ const Header = React.createClass({ return { version, versions }; }, componentWillMount() { - fetch('https://api.github.com/repos/facebook/react/tags', { mode: 'cors' }) - .then(res => res.json()) + getVersionTags() .then(tags => { let versions = tags.map(tag => tag.name.slice(1)); - versions = ['local', ...versions]; + versions = [`local`, ...versions]; this.setState({ versions }); - }); + }) }, handleVersionChange(event) { const query = parse(window.location.search); @@ -46,6 +46,7 @@ const Header = React.createClass({ +