I highly doubt they’re working on a complete replacement. They have too much in infrastructure tooling and mindshare to drop it. I do think it’ll change a bit over the years. Currently they can hire someone and have them productive in the first day.
I’ve talked to some of the React devs and basically in time the Object Oriented interface will sunset and a more functional approach will be the norm, as the JS community adopts FP over OO. Stateless components are the first step. Stateful functions/modules are next. Here’s an example of a spike of what’s coming in the future:
// react stateful module
function handleClick(props, state, event) {
if (event.button === 1) {
return { count: 0 };
}
if (props.onClick) {
props.onClick();
}
// state gets returned instead of using this.setState
return { count: state ? state.count + 1 : 0 };
}
export function componentDidMount(props, state) {
console.log('mounted');
}
export function render(props, state) {
return (
<div>
Clicked {state.count} times
<button onClick={this(handleClick)} style={{ width: props.width }} />
</div>
);
}
Replacing Redux functionality is something that I imagine is being experimented with too.
> Anyhow mixing HTML, CSS and Javascript in the same file is quite confusing, error prone and very verbose compared to Blaze or Jade. I know some people might disagree on this, but I want to ask them: what if there would be synthesis between thesis (Blaze) and antithesis (React), which would be a new grammar that encompasses both JS and HTML in a new, easier language, like what Jade or Mustache did with HTML and templating?
I agree with @mattkrick , i’ve found the opposite to be true. Having everything in one file increases cohesion.
Also you’re not mixing HTML with JS, you’re mixing JS with JS. JSX is just sugar that was originally meant for designers. React started out without it. The attributes that people complain about (like className) are the DOM API because it’s not HTML it’s the a representation of what the DOM should look like.
For example this is pure React and a JSX version, the JSX de-sugars to the first example:
// before
const MainView = React.createClass({
render() {
return (
React.createElement("form", formProps,
React.createElement("input", {ref: "email", type: "email"}),
React.createElement("input", {ref: "password", type: "password"}),
React.createElement("input", {ref: "submit", type: "submit"}),
React.createElement("div", {ref: "errMsg"}, this.state.loginErrMsg)
)
);
}
});
// after
const MainView = React.createClass({
render() {
return (
<form>
<input ref="email" type="email" />
<input ref="password" type="password" />
<input ref="submit" type="submit" />
<div ref="errMsg">
{this.state.loginErrMsg}
</div>
</form>
);
}
});
> Is there anything already moving in the direction of making React easier to use?
I’m hoping React itself will make it easy to share data across components without flux/redux. I think this is the main rub with building apps that are not simple.
I think a lot of people dismiss React without taking a day or two to learn it. They judge it based on a simple todo app and miss the big picture on how it helps you structure code on a real app.