├── .editorconfig ├── .gitattributes ├── .gitignore ├── .jshintrc ├── .mailmap ├── .travis.yml ├── AUTHORS ├── CHANGELOG.md ├── CONTRIBUTING.md ├── Gruntfile.js ├── LICENSE ├── README.md ├── bin ├── jsx └── jsx-internal ├── docs ├── 404.md ├── Gemfile ├── Gemfile.lock ├── README.md ├── Rakefile ├── _config.yml ├── _css │ ├── _solarized.scss │ ├── _typography.scss │ ├── _variables.scss │ └── bourbon │ │ ├── _bourbon-deprecated-upcoming.scss │ │ ├── _bourbon.scss │ │ ├── addons │ │ ├── _button.scss │ │ ├── _clearfix.scss │ │ ├── _directional-values.scss │ │ ├── _ellipsis.scss │ │ ├── _font-family.scss │ │ ├── _hide-text.scss │ │ ├── _html5-input-types.scss │ │ ├── _position.scss │ │ ├── _prefixer.scss │ │ ├── _retina-image.scss │ │ ├── _size.scss │ │ ├── _timing-functions.scss │ │ ├── _triangle.scss │ │ └── _word-wrap.scss │ │ ├── css3 │ │ ├── _animation.scss │ │ ├── _appearance.scss │ │ ├── _backface-visibility.scss │ │ ├── _background-image.scss │ │ ├── _background.scss │ │ ├── _border-image.scss │ │ ├── _border-radius.scss │ │ ├── _box-sizing.scss │ │ ├── _calc.scss │ │ ├── _columns.scss │ │ ├── _filter.scss │ │ ├── _flex-box.scss │ │ ├── _font-face.scss │ │ ├── _font-feature-settings.scss │ │ ├── _hidpi-media-query.scss │ │ ├── _hyphens.scss │ │ ├── _image-rendering.scss │ │ ├── _keyframes.scss │ │ ├── _linear-gradient.scss │ │ ├── _perspective.scss │ │ ├── _placeholder.scss │ │ ├── _radial-gradient.scss │ │ ├── _transform.scss │ │ ├── _transition.scss │ │ └── _user-select.scss │ │ ├── functions │ │ ├── _assign.scss │ │ ├── _color-lightness.scss │ │ ├── _flex-grid.scss │ │ ├── _golden-ratio.scss │ │ ├── _grid-width.scss │ │ ├── _modular-scale.scss │ │ ├── _px-to-em.scss │ │ ├── _px-to-rem.scss │ │ ├── _strip-units.scss │ │ ├── _tint-shade.scss │ │ ├── _transition-property-name.scss │ │ └── _unpack.scss │ │ ├── helpers │ │ ├── _convert-units.scss │ │ ├── _gradient-positions-parser.scss │ │ ├── _is-num.scss │ │ ├── _linear-angle-parser.scss │ │ ├── _linear-gradient-parser.scss │ │ ├── _linear-positions-parser.scss │ │ ├── _linear-side-corner-parser.scss │ │ ├── _radial-arg-parser.scss │ │ ├── _radial-gradient-parser.scss │ │ ├── _radial-positions-parser.scss │ │ ├── _render-gradients.scss │ │ ├── _shape-size-stripper.scss │ │ └── _str-to-num.scss │ │ └── settings │ │ ├── _asset-pipeline.scss │ │ ├── _prefixer.scss │ │ └── _px-to-em.scss ├── _data │ ├── acknowledgements.yml │ ├── nav_docs.yml │ └── nav_tips.yml ├── _includes │ ├── blog_post.html │ ├── nav_blog.html │ └── nav_docs.html ├── _js │ ├── es5-sham.min.js │ ├── es5-shim.min.js │ ├── examples │ │ ├── hello.js │ │ ├── markdown.js │ │ ├── timer.js │ │ └── todo.js │ ├── html-jsx-lib.js │ ├── html-jsx.js │ ├── html5shiv.min.js │ ├── jsx-compiler.js │ └── live_editor.js ├── _layouts │ ├── default.html │ ├── docs.html │ ├── page.html │ ├── post.html │ ├── single.html │ └── tips.html ├── _plugins │ ├── header_links.rb │ └── highlight_lines.rb ├── _posts │ ├── 2013-06-02-jsfiddle-integration.md │ ├── 2013-06-05-why-react.md │ ├── 2013-06-12-community-roundup.md │ ├── 2013-06-19-community-roundup-2.md │ ├── 2013-06-21-react-v0-3-3.md │ ├── 2013-06-27-community-roundup-3.md │ ├── 2013-07-02-react-v0-4-autobind-by-default.md │ ├── 2013-07-03-community-roundup-4.md │ ├── 2013-07-11-react-v0-4-prop-validation-and-default-values.md │ ├── 2013-07-17-react-v0-4-0.md │ ├── 2013-07-23-community-roundup-5.md │ ├── 2013-07-26-react-v0-4-1.md │ ├── 2013-07-30-use-react-and-jsx-in-ruby-on-rails.md │ ├── 2013-08-05-community-roundup-6.md │ ├── 2013-08-19-use-react-and-jsx-in-python-applications.md │ ├── 2013-08-26-community-roundup-7.md │ ├── 2013-09-24-community-roundup-8.md │ ├── 2013-10-16-react-v0.5.0.md │ ├── 2013-10-29-react-v0-5-1.md │ ├── 2013-10-3-community-roundup-9.md │ ├── 2013-11-05-thinking-in-react.md │ ├── 2013-11-06-community-roundup-10.md │ ├── 2013-11-18-community-roundup-11.md │ ├── 2013-12-18-react-v0.5.2-v0.4.2.md │ ├── 2013-12-19-react-v0.8.0.md │ ├── 2013-12-23-community-roundup-12.md │ ├── 2013-12-30-community-roundup-13.md │ ├── 2014-01-02-react-chrome-developer-tools.md │ ├── 2014-01-06-community-roundup-14.md │ ├── 2014-02-05-community-roundup-15.md │ ├── 2014-02-15-community-roundup-16.md │ ├── 2014-02-16-react-v0.9-rc1.md │ ├── 2014-02-20-react-v0.9.md │ ├── 2014-02-24-community-roundup-17.md │ ├── 2014-03-14-community-roundup-18.md │ ├── 2014-03-19-react-v0.10-rc1.md │ ├── 2014-03-21-react-v0.10.md │ ├── 2014-03-28-the-road-to-1.0.md │ ├── 2014-04-04-reactnet.md │ ├── 2014-05-06-flux.md │ ├── 2014-05-29-one-year-of-open-source-react.md │ ├── 2014-06-27-community-roundup-19.md │ ├── 2014-07-13-react-v0.11-rc1.md │ ├── 2014-07-17-react-v0.11.md │ ├── 2014-07-25-react-v0.11.1.md │ ├── 2014-07-28-community-roundup-20.md │ ├── 2014-07-30-flux-actions-and-the-dispatcher.md │ ├── 2014-08-03-community-roundup-21.md │ ├── 2014-09-03-introducing-the-jsx-specification.md │ └── 2014-09-12-community-round-up-22.md ├── acknowledgements.md ├── blog │ ├── all.html │ └── index.html ├── css │ ├── codemirror.css │ ├── main.css │ ├── react.scss │ └── syntax.css ├── docs │ ├── 01-why-react.md │ ├── 01-why-react.zh-CN.md │ ├── 02-displaying-data.md │ ├── 02-displaying-data.zh-CN.md │ ├── 02.1-jsx-in-depth.md │ ├── 02.2-jsx-gotchas.md │ ├── 03-interactivity-and-dynamic-uis.md │ ├── 04-multiple-components.md │ ├── 05-reusable-components.md │ ├── 06-forms.md │ ├── 07-working-with-the-browser.md │ ├── 07.1-more-about-refs.md │ ├── 08-tooling-integration.md │ ├── 09-addons.md │ ├── 09.1-animation.md │ ├── 09.2-form-input-binding-sugar.md │ ├── 09.3-class-name-manipulation.md │ ├── 09.4-test-utils.md │ ├── 09.5-clone-with-props.md │ ├── 09.6-update.md │ ├── 09.7-pure-render-mixin.md │ ├── 09.8-perf.md │ ├── complementary-tools.md │ ├── examples.md │ ├── flux-overview.md │ ├── flux-todo-list.md │ ├── getting-started.md │ ├── getting-started.zh-CN.md │ ├── ref-01-top-level-api.md │ ├── ref-02-component-api.md │ ├── ref-03-component-specs.md │ ├── ref-04-tags-and-attributes.md │ ├── ref-05-events.md │ ├── ref-06-dom-differences.md │ ├── ref-07-special-non-dom-attributes.md │ ├── ref-08-reconciliation.md │ ├── thinking-in-react.md │ ├── tutorial.md │ └── videos.md ├── downloads.md ├── downloads │ ├── react-0.10.0-rc1.zip │ ├── react-0.10.0.zip │ ├── react-0.11.0-rc1.zip │ ├── react-0.11.0.zip │ ├── react-0.11.1.zip │ ├── react-0.3.0.zip │ ├── react-0.3.1.zip │ ├── react-0.3.2.zip │ ├── react-0.3.3.zip │ ├── react-0.4.0.zip │ ├── react-0.4.1.zip │ ├── react-0.4.2.zip │ ├── react-0.5.0.zip │ ├── react-0.5.1.zip │ ├── react-0.5.2.zip │ ├── react-0.8.0.zip │ └── react-0.9.0-rc1.zip ├── extractCode.js ├── favicon.ico ├── feed.xml ├── html-jsx.md ├── img │ ├── blog │ │ ├── animal-sounds.jpg │ │ ├── chatapp.png │ │ ├── dog-tutorial.png │ │ ├── first-look.png │ │ ├── flux-diagram.png │ │ ├── genesis_skeleton.png │ │ ├── guess_filter.jpg │ │ ├── jsx-compiler.png │ │ ├── kendoui.png │ │ ├── khan-academy-editor.png │ │ ├── landoflisp.png │ │ ├── lights-out.png │ │ ├── makona-editor.png │ │ ├── markdown_refactor.png │ │ ├── monkeys.gif │ │ ├── ngreact.png │ │ ├── om-backbone.png │ │ ├── propeller-logo.png │ │ ├── quiztime.png │ │ ├── react-browserify-gulp.jpg │ │ ├── react-dev-tools.jpg │ │ ├── react-diff-tree.png │ │ ├── react-draggable.png │ │ ├── react-hackathon.jpg │ │ ├── react-page.png │ │ ├── react-php.png │ │ ├── react-svg-fbp.png │ │ ├── reactive-bookmarklet.png │ │ ├── resistance-calculator.png │ │ ├── skills-matter.png │ │ ├── snake.png │ │ ├── steve_reverse.gif │ │ ├── sweet-jsx.png │ │ ├── thinking-in-react-components.png │ │ ├── thinking-in-react-mock.png │ │ ├── todomvc.png │ │ ├── turboreact.png │ │ ├── tutsplus.png │ │ ├── unite.png │ │ ├── weather.png │ │ ├── wolfenstein_react.png │ │ ├── xoxo2013.png │ │ └── xreact.png │ ├── docs │ │ ├── codewinds-004.png │ │ ├── javascript-jabber.png │ │ ├── perf-dom.png │ │ ├── perf-exclusive.png │ │ ├── perf-inclusive.png │ │ ├── perf-wasted.png │ │ └── thinking-in-react-tagtree.png │ ├── logo.svg │ ├── logo_og.png │ ├── logo_small.png │ ├── logo_small_2x.png │ └── noise.png ├── index.md ├── js │ ├── codemirror.js │ ├── javascript.js │ └── showdown.js ├── jsx-compiler.md ├── support.md └── tips │ ├── 01-introduction.md │ ├── 02-inline-styles.md │ ├── 03-if-else-in-JSX.md │ ├── 04-self-closing-tag.md │ ├── 05-maximum-number-of-jsx-root-nodes.md │ ├── 06-style-props-value-px.md │ ├── 07-children-props-type.md │ ├── 08-controlled-input-null-value.md │ ├── 09-componentWillReceiveProps-not-triggered-after-mounting.md │ ├── 10-props-in-getInitialState-as-anti-pattern.md │ ├── 11-dom-event-listeners.md │ ├── 12-initial-ajax.md │ ├── 13-false-in-jsx.md │ ├── 14-communicate-between-components.md │ ├── 15-expose-component-functions.md │ ├── 16-references-to-components.md │ └── 17-children-undefined.md ├── examples ├── README.md ├── ballmer-peak │ ├── ballmer_peak.png │ ├── example.js │ └── index.html ├── basic-commonjs │ ├── README.md │ ├── index.html │ ├── index.js │ └── package.json ├── basic-jsx-external │ ├── example.js │ └── index.html ├── basic-jsx-harmony │ └── index.html ├── basic-jsx-precompile │ ├── example.js │ └── index.html ├── basic-jsx │ └── index.html ├── basic │ └── index.html ├── jquery-bootstrap │ ├── css │ │ └── example.css │ ├── index.html │ ├── js │ │ └── app.js │ └── thirdparty │ │ ├── bootstrap.min.css │ │ └── bootstrap.min.js ├── jquery-mobile │ ├── README.md │ ├── index.html │ └── js │ │ └── app.js ├── server-rendering │ ├── README.md │ ├── jsapp │ │ ├── package.json │ │ └── src │ │ │ └── App.js │ ├── reactserver │ │ ├── package.json │ │ └── server.js │ └── webapp │ │ ├── index.php │ │ └── static │ │ └── NOTHING_HERE_YET ├── shared │ ├── css │ │ └── base.css │ └── thirdparty │ │ ├── console-polyfill.js │ │ ├── es5-sham.min.js │ │ ├── es5-shim.min.js │ │ └── jquery.min.js └── transitions │ ├── index.html │ └── transition.css ├── gem-react-source ├── lib │ └── react │ │ └── source.rb └── react-source.gemspec ├── grunt ├── config │ ├── browserify.js │ ├── compare_size.js │ ├── compress.js │ ├── copy.js │ ├── jshint.js │ ├── jsx.js │ ├── npm.js │ ├── populist.js │ ├── server.js │ ├── webdriver-all.js │ ├── webdriver-jasmine.js │ └── webdriver-perf.js └── tasks │ ├── browserify.js │ ├── coverage-parse.js │ ├── download-previous-version.js │ ├── gem-react-source.js │ ├── jsx.js │ ├── npm-react-tools.js │ ├── npm-react.js │ ├── npm.js │ ├── populist.js │ ├── release.js │ ├── sauce-tunnel.js │ ├── version-check.js │ ├── webdriver-all.js │ ├── webdriver-jasmine.js │ ├── webdriver-perf.js │ └── webdriver-phantomjs.js ├── jest ├── environment.js └── preprocessor.js ├── main.js ├── npm-react-tools └── README.md ├── npm-react ├── README.md ├── addons.js ├── package.json └── react.js ├── package.json ├── perf ├── index.html ├── lib │ ├── BrowserPerfRunnerApp.react.js │ ├── BrowserPerfRunnerContext.react.js │ ├── perf-test-runner.browser.js │ ├── todolist.browser.js │ └── todolist.html ├── runner.html └── tests │ ├── basic-div.js │ ├── basic-unmount.js │ ├── propTypes.js │ ├── renderComponent-basic.js │ ├── sanity.js │ ├── setState-callback-5.js │ ├── setState-callback.js │ ├── shouldComponentUpdate.js │ ├── todolist-add.js │ ├── todolist-do-stuff.js │ ├── todolist-edit.js │ └── todolist-mount.js ├── scripts └── authors ├── src ├── .jshintrc ├── addons │ ├── ReactComponentWithPureRenderMixin.js │ ├── ReactRAFBatchingStrategy.js │ ├── __tests__ │ │ └── update-test.js │ ├── link │ │ ├── LinkedStateMixin.js │ │ ├── ReactLink.js │ │ └── __tests__ │ │ │ ├── LinkedStateMixin-test.js │ │ │ └── ReactLinkPropTypes-test.js │ ├── transitions │ │ ├── ReactCSSTransitionGroup.js │ │ ├── ReactCSSTransitionGroupChild.js │ │ ├── ReactTransitionChildMapping.js │ │ ├── ReactTransitionEvents.js │ │ ├── ReactTransitionGroup.js │ │ └── __tests__ │ │ │ ├── ReactCSSTransitionGroup-test.js │ │ │ ├── ReactTransitionChildMapping-test.js │ │ │ └── ReactTransitionGroup-test.js │ └── update.js ├── browser │ ├── ClientReactRootIndex.js │ ├── ReactBrowserEventEmitter.js │ ├── ReactDOM.js │ ├── ReactPutListenerQueue.js │ ├── ReactReconcileTransaction.js │ ├── ReactTextComponent.js │ ├── ReactWithAddons.js │ ├── __tests__ │ │ ├── ReactBrowserEventEmitter-test.js │ │ ├── ReactDOM-test.js │ │ └── ReactWebWorker-test.js │ ├── eventPlugins │ │ ├── AnalyticsEventPluginFactory.js │ │ ├── BeforeInputEventPlugin.js │ │ ├── ChangeEventPlugin.js │ │ ├── CompositionEventPlugin.js │ │ ├── DefaultEventPluginOrder.js │ │ ├── EnterLeaveEventPlugin.js │ │ ├── MobileSafariClickEventPlugin.js │ │ ├── ResponderEventPlugin.js │ │ ├── SelectEventPlugin.js │ │ ├── SimpleEventPlugin.js │ │ ├── TapEventPlugin.js │ │ └── __tests__ │ │ │ ├── AnalyticsEventPlugin-test.js │ │ │ ├── EnterLeaveEventPlugin-test.js │ │ │ └── ResponderEventPlugin-test.js │ ├── server │ │ ├── ReactMarkupChecksum.js │ │ ├── ReactServerRendering.js │ │ ├── ReactServerRenderingTransaction.js │ │ ├── ServerReactRootIndex.js │ │ └── __tests__ │ │ │ └── ReactServerRendering-test.js │ ├── syntheticEvents │ │ ├── SyntheticClipboardEvent.js │ │ ├── SyntheticCompositionEvent.js │ │ ├── SyntheticDragEvent.js │ │ ├── SyntheticEvent.js │ │ ├── SyntheticFocusEvent.js │ │ ├── SyntheticInputEvent.js │ │ ├── SyntheticKeyboardEvent.js │ │ ├── SyntheticMouseEvent.js │ │ ├── SyntheticTouchEvent.js │ │ ├── SyntheticUIEvent.js │ │ ├── SyntheticWheelEvent.js │ │ └── __tests__ │ │ │ ├── SyntheticEvent-test.js │ │ │ └── SyntheticWheelEvent-test.js │ └── ui │ │ ├── React.js │ │ ├── ReactBrowserComponentMixin.js │ │ ├── ReactComponentBrowserEnvironment.js │ │ ├── ReactDOMComponent.js │ │ ├── ReactDOMIDOperations.js │ │ ├── ReactDOMSelection.js │ │ ├── ReactDefaultInjection.js │ │ ├── ReactEventListener.js │ │ ├── ReactInjection.js │ │ ├── ReactInputSelection.js │ │ ├── ReactMount.js │ │ ├── __tests__ │ │ ├── ReactDOMComponent-test.js │ │ ├── ReactDOMIDOperations-test.js │ │ ├── ReactEventListener-test.js │ │ ├── ReactMount-test.js │ │ ├── ReactMountDestruction-test.js │ │ └── ReactRenderDocument-test.js │ │ ├── dom │ │ ├── CSSProperty.js │ │ ├── CSSPropertyOperations.js │ │ ├── DOMChildrenOperations.js │ │ ├── DOMProperty.js │ │ ├── DOMPropertyOperations.js │ │ ├── Danger.js │ │ ├── HTMLDOMPropertyConfig.js │ │ ├── SVGDOMPropertyConfig.js │ │ ├── ViewportMetrics.js │ │ ├── __tests__ │ │ │ ├── CSSProperty-test.js │ │ │ ├── CSSPropertyOperations-test.js │ │ │ ├── DOMPropertyOperations-test.js │ │ │ ├── Danger-test.js │ │ │ └── getNodeForCharacterOffset-test.js │ │ ├── components │ │ │ ├── AutoFocusMixin.js │ │ │ ├── LinkedValueUtils.js │ │ │ ├── LocalEventTrapMixin.js │ │ │ ├── ReactDOMButton.js │ │ │ ├── ReactDOMForm.js │ │ │ ├── ReactDOMImg.js │ │ │ ├── ReactDOMInput.js │ │ │ ├── ReactDOMOption.js │ │ │ ├── ReactDOMSelect.js │ │ │ ├── ReactDOMTextarea.js │ │ │ ├── __tests__ │ │ │ │ ├── ReactDOMButton-test.js │ │ │ │ ├── ReactDOMInput-test.js │ │ │ │ ├── ReactDOMSelect-test.js │ │ │ │ └── ReactDOMTextarea-test.js │ │ │ └── createFullPageComponent.js │ │ ├── dangerousStyleValue.js │ │ ├── getEventCharCode.js │ │ ├── getEventKey.js │ │ ├── getEventModifierState.js │ │ ├── getEventTarget.js │ │ ├── getNodeForCharacterOffset.js │ │ ├── getTextContentAccessor.js │ │ ├── isEventSupported.js │ │ └── setInnerHTML.js │ │ └── getReactRootElementInContainer.js ├── core │ ├── ReactComponent.js │ ├── ReactCompositeComponent.js │ ├── ReactContext.js │ ├── ReactCurrentOwner.js │ ├── ReactDefaultBatchingStrategy.js │ ├── ReactDescriptor.js │ ├── ReactDescriptorValidator.js │ ├── ReactDoNotBindDeprecated.js │ ├── ReactEmptyComponent.js │ ├── ReactEventEmitterMixin.js │ ├── ReactInstanceHandles.js │ ├── ReactLegacyDescriptor.js │ ├── ReactMultiChild.js │ ├── ReactMultiChildUpdateTypes.js │ ├── ReactOwner.js │ ├── ReactPropTransferer.js │ ├── ReactPropTypeLocationNames.js │ ├── ReactPropTypeLocations.js │ ├── ReactPropTypes.js │ ├── ReactRootIndex.js │ ├── ReactStateSetters.js │ ├── ReactUpdates.js │ ├── __tests__ │ │ ├── ReactBind-test.js │ │ ├── ReactComponent-test.js │ │ ├── ReactComponentLifeCycle-test.js │ │ ├── ReactCompositeComponent-test.js │ │ ├── ReactCompositeComponentDOMMinimalism-test.js │ │ ├── ReactCompositeComponentError-test.js │ │ ├── ReactCompositeComponentMixin-test.js │ │ ├── ReactCompositeComponentSpec-test.js │ │ ├── ReactCompositeComponentState-test.js │ │ ├── ReactDescriptor-test.js │ │ ├── ReactIdentity-test.js │ │ ├── ReactInstanceHandles-test.js │ │ ├── ReactMultiChild-test.js │ │ ├── ReactMultiChildReconcile-test.js │ │ ├── ReactMultiChildText-test.js │ │ ├── ReactPropTransferer-test.js │ │ ├── ReactPropTypes-test.js │ │ ├── ReactStateSetters-test.js │ │ ├── ReactTextComponent-test.js │ │ ├── ReactUpdates-test.js │ │ ├── refs-destruction-test.js │ │ └── refs-test.js │ ├── instantiateReactComponent.js │ └── shouldUpdateReactComponent.js ├── event │ ├── EventConstants.js │ ├── EventPluginHub.js │ ├── EventPluginRegistry.js │ ├── EventPluginUtils.js │ ├── EventPropagators.js │ └── __tests__ │ │ ├── EventPluginHub-test.js │ │ └── EventPluginRegistry-test.js ├── package.json ├── test │ ├── ReactDefaultPerf.js │ ├── ReactDefaultPerfAnalysis.js │ ├── ReactPerf.js │ ├── ReactTestUtils.js │ ├── all.js │ ├── createHierarchyRenderer.js │ ├── getTestDocument.js │ ├── mock-modules.js │ ├── mock-timers.js │ ├── mocks.js │ ├── phantomjs-shims.js │ ├── reactComponentExpect.js │ └── worker.js ├── utils │ ├── CallbackQueue.js │ ├── LegacyImmutableObject.js │ ├── OrderedMap.js │ ├── PooledClass.js │ ├── ReactChildren.js │ ├── Transaction.js │ ├── __tests__ │ │ ├── LegacyImmutableObject-test.js │ │ ├── OrderedMap-test.js │ │ ├── PooledClass-test.js │ │ ├── ReactChildren-test.js │ │ ├── Transaction-test.js │ │ ├── accumulateInto-test.js │ │ ├── cloneWithProps-test.js │ │ ├── escapeTextForBrowser-test.js │ │ ├── joinClasses-test.js │ │ ├── keyMirror-test.js │ │ ├── memoizeStringOnly-test.js │ │ ├── onlyChild-test.js │ │ ├── sliceChildren-test.js │ │ └── traverseAllChildren-test.js │ ├── accumulate.js │ ├── accumulateInto.js │ ├── adler32.js │ ├── cloneWithProps.js │ ├── escapeTextForBrowser.js │ ├── flattenChildren.js │ ├── forEachAccumulated.js │ ├── isTextInputElement.js │ ├── joinClasses.js │ ├── keyMirror.js │ ├── memoizeStringOnly.js │ ├── mixInto.js │ ├── onlyChild.js │ ├── shallowEqual.js │ ├── sliceChildren.js │ └── traverseAllChildren.js └── vendor │ ├── core │ ├── CSSCore.js │ ├── ExecutionEnvironment.js │ ├── TouchEventUtils.js │ ├── camelize.js │ ├── camelizeStyleName.js │ ├── copyProperties.js │ ├── createArrayFrom.js │ ├── createNodesFromMarkup.js │ ├── dom │ │ ├── containsNode.js │ │ ├── focusNode.js │ │ ├── getActiveElement.js │ │ ├── getUnboundedScrollPosition.js │ │ ├── isNode.js │ │ └── isTextNode.js │ ├── emptyFunction.js │ ├── emptyObject.js │ ├── getMarkupWrap.js │ ├── hyphenate.js │ ├── hyphenateStyleName.js │ ├── invariant.js │ ├── keyOf.js │ ├── mapObject.js │ ├── merge.js │ ├── mergeDeep.js │ ├── mergeDeepInto.js │ ├── mergeHelpers.js │ ├── mergeInto.js │ ├── monitorCodeUse.js │ ├── nativeRequestAnimationFrame.js │ ├── requestAnimationFrame.js │ ├── toArray.js │ └── warning.js │ ├── immutable │ ├── Immutable.js │ └── ImmutableObject.js │ ├── performance │ ├── performance.js │ └── performanceNow.js │ ├── polyfill │ └── Object.es6.js │ └── stubs │ ├── EventListener.js │ ├── ReactErrorUtils.js │ └── cx.js ├── starter └── README.md ├── test ├── index.html └── lib │ ├── jasmine-execute.js │ ├── postDataToURL.browser.js │ └── reportTestResults.browser.js └── vendor ├── browser-transforms.js ├── constants.js ├── fbtransform ├── syntax.js ├── transforms │ ├── __tests__ │ │ ├── react-displayName-test.js │ │ └── react-test.js │ ├── react.js │ ├── reactDisplayName.js │ └── xjs.js └── visitors.js ├── jasmine-jsreporter └── jasmine-jsreporter.js └── jasmine ├── HtmlReporter.js ├── PrintReporter.js ├── ReporterView.js ├── SpecView.js ├── SuiteView.js ├── all.js ├── console.js ├── diff.js ├── jasmine-html.js ├── jasmine-support.js ├── jasmine.css ├── jasmine.js └── phantom.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 2 8 | indent_style = space 9 | max_line_length = 80 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | max_line_length = 0 14 | trim_trailing_whitespace = false 15 | 16 | [COMMIT_EDITMSG] 17 | max_line_length = 0 18 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE 2 | node_modules 3 | *~ 4 | *.pyc 5 | static 6 | .grunt 7 | _SpecRunner.html 8 | __benchmarks__ 9 | build/ 10 | .module-cache 11 | *.gem 12 | docs/code 13 | docs/_site 14 | docs/.sass-cache 15 | docs/js/* 16 | docs/downloads 17 | examples/shared/*.js 18 | test/the-files-to-test.generated.js 19 | *.log* 20 | chrome-user-data 21 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | 4 | "boss": true, 5 | "curly": true, 6 | "devel": true, 7 | "eqnull": true, 8 | "expr": true, 9 | "funcscope": true, 10 | "globalstrict": true, 11 | "loopfunc": true, 12 | "newcap": false, 13 | "noempty": true, 14 | "nonstandard": true, 15 | "onecase": true, 16 | "sub": true, 17 | "regexdash": true, 18 | "trailing": true, 19 | "undef": true, 20 | "unused": "vars" 21 | } 22 | -------------------------------------------------------------------------------- /bin/jsx: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | // -*- mode: js -*- 3 | "use strict"; 4 | 5 | var transform = require('../main').transform; 6 | 7 | require('commoner').version( 8 | require('../package.json').version 9 | ).resolve(function(id) { 10 | return this.readModuleP(id); 11 | }).option( 12 | '--harmony', 13 | 'Turns on JS transformations such as ES6 Classes etc.' 14 | ).option( 15 | '--strip-types', 16 | 'Strips out type annotations.' 17 | ).option( 18 | '--source-map-inline', 19 | 'Embed inline sourcemap in transformed source' 20 | ).process(function(id, source) { 21 | // This is where JSX, ES6, etc. desugaring happens. 22 | var options = { 23 | harmony: this.options.harmony, 24 | sourceMap: this.options.sourceMapInline, 25 | stripTypes: this.options.stripTypes 26 | }; 27 | return transform(source, options); 28 | }); 29 | -------------------------------------------------------------------------------- /docs/404.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: single 3 | title: Page Not Found 4 | --- 5 | 6 | We couldn't find what you were looking for. 7 | 8 | Please contact the owner of the site that linked you to the original URL and let them know their link is broken. 9 | -------------------------------------------------------------------------------- /docs/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'rake' 4 | 5 | # jekyll, which builds it all 6 | # 2.0 includes sass processing 7 | gem 'jekyll', '~>2.0' 8 | 9 | # Auto redirect pages 10 | gem 'jekyll-redirect-from' 11 | 12 | # JSON 13 | gem 'json' 14 | 15 | # For `rake watch` 16 | gem 'rb-fsevent' 17 | 18 | # For markdown header cleanup 19 | gem 'sanitize', '~>2.0' 20 | -------------------------------------------------------------------------------- /docs/Rakefile: -------------------------------------------------------------------------------- 1 | require('rubygems') 2 | require('json') 3 | require('yaml') 4 | 5 | desc "generate js from jsx" 6 | task :js do 7 | system "../bin/jsx _js js" 8 | end 9 | 10 | desc "watch js" 11 | task :watch do 12 | Process.spawn "../bin/jsx --watch _js js" 13 | Process.waitall 14 | end 15 | 16 | desc "update version to match ../package.json" 17 | task :update_version do 18 | react_version = JSON.parse(File.read('../package.json'))['version'] 19 | site_config = YAML.load_file('_config.yml') 20 | if site_config['react_version'] != react_version 21 | site_config['react_version'] = react_version 22 | File.open('_config.yml', 'w+') { |f| f.write(site_config.to_yaml) } 23 | end 24 | end 25 | 26 | desc "update acknowledgements list" 27 | task :update_acknowledgements do 28 | authors = File.readlines('../AUTHORS').map {|author| author.gsub(/ <.*\n/,'')} 29 | # split into cols here because nobody knows how to use liquid 30 | # need to to_f because ruby will keep slice_size as int and round on its own 31 | slice_size = (authors.size / 3.to_f).ceil 32 | cols = authors.each_slice(slice_size).to_a 33 | File.open('_data/acknowledgements.yml', 'w+') { |f| f.write(cols.to_yaml) } 34 | end 35 | 36 | desc "build into ../../react-gh-pages" 37 | task :release => [:update_version, :default] do 38 | system "jekyll build -d ../../react-gh-pages" 39 | end 40 | 41 | task :default => [:js] 42 | -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | --- 2 | name: React 3 | description: A JavaScript library for building user interfaces 4 | url: http://facebook.github.io 5 | baseurl: "/react" 6 | permalink: "/blog/:year/:month/:day/:title.html" 7 | paginate_path: "/blog/page:num/" 8 | relative_permalinks: true 9 | paginate: 5 10 | timezone: America/Los_Angeles 11 | highlighter: pygments 12 | defaults: 13 | - scope: 14 | path: '' 15 | type: post 16 | values: 17 | layout: post 18 | - scope: 19 | path: docs 20 | type: page 21 | values: 22 | layout: docs 23 | exclude: 24 | - Gemfile 25 | - Gemfile.lock 26 | - README.md 27 | - Rakefile 28 | markdown: redcarpet 29 | redcarpet: 30 | extensions: 31 | - fenced_code_blocks 32 | sass: 33 | style: :compressed 34 | sass_dir: _css 35 | gems: 36 | - jekyll-redirect-from 37 | react_version: 0.11.1 38 | -------------------------------------------------------------------------------- /docs/_css/_variables.scss: -------------------------------------------------------------------------------- 1 | $primary: #cc7a6f; 2 | $linkColor: darken($primary, 9%); 3 | $linkInteract: darken($linkColor, 9%); 4 | $pageBg: #f9f9f9; 5 | 6 | $lightColor: #e9e9e9; 7 | $mediumestColor: #666; 8 | $mediumColor: #484848; 9 | $darkColor: #2d2d2d; 10 | $darkestColor: #222222; 11 | $blueColor: #61dafb; 12 | $orangeColor: complement($blueColor); 13 | 14 | $lightTextColor: #fafafa; 15 | $mediumTextColor: #aaa; 16 | $darkTextColor: $mediumColor; 17 | 18 | $buttonBlueTop: #77a3d2; 19 | $buttonBlueBottom: #4783c2; 20 | $buttonGreyTop: #9a9a9a; 21 | $buttonGreyBottom: #646464; 22 | 23 | -------------------------------------------------------------------------------- /docs/_css/bourbon/_bourbon-deprecated-upcoming.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // These mixins/functions are deprecated 3 | // They will be removed in the next MAJOR version release 4 | //************************************************************************// 5 | @mixin inline-block { 6 | display: inline-block; 7 | @warn "inline-block mixin is deprecated and will be removed in the next major version release"; 8 | } 9 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Modern micro clearfix provides an easy way to contain floats without adding additional markup. 2 | // 3 | // Example usage: 4 | // 5 | // // Contain all floats within .wrapper 6 | // .wrapper { 7 | // @include clearfix; 8 | // .content, 9 | // .sidebar { 10 | // float : left; 11 | // } 12 | // } 13 | 14 | @mixin clearfix { 15 | &:after { 16 | content:""; 17 | display:table; 18 | clear:both; 19 | } 20 | } 21 | 22 | // Acknowledgements 23 | // Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php) 24 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_ellipsis.scss: -------------------------------------------------------------------------------- 1 | @mixin ellipsis($width: 100%) { 2 | display: inline-block; 3 | max-width: $width; 4 | overflow: hidden; 5 | text-overflow: ellipsis; 6 | white-space: nowrap; 7 | } 8 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_font-family.scss: -------------------------------------------------------------------------------- 1 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif; 2 | $helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 3 | $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; 4 | $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; 5 | $verdana: Verdana, Geneva, sans-serif; 6 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_hide-text.scss: -------------------------------------------------------------------------------- 1 | @mixin hide-text { 2 | overflow: hidden; 3 | 4 | &:before { 5 | content: ""; 6 | display: block; 7 | width: 0; 8 | height: 100%; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_position.scss: -------------------------------------------------------------------------------- 1 | @mixin position ($position: relative, $coordinates: null null null null) { 2 | 3 | @if type-of($position) == list { 4 | $coordinates: $position; 5 | $position: relative; 6 | } 7 | 8 | $coordinates: unpack($coordinates); 9 | 10 | $top: nth($coordinates, 1); 11 | $right: nth($coordinates, 2); 12 | $bottom: nth($coordinates, 3); 13 | $left: nth($coordinates, 4); 14 | 15 | position: $position; 16 | 17 | @if ($top and $top == auto) or (type-of($top) == number) { 18 | top: $top; 19 | } 20 | 21 | @if ($right and $right == auto) or (type-of($right) == number) { 22 | right: $right; 23 | } 24 | 25 | @if ($bottom and $bottom == auto) or (type-of($bottom) == number) { 26 | bottom: $bottom; 27 | } 28 | 29 | @if ($left and $left == auto) or (type-of($left) == number) { 30 | left: $left; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_prefixer.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec); 3 | //************************************************************************// 4 | // Variables located in /settings/_prefixer.scss 5 | 6 | @mixin prefixer ($property, $value, $prefixes) { 7 | @each $prefix in $prefixes { 8 | @if $prefix == webkit { 9 | @if $prefix-for-webkit { 10 | -webkit-#{$property}: $value; 11 | } 12 | } 13 | @else if $prefix == moz { 14 | @if $prefix-for-mozilla { 15 | -moz-#{$property}: $value; 16 | } 17 | } 18 | @else if $prefix == ms { 19 | @if $prefix-for-microsoft { 20 | -ms-#{$property}: $value; 21 | } 22 | } 23 | @else if $prefix == o { 24 | @if $prefix-for-opera { 25 | -o-#{$property}: $value; 26 | } 27 | } 28 | @else if $prefix == spec { 29 | @if $prefix-for-spec { 30 | #{$property}: $value; 31 | } 32 | } 33 | @else { 34 | @warn "Unrecognized prefix: #{$prefix}"; 35 | } 36 | } 37 | } 38 | 39 | @mixin disable-prefix-for-all() { 40 | $prefix-for-webkit: false !global; 41 | $prefix-for-mozilla: false !global; 42 | $prefix-for-microsoft: false !global; 43 | $prefix-for-opera: false !global; 44 | $prefix-for-spec: false !global; 45 | } 46 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_retina-image.scss: -------------------------------------------------------------------------------- 1 | @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { 2 | @if $asset-pipeline { 3 | background-image: image-url("#{$filename}.#{$extension}"); 4 | } 5 | @else { 6 | background-image: url("#{$filename}.#{$extension}"); 7 | } 8 | 9 | @include hidpi { 10 | @if $asset-pipeline { 11 | @if $retina-filename { 12 | background-image: image-url("#{$retina-filename}.#{$extension}"); 13 | } 14 | @else { 15 | background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); 16 | } 17 | } 18 | 19 | @else { 20 | @if $retina-filename { 21 | background-image: url("#{$retina-filename}.#{$extension}"); 22 | } 23 | @else { 24 | background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); 25 | } 26 | } 27 | 28 | background-size: $background-size; 29 | 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_size.scss: -------------------------------------------------------------------------------- 1 | @mixin size($size) { 2 | $height: nth($size, 1); 3 | $width: $height; 4 | 5 | @if length($size) > 1 { 6 | $height: nth($size, 2); 7 | } 8 | 9 | @if $height == auto or (type-of($height) == number and not unitless($height)) { 10 | height: $height; 11 | } 12 | 13 | @if $width == auto or (type-of($width) == number and not unitless($width)) { 14 | width: $width; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_word-wrap.scss: -------------------------------------------------------------------------------- 1 | @mixin word-wrap($wrap: break-word) { 2 | word-wrap: $wrap; 3 | 4 | @if $wrap == break-word { 5 | overflow-wrap: break-word; 6 | word-break: break-all; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_appearance.scss: -------------------------------------------------------------------------------- 1 | @mixin appearance ($value) { 2 | @include prefixer(appearance, $value, webkit moz ms o spec); 3 | } 4 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_backface-visibility.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Backface-visibility mixin 3 | //************************************************************************// 4 | @mixin backface-visibility($visibility) { 5 | @include prefixer(backface-visibility, $visibility, webkit spec); 6 | } 7 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_background-image.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background-image property for adding multiple background images with 3 | // gradients, or for stringing multiple gradients together. 4 | //************************************************************************// 5 | 6 | @mixin background-image($images...) { 7 | $webkit-images: (); 8 | $spec-images: (); 9 | 10 | @each $image in $images { 11 | $webkit-image: (); 12 | $spec-image: (); 13 | 14 | @if (type-of($image) == string) { 15 | $url-str: str-slice($image, 0, 3); 16 | $gradient-type: str-slice($image, 0, 6); 17 | 18 | @if $url-str == "url" { 19 | $webkit-image: $image; 20 | $spec-image: $image; 21 | } 22 | 23 | @else if $gradient-type == "linear" { 24 | $gradients: _linear-gradient-parser($image); 25 | $webkit-image: map-get($gradients, webkit-image); 26 | $spec-image: map-get($gradients, spec-image); 27 | } 28 | 29 | @else if $gradient-type == "radial" { 30 | $gradients: _radial-gradient-parser($image); 31 | $webkit-image: map-get($gradients, webkit-image); 32 | $spec-image: map-get($gradients, spec-image); 33 | } 34 | } 35 | 36 | $webkit-images: append($webkit-images, $webkit-image, comma); 37 | $spec-images: append($spec-images, $spec-image, comma); 38 | } 39 | 40 | background-image: $webkit-images; 41 | background-image: $spec-images; 42 | } 43 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_border-radius.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Shorthand Border-radius mixins 3 | //************************************************************************// 4 | @mixin border-top-radius($radii) { 5 | @include prefixer(border-top-left-radius, $radii, spec); 6 | @include prefixer(border-top-right-radius, $radii, spec); 7 | } 8 | 9 | @mixin border-bottom-radius($radii) { 10 | @include prefixer(border-bottom-left-radius, $radii, spec); 11 | @include prefixer(border-bottom-right-radius, $radii, spec); 12 | } 13 | 14 | @mixin border-left-radius($radii) { 15 | @include prefixer(border-top-left-radius, $radii, spec); 16 | @include prefixer(border-bottom-left-radius, $radii, spec); 17 | } 18 | 19 | @mixin border-right-radius($radii) { 20 | @include prefixer(border-top-right-radius, $radii, spec); 21 | @include prefixer(border-bottom-right-radius, $radii, spec); 22 | } 23 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | @mixin box-sizing ($box) { 2 | // content-box | border-box | inherit 3 | @include prefixer(box-sizing, $box, webkit moz spec); 4 | } 5 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_calc.scss: -------------------------------------------------------------------------------- 1 | @mixin calc($property, $value) { 2 | #{$property}: -webkit-calc(#{$value}); 3 | #{$property}: calc(#{$value}); 4 | } 5 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_columns.scss: -------------------------------------------------------------------------------- 1 | @mixin columns($arg: auto) { 2 | // || 3 | @include prefixer(columns, $arg, webkit moz spec); 4 | } 5 | 6 | @mixin column-count($int: auto) { 7 | // auto || integer 8 | @include prefixer(column-count, $int, webkit moz spec); 9 | } 10 | 11 | @mixin column-gap($length: normal) { 12 | // normal || length 13 | @include prefixer(column-gap, $length, webkit moz spec); 14 | } 15 | 16 | @mixin column-fill($arg: auto) { 17 | // auto || length 18 | @include prefixer(column-fill, $arg, webkit moz spec); 19 | } 20 | 21 | @mixin column-rule($arg) { 22 | // || || 23 | @include prefixer(column-rule, $arg, webkit moz spec); 24 | } 25 | 26 | @mixin column-rule-color($color) { 27 | @include prefixer(column-rule-color, $color, webkit moz spec); 28 | } 29 | 30 | @mixin column-rule-style($style: none) { 31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid 32 | @include prefixer(column-rule-style, $style, webkit moz spec); 33 | } 34 | 35 | @mixin column-rule-width ($width: none) { 36 | @include prefixer(column-rule-width, $width, webkit moz spec); 37 | } 38 | 39 | @mixin column-span($arg: none) { 40 | // none || all 41 | @include prefixer(column-span, $arg, webkit moz spec); 42 | } 43 | 44 | @mixin column-width($length: auto) { 45 | // auto || length 46 | @include prefixer(column-width, $length, webkit moz spec); 47 | } 48 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_filter.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($function: none) { 2 | // [ 3 | @include prefixer(perspective, $depth, webkit moz spec); 4 | } 5 | 6 | @mixin perspective-origin($value: 50% 50%) { 7 | @include prefixer(perspective-origin, $value, webkit moz spec); 8 | } 9 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_placeholder.scss: -------------------------------------------------------------------------------- 1 | @mixin placeholder { 2 | $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; 3 | @each $placeholder in $placeholders { 4 | &:#{$placeholder}-placeholder { 5 | @content; 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin transform($property: none) { 2 | // none | 3 | @include prefixer(transform, $property, webkit moz ms o spec); 4 | } 5 | 6 | @mixin transform-origin($axes: 50%) { 7 | // x-axis - left | center | right | length | % 8 | // y-axis - top | center | bottom | length | % 9 | // z-axis - length 10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec); 11 | } 12 | 13 | @mixin transform-style ($style: flat) { 14 | @include prefixer(transform-style, $style, webkit moz ms o spec); 15 | } 16 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_user-select.scss: -------------------------------------------------------------------------------- 1 | @mixin user-select($arg: none) { 2 | @include prefixer(user-select, $arg, webkit moz ms spec); 3 | } 4 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_assign.scss: -------------------------------------------------------------------------------- 1 | @function assign-inputs($inputs, $pseudo: null) { 2 | $list : (); 3 | 4 | @each $input in $inputs { 5 | $input: unquote($input); 6 | $input: if($pseudo, $input + ":" + $pseudo, $input); 7 | $list: append($list, $input, comma); 8 | } 9 | 10 | @return $list; 11 | } -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_color-lightness.scss: -------------------------------------------------------------------------------- 1 | // Programatically determines whether a color is light or dark 2 | // Returns a boolean 3 | // More details here http://robots.thoughtbot.com/closer-look-color-lightness 4 | 5 | @function is-light($hex-color) { 6 | $-local-red: red(rgba($hex-color, 1.0)); 7 | $-local-green: green(rgba($hex-color, 1.0)); 8 | $-local-blue: blue(rgba($hex-color, 1.0)); 9 | 10 | $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; 11 | 12 | @return $-local-lightness > .6; 13 | } 14 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_golden-ratio.scss: -------------------------------------------------------------------------------- 1 | @function golden-ratio($value, $increment) { 2 | @return modular-scale($value, $increment, $golden) 3 | } 4 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_grid-width.scss: -------------------------------------------------------------------------------- 1 | @function grid-width($n) { 2 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 3 | } 4 | 5 | // The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. 6 | // 7 | // $gw-column: 100px; // Column Width 8 | // $gw-gutter: 40px; // Gutter Width 9 | // 10 | // div { 11 | // width: grid-width(4); // returns 520px; 12 | // margin-left: $gw-gutter; // returns 40px; 13 | // } 14 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to ems 2 | // eg. for a relational value of 12px write em(12) when the parent is 16px 3 | // if the parent is another value say 24px write em(12, 24) 4 | 5 | @function em($pxval, $base: $em-base) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | @if not unitless($base) { 10 | $base: strip-units($base); 11 | } 12 | @return ($pxval / $base) * 1em; 13 | } 14 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_px-to-rem.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to rems 2 | // eg. for a relational value of 12px write rem(12) 3 | // Assumes $em-base is the font-size of 4 | 5 | @function rem($pxval) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | 10 | $base: $em-base; 11 | @if not unitless($base) { 12 | $base: strip-units($base); 13 | } 14 | @return ($pxval / $base) * 1rem; 15 | } 16 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_strip-units.scss: -------------------------------------------------------------------------------- 1 | // Srtips the units from a value. e.g. 12px -> 12 2 | 3 | @function strip-units($val) { 4 | @return ($val / ($val * 0 + 1)); 5 | } 6 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_tint-shade.scss: -------------------------------------------------------------------------------- 1 | // Add percentage of white to a color 2 | @function tint($color, $percent){ 3 | @return mix(white, $color, $percent); 4 | } 5 | 6 | // Add percentage of black to a color 7 | @function shade($color, $percent){ 8 | @return mix(black, $color, $percent); 9 | } 10 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_transition-property-name.scss: -------------------------------------------------------------------------------- 1 | // Return vendor-prefixed property names if appropriate 2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background 3 | //************************************************************************// 4 | @function transition-property-names($props, $vendor: false) { 5 | $new-props: (); 6 | 7 | @each $prop in $props { 8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma); 9 | } 10 | 11 | @return $new-props; 12 | } 13 | 14 | @function transition-property-name($prop, $vendor: false) { 15 | // put other properties that need to be prefixed here aswell 16 | @if $vendor and $prop == transform { 17 | @return unquote('-'+$vendor+'-'+$prop); 18 | } 19 | @else { 20 | @return $prop; 21 | } 22 | } -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_unpack.scss: -------------------------------------------------------------------------------- 1 | // Convert shorthand to the 4-value syntax 2 | 3 | @function unpack($shorthand) { 4 | @if length($shorthand) == 1 { 5 | @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); 6 | } 7 | @else if length($shorthand) == 2 { 8 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); 9 | } 10 | @else if length($shorthand) == 3 { 11 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); 12 | } 13 | @else { 14 | @return $shorthand; 15 | } 16 | } 17 | 18 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_convert-units.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for str-to-num fn. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _convert-units($number, $unit) { 6 | $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn'; 7 | $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn; 8 | $index: index($strings, $unit); 9 | 10 | @if not $index { 11 | @warn "Unknown unit `#{$unit}`."; 12 | @return false; 13 | } 14 | @return $number * nth($units, $index); 15 | } 16 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_gradient-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _gradient-positions-parser($gradient-type, $gradient-positions) { 2 | @if $gradient-positions 3 | and ($gradient-type == linear) 4 | and (type-of($gradient-positions) != color) { 5 | $gradient-positions: _linear-positions-parser($gradient-positions); 6 | } 7 | @else if $gradient-positions 8 | and ($gradient-type == radial) 9 | and (type-of($gradient-positions) != color) { 10 | $gradient-positions: _radial-positions-parser($gradient-positions); 11 | } 12 | @return $gradient-positions; 13 | } 14 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_is-num.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper for linear-gradient-parser 3 | //************************************************************************// 4 | @function _is-num($char) { 5 | $values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9; 6 | $index: index($values, $char); 7 | @return if($index, true, false); 8 | } 9 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_linear-angle-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-angle-parser($image, $first-val, $prefix, $suffix) { 3 | $offset: null; 4 | $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); 5 | $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); 6 | 7 | @if ($unit-long == "grad") or 8 | ($unit-long == "turn") { 9 | $offset: if($unit-long == "grad", -100grad * 3, -0.75turn); 10 | } 11 | 12 | @else if ($unit-short == "deg") or 13 | ($unit-short == "rad") { 14 | $offset: if($unit-short == "deg", -90 * 3, 1.6rad); 15 | } 16 | 17 | @if $offset { 18 | $num: _str-to-num($first-val); 19 | 20 | @return ( 21 | webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, 22 | spec-image: $image 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_linear-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $has-multiple-vals: str-index($first-val, " "); 12 | $has-single-position: unquote(_position-flipper($first-val) + ""); 13 | $has-angle: _is-num(str-slice($first-val, 0, 0)); 14 | 15 | @if $has-multiple-vals { 16 | $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); 17 | } 18 | 19 | @else if $has-single-position != "" { 20 | $pos: unquote($has-single-position + ""); 21 | 22 | $gradients: ( 23 | webkit-image: -webkit- + $image, 24 | spec-image: $prefix + "to " + $pos + $suffix 25 | ); 26 | } 27 | 28 | @else if $has-angle { 29 | // Rotate degree for webkit 30 | $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); 31 | } 32 | 33 | @else { 34 | $gradients: ( 35 | webkit-image: -webkit- + $image, 36 | spec-image: $image 37 | ); 38 | } 39 | 40 | @return $gradients; 41 | } 42 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_linear-side-corner-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { 3 | $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 ); 4 | $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); 5 | $val-3: null; 6 | $has-val-3: str-index($val-2, " "); 7 | 8 | @if $has-val-3 { 9 | $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); 10 | $val-2: str-slice($val-2, 0, $has-val-3 - 1); 11 | } 12 | 13 | $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); 14 | $pos: unquote($pos + ""); 15 | 16 | // Use old spec for webkit 17 | @if $val-1 == "to" { 18 | @return ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ); 22 | } 23 | 24 | // Bring the code up to spec 25 | @else { 26 | @return ( 27 | webkit-image: -webkit- + $image, 28 | spec-image: $prefix + "to " + $pos + $suffix 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_radial-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $is-spec-syntax: str-index($first-val, "at"); 12 | 13 | @if $is-spec-syntax and $is-spec-syntax > 1 { 14 | $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); 15 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 16 | $pos: append($pos, $keyword, comma); 17 | 18 | $gradients: ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ) 22 | } 23 | 24 | @else if $is-spec-syntax == 1 { 25 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 26 | 27 | $gradients: ( 28 | webkit-image: -webkit- + $prefix + $pos + $suffix, 29 | spec-image: $image 30 | ) 31 | } 32 | 33 | @else if str-index($image, "cover") or str-index($image, "contain") { 34 | @warn "Radial-gradient needs to be updated to conform to latest spec."; 35 | 36 | $gradients: ( 37 | webkit-image: null, 38 | spec-image: $image 39 | ) 40 | } 41 | 42 | @else { 43 | $gradients: ( 44 | webkit-image: -webkit- + $image, 45 | spec-image: $image 46 | ) 47 | } 48 | 49 | @return $gradients; 50 | } 51 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_radial-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-positions-parser($gradient-pos) { 2 | $shape-size: nth($gradient-pos, 1); 3 | $pos: nth($gradient-pos, 2); 4 | $shape-size-spec: _shape-size-stripper($shape-size); 5 | 6 | $pre-spec: unquote(if($pos, "#{$pos}, ", null)) 7 | unquote(if($shape-size, "#{$shape-size},", null)); 8 | $pos-spec: if($pos, "at #{$pos}", null); 9 | 10 | $spec: "#{$shape-size-spec} #{$pos-spec}"; 11 | 12 | // Add comma 13 | @if ($spec != ' ') { 14 | $spec: "#{$spec}," 15 | } 16 | 17 | @return $pre-spec $spec; 18 | } 19 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_render-gradients.scss: -------------------------------------------------------------------------------- 1 | // User for linear and radial gradients within background-image or border-image properties 2 | 3 | @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { 4 | $pre-spec: null; 5 | $spec: null; 6 | $vendor-gradients: null; 7 | @if $gradient-type == linear { 8 | @if $gradient-positions { 9 | $pre-spec: nth($gradient-positions, 1); 10 | $spec: nth($gradient-positions, 2); 11 | } 12 | } 13 | @else if $gradient-type == radial { 14 | $pre-spec: nth($gradient-positions, 1); 15 | $spec: nth($gradient-positions, 2); 16 | } 17 | 18 | @if $vendor { 19 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); 20 | } 21 | @else if $vendor == false { 22 | $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; 23 | $vendor-gradients: unquote($vendor-gradients); 24 | } 25 | @return $vendor-gradients; 26 | } 27 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_shape-size-stripper.scss: -------------------------------------------------------------------------------- 1 | @function _shape-size-stripper($shape-size) { 2 | $shape-size-spec: null; 3 | @each $value in $shape-size { 4 | @if ($value == "cover") or ($value == "contain") { 5 | $value: null; 6 | } 7 | $shape-size-spec: "#{$shape-size-spec} #{$value}"; 8 | } 9 | @return $shape-size-spec; 10 | } 11 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_str-to-num.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for linear/radial-gradient-parsers. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _str-to-num($string) { 6 | // Matrices 7 | $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; 8 | $numbers: 0 1 2 3 4 5 6 7 8 9; 9 | 10 | // Result 11 | $result: 0; 12 | $divider: 0; 13 | $minus: false; 14 | 15 | // Looping through all characters 16 | @for $i from 1 through str-length($string) { 17 | $character: str-slice($string, $i, $i); 18 | $index: index($strings, $character); 19 | 20 | @if $character == '-' { 21 | $minus: true; 22 | } 23 | 24 | @else if $character == '.' { 25 | $divider: 1; 26 | } 27 | 28 | @else { 29 | @if not $index { 30 | $result: if($minus, $result * -1, $result); 31 | @return _convert-units($result, str-slice($string, $i)); 32 | } 33 | 34 | $number: nth($numbers, $index); 35 | 36 | @if $divider == 0 { 37 | $result: $result * 10; 38 | } 39 | 40 | @else { 41 | // Move the decimal dot to the left 42 | $divider: $divider * 10; 43 | $number: $number / $divider; 44 | } 45 | 46 | $result: $result + $number; 47 | } 48 | } 49 | @return if($minus, $result * -1, $result); 50 | } 51 | -------------------------------------------------------------------------------- /docs/_css/bourbon/settings/_asset-pipeline.scss: -------------------------------------------------------------------------------- 1 | $asset-pipeline: false !default; 2 | -------------------------------------------------------------------------------- /docs/_css/bourbon/settings/_prefixer.scss: -------------------------------------------------------------------------------- 1 | // Variable settings for /addons/prefixer.scss 2 | $prefix-for-webkit: true !default; 3 | $prefix-for-mozilla: true !default; 4 | $prefix-for-microsoft: true !default; 5 | $prefix-for-opera: true !default; 6 | $prefix-for-spec: true !default; // required for keyframe mixin 7 | -------------------------------------------------------------------------------- /docs/_css/bourbon/settings/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | $em-base: 16px !default; 2 | -------------------------------------------------------------------------------- /docs/_data/nav_tips.yml: -------------------------------------------------------------------------------- 1 | - title: Tips 2 | items: 3 | - id: introduction 4 | title: Introduction 5 | - id: inline-styles 6 | title: Inline Styles 7 | - id: if-else-in-JSX 8 | title: If-Else in JSX 9 | - id: self-closing-tag 10 | title: Self-Closing Tag 11 | - id: maximum-number-of-jsx-root-nodes 12 | title: Maximum Number of JSX Root Nodes 13 | - id: style-props-value-px 14 | title: Shorthand for Specifying Pixel Values in style props 15 | - id: children-props-type 16 | title: Type of the Children props 17 | - id: controlled-input-null-value 18 | title: Value of null for Controlled Input 19 | - id: componentWillReceiveProps-not-triggered-after-mounting 20 | title: componentWillReceiveProps Not Triggered After Mounting 21 | - id: props-in-getInitialState-as-anti-pattern 22 | title: Props in getInitialState Is an Anti-Pattern 23 | - id: dom-event-listeners 24 | title: DOM Event Listeners in a Component 25 | - id: initial-ajax 26 | title: Load Initial Data via AJAX 27 | - id: false-in-jsx 28 | title: False in JSX 29 | - id: communicate-between-components 30 | title: Communicate Between Components 31 | - id: expose-component-functions 32 | title: Expose Component Functions 33 | - id: references-to-components 34 | title: References to Components 35 | - id: children-undefined 36 | title: this.props.children undefined 37 | -------------------------------------------------------------------------------- /docs/_includes/blog_post.html: -------------------------------------------------------------------------------- 1 |

