├── .gitignore ├── README.md ├── index.js ├── package.json └── src └── component.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # reacto 2 | 3 | Disclaimer: This is not a React replacement. It is merely a 30-line extension which works wonders. You still need to have React installed. 4 | 5 | “React**o**” stands for “**object-oriented** React” in the classical sense native to JavaScript – leveraging constructors and prototypes. 6 | 7 | It is surely not very clear how the object model works in React at the first glance. You have a static factory `React.createClass()` which returns another factory. One would expect that React simply added this method to avoid general public from having to perform the usual inheritance steps. It is understandable and if just that were happening, it would be great, but React takes it a step further by returning a factory instead of the actual constructor (or a “class” as the method name suggests). 8 | 9 | Reacto brings back the intuitive approach of working with constructors and prototypes cherished by Google Closure Library and partially also even by node.js for instance. 10 | 11 | ## Component Definition 12 | 13 | In plain React, a component “specification” is passed to the `React.createClass()` factory method and the method returns a factory for the newly defined component. A call to the factory creates an internal `ReactElement` which can then be mounted onto the DOM via `React.render(component, domNode)`. 14 | 15 | ```javascript 16 | var AuthView = react.createClass({ 17 | render: function () { 18 | return react.DOM.span(null, 'User: ' + this.props.username); 19 | } 20 | }); 21 | 22 | var authView = AuthView({ username: 'Jan' }); 23 | react.render(authView, domNode); 24 | ``` 25 | 26 | Reacto provides a notation known to and understood by everyone. 27 | 28 | ```javascript 29 | var AuthView = function (props) { 30 | reacto.Component.call(this, props); 31 | }; 32 | inherits(AuthView, reacto.Component); 33 | 34 | AuthView.prototype.render = function () { 35 | return react.DOM.span(null, 'User: ' + this.props.username); 36 | }; 37 | 38 | var authView = new AuthView({ username: 'Jan' }); 39 | react.render(authView, domNode); 40 | ``` 41 | 42 | ## Benefits 43 | 44 | It may not be clear to some why this approach is advantegeous and how it benefits them. 45 | 46 | - **dependency injection made effortless** 47 | - **no global services** 48 | - **clear object model** 49 | - **clear code** 50 | - **ES6 class** and **CoffeeScript class** syntax support 51 | 52 | ### Dependency Injection 53 | 54 | Dependency injection is a huge problem in the Flux/React world as pretty much the only way how to perform constructor injection is by passing services and actions to a component via `props`. This is ugly and hardly automatable. Almost every example of using React or Flux is built around globally accessible services which is a pain the butt of testability and just makes the code unclear and the object model is basically a random mess. 55 | 56 | Reacto, by bringing back constructors of components, makes DI a breeze; you simply pass services to the constructor and the instance does not need to access the global scope to get data and trigger actions. 57 | 58 | ```javascript 59 | var AuthView = function (authStore, authActions, props) { 60 | reacto.Component.call(this, props); 61 | 62 | this._authStore = authStore; 63 | this._authActions = authActions; 64 | }; 65 | inherits(AuthView, reacto.Component); 66 | 67 | AuthView.prototype.componentDidMount = function () { 68 | this._auth.listen(this._handleChange.bind(this)); 69 | }; 70 | 71 | AuthView.prototype._handleChange = function () { 72 | this.setState({ 73 | username: this._auth.getUser().username 74 | }); 75 | }; 76 | 77 | AuthView.prototype.render = function () { 78 | if (!this.state.username) { 79 | return react.DOM.div(null, [ 80 | react.DOM.span(null, 'Not signed in'), 81 | react.DOM.button({ onClick: this._authActions.authenticate }, 'Sign in!') 82 | ]); 83 | } 84 | 85 | return react.DOM.span(null, 'Username: ' + this.state.username); 86 | }; 87 | ``` 88 | 89 | ### `class` syntax 90 | 91 | ES6 and CoffeeScript `class` syntax support. 92 | 93 | ```javascript 94 | class AuthView extends reacto.Component { 95 | constructor(authStore, props) { 96 | super(props); 97 | this._authStore = authStore; 98 | } 99 | } 100 | ``` 101 | 102 | ```coffeescript 103 | class AuthView extends reacto.Component 104 | constructor: (authStore, props) -> 105 | super(props) 106 | @_authStore = authStore 107 | ``` 108 | 109 | ## Installation 110 | 111 | ``` 112 | npm install reacto 113 | ``` 114 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 2 | exports.Component = require('./src/component'); 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reacto", 3 | "version": "1.0.0", 4 | 5 | "main": "index.js", 6 | 7 | "author": "Jan Kuča (http://jankuca.com)", 8 | "repository": { 9 | "type": "git", 10 | "url": "git://github.com/jankuca/reacto.git" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/component.js: -------------------------------------------------------------------------------- 1 | var react = require('react'); 2 | var reactCurrentOwner = require('react/lib/ReactCurrentOwner'); 3 | var reactContext = require('react/lib/ReactContext'); 4 | 5 | 6 | /** 7 | * @constructor 8 | * @extends {react.CompositeComponent} 9 | */ 10 | var Component = function (config) { 11 | if (!(this instanceof Component)) { 12 | throw new Error('Component constructor cannot be used without new'); 13 | } 14 | 15 | this.ref = null; 16 | this.key = null; 17 | 18 | var props = {}; 19 | if (config) { 20 | this.ref = (typeof config.ref !== 'undefined') ? config.ref : null; 21 | this.key = (config.key !== null) ? config.key : null; 22 | 23 | var hasOwnProperty = {}.hasOwnProperty; 24 | for (var propKey in config) { 25 | // Ignore ref and key in a Closure Compiler-safe manner. 26 | if (hasOwnProperty.call(config, propKey) && 27 | !hasOwnProperty.call(this, propKey)) { 28 | props[propKey] = config[propKey]; 29 | } 30 | } 31 | } 32 | 33 | this._owner = reactCurrentOwner.current; 34 | this._context = reactContext.current; 35 | 36 | this.props = props; 37 | 38 | var self = this; 39 | this.type = function (props) { return self; }; 40 | }; 41 | 42 | 43 | // Inherit from react.Element 44 | var baseSpec = { render: function () {} }; 45 | var BaseComponent = react.createClass(baseSpec).type; 46 | Component.prototype = BaseComponent.prototype; 47 | 48 | 49 | Component.prototype._isReactElement = true; 50 | 51 | 52 | Component.prototype.getInitialState = function () { 53 | return {}; 54 | }; 55 | 56 | 57 | module.exports = Component; 58 | --------------------------------------------------------------------------------