Boiling React Down to Few Lines in JQuery
hackflow.com
Boiling React Down to Few Lines in JQuery
1–10 of 35 posts
Re: Boiling React Down to Few Lines in JQuery
#2React is more than a few lines of clever Javascript.
It's also a philosophy of UI composition. It's also a philosophy of data consumption. It's also a philosophy of code structure.
Having written my share of code with both, I now prefer composing UI's in React. It's easier to get simpler code maintenance and better performance with React.
Re: Boiling React Down to Few Lines in JQuery
#3> I want to stress this once more – for an average app you can skip React or other virtual DOM at start and only go for it once it gets too slow (or never).
I don't think this is good advice. It would be better to just start by using something like React, then if things get too slow, implement shouldComponentUpdate, because you will almost certainly need something that can make efficient DOM updates instead of just naively recreating whole DOM trees.
Re: Boiling React Down to Few Lines in JQuery
#4React is more than a few lines of clever Javascript. It's also a philosophy of UI composition. It's also a philosophy of data consumption. It's also a philosophy of code structure. Having written my share of code with both, I now prefer composing UI's in React. It's easier to get simpler code maintenance and better performance with React.
[deleted]
Re: Boiling React Down to Few Lines in JQuery
#5I use something a little similar where I work. No one would be on board with something like React but I've documented a way to write our code that does something similar to this post. We use js "classes" (Both Function.prototype and now js classes with babel) and lo-dash templates to make it a little nicer.
Example:
function MyComponent(element) {
var instance = this;
instance.element = element;
instance.history = [];
instance.state = { myKey: 'someData' };
instance.template = _.template($('my-template').html());
instance.setupHandlers();
}
MyComponent.prototype.render = function() {
var instance = this;
instance.element.html(instance.template(instance.state));
instance.history.push(deepcopy(instance.state));
}
MyComponent.prototype.undo = function() {
var instance = this;
instance.state = instance.history.pop();
instance.render();
}
MyComponent.prototype.setupHandlers = function() {
instance.element.on('change', '.my-input', function(e) {
instance.state.myInput = $(this).val();
instance.render();
});
}
Re: Boiling React Down to Few Lines in JQuery
#6If you were to put the event bindings in the markup instead, some of the examples would look very similar to Riot 2.0 [1] tag definitions, although it uses a more Glimmer-like approach which only looks at the bits which can change based on the template, instead of a Virtual DOM.
Re: Boiling React Down to Few Lines in JQuery
#7I use something a little similar where I work. No one would be on board with something like React but I've documented a way to write our code that does something similar to this post. We use js "classes" (Both Function.prototype and now js classes with babel) and lo-dash templates to make it a little nicer. Example: function MyComponent(element) { var instance = this; instance.element = element; instance.history = []…
I like how you redundantly alias `this` to `instance` except in the only method that needs it ;)
Re: Boiling React Down to Few Lines in JQuery
#8[deleted]
Re: Boiling React Down to Few Lines in JQuery
#9React is more than a few lines of clever Javascript. It's also a philosophy of UI composition. It's also a philosophy of data consumption. It's also a philosophy of code structure. Having written my share of code with both, I now prefer composing UI's in React. It's easier to get simpler code maintenance and better performance with React.
i thought it was a good simplistic illustration of react's concepts using a tool everyone already knows
Re: Boiling React Down to Few Lines in JQuery
#10I use something a little similar where I work. No one would be on board with something like React but I've documented a way to write our code that does something similar to this post. We use js "classes" (Both Function.prototype and now js classes with babel) and lo-dash templates to make it a little nicer. Example: function MyComponent(element) { var instance = this; instance.element = element; instance.history = []…
You're example is the perfect example of what not to do and why React, Angular and such exist: STATES. You want your view to be data driven.It means that your component should be STATELESS.
There are other issues such as event delegation,cleaning up event listeners,... that will make your solution hard to scale past simple widgets.And before you know it,you'll be writing your own complicated framework that does less than Angular or React.