{{ page.title }}

2 |

{{ page.date | date_to_string }} by {{ page.author }}

3 | 4 |
5 | {% if content != '' %} 6 | {{ page.excerpt }} 7 | {% else %} 8 | {{ page.content }} 9 | {% endif %} 10 |
11 | -------------------------------------------------------------------------------- /docs/_includes/nav_blog.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Recent posts

4 | 10 |
11 |
12 | -------------------------------------------------------------------------------- /docs/_includes/nav_docs.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | {% for section in site.data.nav_docs %} 4 |
5 |

{{ section.title }}

6 | 26 |
27 | {% endfor %} 28 | 29 | 30 | {% for section in site.data.nav_tips %} 31 |
32 |

{{ section.title }}

33 |
    34 | {% for item in section.items %} 35 |
  • 36 | {{ item.title }} 37 |
    • 38 | {% endfor %} 39 |
40 |
41 | {% endfor %} 42 |
43 | -------------------------------------------------------------------------------- /docs/_js/examples/hello.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | var HELLO_COMPONENT = "\ 6 | /** @jsx React.DOM */\n\ 7 | var HelloMessage = React.createClass({\n\ 8 | render: function() {\n\ 9 | return
Hello {this.props.name}
;\n\ 10 | }\n\ 11 | });\n\ 12 | \n\ 13 | React.renderComponent(, mountNode);\ 14 | "; 15 | 16 | React.renderComponent( 17 | , 18 | document.getElementById('helloExample') 19 | ); 20 | -------------------------------------------------------------------------------- /docs/_js/examples/markdown.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | var MARKDOWN_COMPONENT = "\ 6 | /** @jsx React.DOM */\n\ 7 | \n\ 8 | var converter = new Showdown.converter();\n\ 9 | \n\ 10 | var MarkdownEditor = React.createClass({\n\ 11 | getInitialState: function() {\n\ 12 | return {value: 'Type some *markdown* here!'};\n\ 13 | },\n\ 14 | handleChange: function() {\n\ 15 | this.setState({value: this.refs.textarea.getDOMNode().value});\n\ 16 | },\n\ 17 | render: function() {\n\ 18 | return (\n\ 19 |
\n\ 20 |

Input

\n\ 21 | \n\ 25 |

Output

\n\ 26 | \n\ 32 |
\n\ 33 | );\n\ 34 | }\n\ 35 | });\n\ 36 | \n\ 37 | React.renderComponent(, mountNode);\ 38 | "; 39 | 40 | React.renderComponent( 41 | , 42 | document.getElementById('markdownExample') 43 | ); 44 | -------------------------------------------------------------------------------- /docs/_js/examples/timer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | var TIMER_COMPONENT = "\ 6 | /** @jsx React.DOM */\n\ 7 | var Timer = React.createClass({\n\ 8 | getInitialState: function() {\n\ 9 | return {secondsElapsed: 0};\n\ 10 | },\n\ 11 | tick: function() {\n\ 12 | this.setState({secondsElapsed: this.state.secondsElapsed + 1});\n\ 13 | },\n\ 14 | componentDidMount: function() {\n\ 15 | this.interval = setInterval(this.tick, 1000);\n\ 16 | },\n\ 17 | componentWillUnmount: function() {\n\ 18 | clearInterval(this.interval);\n\ 19 | },\n\ 20 | render: function() {\n\ 21 | return (\n\ 22 |
Seconds Elapsed: {this.state.secondsElapsed}
\n\ 23 | );\n\ 24 | }\n\ 25 | });\n\ 26 | \n\ 27 | React.renderComponent(, mountNode);\ 28 | "; 29 | 30 | React.renderComponent( 31 | , 32 | document.getElementById('timerExample') 33 | ); 34 | -------------------------------------------------------------------------------- /docs/_js/examples/todo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | var TODO_COMPONENT = "\ 6 | /** @jsx React.DOM */\n\ 7 | var TodoList = React.createClass({\n\ 8 | render: function() {\n\ 9 | var createItem = function(itemText) {\n\ 10 | return
  • {itemText}
    • ;\n\ 11 | };\n\ 12 | return
      {this.props.items.map(createItem)}
    ;\n\ 13 | }\n\ 14 | });\n\ 15 | var TodoApp = React.createClass({\n\ 16 | getInitialState: function() {\n\ 17 | return {items: [], text: ''};\n\ 18 | },\n\ 19 | onChange: function(e) {\n\ 20 | this.setState({text: e.target.value});\n\ 21 | },\n\ 22 | handleSubmit: function(e) {\n\ 23 | e.preventDefault();\n\ 24 | var nextItems = this.state.items.concat([this.state.text]);\n\ 25 | var nextText = '';\n\ 26 | this.setState({items: nextItems, text: nextText});\n\ 27 | },\n\ 28 | render: function() {\n\ 29 | return (\n\ 30 |
    \n\ 31 |

    TODO

    \n\ 32 | \n\ 33 |
    \n\ 34 | \n\ 35 | \n\ 36 |
    \n\ 37 |
    \n\ 38 | );\n\ 39 | }\n\ 40 | });\n\ 41 | React.renderComponent(, mountNode);\ 42 | "; 43 | 44 | React.renderComponent( 45 | , 46 | document.getElementById('todoExample') 47 | ); 48 | -------------------------------------------------------------------------------- /docs/_js/html-jsx-lib.js: -------------------------------------------------------------------------------- 1 | // Ideally it would be nice to just redirect, but Github Pages is very basic and 2 | // lacks that functionality. 3 | console.warn( 4 | 'html-jsx-lib.js has moved to http://reactjs.github.io/react-magic/' + 5 | 'htmltojsx.min.js. If using React-Magic, you are no longer required to ' + 6 | 'link to this file. Please delete its 11 | -------------------------------------------------------------------------------- /docs/_posts/2013-06-21-react-v0-3-3.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "React v0.3.3" 3 | author: Paul O'Shannessy 4 | --- 5 | 6 | We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use. 7 | 8 | 9 | ## react-tools 10 | 11 | * Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`. 12 | * Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache. 13 | * Freeze our esprima dependency. 14 | 15 | 16 | ## React 17 | 18 | * Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(
    , domNode); React.renderComponent(, domNode);` will work now. 19 | 20 | 21 | ## JSXTransformer 22 | 23 | * Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files. 24 | -------------------------------------------------------------------------------- /docs/_posts/2013-07-26-react-v0-4-1.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "React v0.4.1" 3 | author: Paul O'Shannessy 4 | --- 5 | 6 | React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs. 7 | 8 | 9 | ## React 10 | 11 | * `setState` callbacks are now executed in the scope of your component. 12 | * `click` events now work on Mobile Safari. 13 | * Prevent a potential error in event handling if `Object.prototype` is extended. 14 | * Don't set DOM attributes to the string `"undefined"` on update when previously defined. 15 | * Improved support for `