What should go into JSX 2.0?
61–70 of 102 posts
Re: What should go into JSX 2.0?
#62What's wrong with just using the JavaScript/TypeScript syntax you already have? It's trivial to write a few functions to create HTML elements and append children. For example:
import { h1, div, span, text } from 'html';
const user = { name: 'Dave', age: '30' };
return div('container',
h1(text('User info')),
div(span('field',text('Name')),text(user.name)),
div(span('field',text('Age')),text(user.age)),
);
CSS preprocessors are another example. Want to add loops, conditionals, and user defined functions to your CSS superset? Why not just use JS/TS instead, which has all the control features and can output CSS text just as well as Less/Sass/SCSS/flavour of the month.
Re: What should go into JSX 2.0?
#63What's wrong with just using the JavaScript/TypeScript syntax you already have? It's trivial to write a few functions to create HTML elements and append children. For example: import { h1, div, span, text } from 'html'; const user = { name: 'Dave', age: '30' }; return div('container', h1(text('User info')), div(span('field',text('Name')),text(user.name)), div(span('field',text('Age')),text(user.age)), ); I don't unde…
You just wrote elm code in javascript
Re: What should go into JSX 2.0?
#64What's wrong with just using the JavaScript/TypeScript syntax you already have? It's trivial to write a few functions to create HTML elements and append children. For example: import { h1, div, span, text } from 'html'; const user = { name: 'Dave', age: '30' }; return div('container', h1(text('User info')), div(span('field',text('Name')),text(user.name)), div(span('field',text('Age')),text(user.age)), ); I don't unde…
Mithril does this, and I find its syntax much cleaner and easier to write in than JSX.
view: function(ctrl) {
return m("div", [
ctrl.pages().map(function(page) {
return m("a", {href: page.url}, page.title);
}),
m("button", {onclick: ctrl.rotate}, "Rotate links")
]);
}
Re: What should go into JSX 2.0?
#65Also keep in mind that javascript engines have a built-in mechanism for including multi-line strings with a powerful substitution engine: tagged template strings ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... ). The upside of template strings is that you can run your code directly in node or electron without using extra tooling first. It is possible and not hard to use tagged templates with react,…
JSX isn't templating. It's representing a virtual dom tree of function calls with a syntax more representative of the resulting markup.
You can build virtual dom trees or use real dom nodes using something like https://www.npmjs.com/package/morphdom . Tagged template strings let you build these features in without custom language extensions. See also:
* https://www.npmjs.com/package/hyperx * https://www.npmjs.com/package/yo-yo
Re: What should go into JSX 2.0?
#66Re: What should go into JSX 2.0?
#67Earlier quoted context omitted.
Loading (and error, etc) state should be the responsibility of the component doing the content rendering, not the parent. So the ConditionalSpinner component: Could be written better as: Where PersonRenderer would be defined as such: class PersonRenderer extends Component { render() { if(this.props.person) { return personcontent } return } } Given this, I'm still not sure how an If "component" would be achieved (and…
or create a wrapper function ... function withLoadingIndicator(Wrapped) { return function(props) { if (props.loading) { return ( ); } return ( ); } } // ... export class PersonRenderer extends Component { render() { return personcontent } } export default withLoadingIndicator(PersonRenderer);
I first learned about this method with react-dnd and have used it extensively since. Quite elegant.
Re: What should go into JSX 2.0?
#68Earlier quoted context omitted.
And you can inline if-statements with an IIFE when you need a little more space: {(() => { if (cond1 && cond2) return foo else ... })()} Though it makes GitHub think it's a Clojure file.
{(() => { })()} Honestly I can't decide if I think this is ugly or beautiful. It's like the buffalo buffalo of JS.
That's something the "do expressions" ECMAScript proposal is meant to solve:
{do {
if (cond1 && cond2)
foo
else
...
}}
{
if (cond1 && cond2)
foo
else
...
}
Re: What should go into JSX 2.0?
#69Nothing. Seriously, JSX works really well as it is. These proposals seem like small enhancements, some of them for the wrong reasons. > Computed attribute names. If you need this, you're probably being too clever. If there's a legitimate use for this, I've never seen it in the past 2 years I've been using JSX with React. > Object short hand notation. > Drop the need for curlies around attribute values if they're a si…
Agree wholeheartedly - this smacks of the repeated mistake that most template tools make which is trying to do language logic inside.
The whole point of JSX is that it isnt a template language and is just a wrapper around objects with properties.
Re: What should go into JSX 2.0?
#70What's wrong with just using the JavaScript/TypeScript syntax you already have? It's trivial to write a few functions to create HTML elements and append children. For example: import { h1, div, span, text } from 'html'; const user = { name: 'Dave', age: '30' }; return div('container', h1(text('User info')), div(span('field',text('Name')),text(user.name)), div(span('field',text('Age')),text(user.age)), ); I don't unde…
You just wrote elm code in javascript
That style was old before Elm. Elm does it rather well tho