| let React = require('react'); | |
| var ReactTestUtils = require('react-dom/test-utils'); | |
| class TextWithStringRef extends React.Component { | |
| render() { | |
| return ( | |
| <span ref="foo"> | |
| Hello world! | |
| </span> | |
| ); |
The React.createMixin helper was never actually implemented -
the code for it
simply took a mixin as an argument and returned it with no changes:
createMixin: function(mixin) {
// Currently a noop. Will be used to validate and trace mixins.
return mixin;
| <!DOCTYPE html> | |
| <html style="width: 100%; height: 100%; overflow: hidden"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Unknown Props Example</title> | |
| </head> | |
| <body> | |
| <h1>Unknown Props Example</h1> | |
| <div id="container"> | |
| <p> |
| /******/ (function(modules) { // webpackBootstrap | |
| /******/ // The module cache | |
| /******/ var installedModules = {}; | |
| /******/ // The require function | |
| /******/ function __webpack_require__(moduleId) { | |
| /******/ // Check if module is in cache | |
| /******/ if(installedModules[moduleId]) | |
| /******/ return installedModules[moduleId].exports; |
| .infinite-scroll-example__scrollable-parent { | |
| height: 500px; | |
| overflow-y: scroll; | |
| position: relative; | |
| } |
| var InfiniteScrollExample = React.createClass({ | |
| _loadMoreItems: function() { | |
| this.setState({ loading: true }); | |
| // Do the fetching of data here with AJAX | |
| // In this fake example we just generate more image urls | |
| // and set the state of 'loading' to false. | |
| // ... | |
| }, | |
| getInitialState: function() { |
| var InfiniteScrollExample = React.createClass({ | |
| //... | |
| _renderItems: function() { | |
| return this.state.items.map(function(imageUrl, index) { | |
| // ... generate list items here ... | |
| }); | |
| }, | |
| _renderWaypoint: function() { | |
| if (!this.state.isLoading) { |
| // npm | |
| > npm install react-waypoint --save | |
| // bower | |
| > bower install react-waypoint --save |
| /* global __dirname */ | |
| var webpack = require('webpack'); | |
| module.exports = { | |
| // for every key under 'entry', a JS file will be built | |
| entry: { | |
| bundle: './src/main.js.jsx' | |
| }, | |
| output: { | |
| path: __dirname + '/public/javascripts', | |
| filename: '[name].js' |
| // Looking at the 'componentDidMount' will usually show | |
| // whic stores this component listens to. | |
| // ... | |
| function getStateFromStores() { | |
| return { | |
| threads: ThreadStore.getAllChrono(), | |
| currentThreadID: ThreadStore.getCurrentID(), | |
| unreadCount: UnreadThreadStore.getCount() | |
| }; | |
| } |