Article directory [hidden]
background
React is really a good thing, but sometimes JS syntax still inevitably appears bloated. Although ES6 has been improved a lot, it still has many slot points. I feel much more comfortable than coffee script.
React magic changed JS so that it can directly insert HTML code into JS code. In this way, JS after magic change is called JSX. This article will not repeat JSX too much. Let's directly talk about the "JSX" - cjsx of CoffeeScript version. It's a new pose, but it cjsx's been a while. But next, I will not introduce cjsx, but introduce some other postures using CoffeeScript in react.
react-coffee
In order to make CoffeeScript comfortable with React, the simplest way is to package React DOM into a library and call it directly. It's not just coffee React, but coffee React is very representative, so let's take him for example. And the name is very similar to the library we want to introduce. Don't make a mistake! Let's take a look at a code example given by the official:
{div}= React.DOM
module.exports= React.Component.toComponent class MyComponent
render: ->
(div null,
"My Component!"
)I don't comment on the beauty or ugliness of the style, but I think it's not that elegant w
coffee-react
This is the protagonist of this article. Let's take a look at the official example:
NeatComponent = React.createClass
render: ->
<div className="neat-component">
{<h1>A Component is I</h1> if @props.showTitle}
<hr />
{<p key={n}>This line has been printed {n} times</p> for n in [1..5]}
</div>It's JSX in Coffee! Unfortunately, you need to compile again. But it doesn't matter. After all, cs itself has to be compiled into js. However, it should be noted here that everything has changed since the writing of this article started very early... First, the library has stopped maintenance. What can achieve this function and are still being maintained are: https://github.com/jsdf/cjsx-codemod .
cjsx-in-browser
This library is used to directly debug cjsx in the browser. Rewrite the example on the official website:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>233333333333</title>
</head>
<body>
<div id="example">
</div>
<script type="text/cjsx">
HelloWorldApp = React.createClass
getInitialState: ->
clock: 0
componentWillMount: ->
setInterval =>
@setState clock: @state.clock+1
, 1000
resetClock: ->
@setState clock: 0
render: ->
<div className="hi">
<h1>Hello, world!</h1>
<p>Seconds elapsed: {@state.clock}</p>
<button
onClick={@resetClock}
disabled={if @state.clock < 2 then 'disabled' else ''}>
Reset
</button>
<ul>
{ <li>{i}</li> for i in [0...@props.listLength] }
</ul>
</div>
React.renderComponent <HelloWorldApp listLength=9 />, document.getElementById('example')
</script>
<script type="text/javascript" src="react-0.11.1.js"></script>
<script type="text/javascript" src="https://rawgit.com/iamdanfox/cjsx-in-browser/master/cjsx-in-browser.js"></script>
</body>
</html>The operation effect is roughly as follows:
This is the intermediate result at compile time:
HelloWorldApp = React.createClass
getInitialState: ->
clock: 0
componentWillMount: ->
setInterval =>
@setState clock: @state.clock+1
, 1000
resetClock: ->
@setState clock: 0
render: ->
React.DOM.div({"className": "hi"},
React.DOM.h1(null, "Hello, world!"),
React.DOM.p(null, "Seconds elapsed: ", (@state.clock)),
React.DOM.button({ \
"onClick": (@resetClock), \
"disabled": (if @state.clock < 2 then 'disabled' else '')}, """
Reset
"""),
React.DOM.ul(null,
( React.DOM.li(null, (i)) for i in [0...@props.listLength] )
)
)
React.renderComponent HelloWorldApp({"listLength": 9}), document.getElementById('example')This is the final state:
(function() {
var HelloWorldApp;
HelloWorldApp = React.createClass({
getInitialState: function() {
return {
clock: 0
};
},
componentWillMount: function() {
return setInterval((function(_this) {
return function() {
return _this.setState({
clock: _this.state.clock + 1
});
};
})(this), 1000);
},
resetClock: function() {
return this.setState({
clock: 0
});
},
render: function() {
var i;
return React.DOM.div({
"className": "hi"
}, React.DOM.h1(null, "Hello, world!"), React.DOM.p(null, "Seconds elapsed: ", this.state.clock), React.DOM.button({
"onClick": this.resetClock,
"disabled": (this.state.clock < 2 ? 'disabled' : '')
}, "Reset"), React.DOM.ul(null, (function() {
var _i, _ref, _results;
_results = [];
for (i = _i = 0, _ref = this.props.listLength; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
_results.push(React.DOM.li(null, i));
}
return _results;
}).call(this)));
}
});
React.renderComponent(HelloWorldApp({
"listLength": 9
}), document.getElementById('example'));
}).call(this);Postscript: CS2
CS2 released its first official version more than half a month ago. One of the major updates is that CS native supports writing like JSX. So this article is completely invalid. This is the official portal: http://coffeescript.org/v2/#jsx . For other updates to CS2, I will write a new blog post.