JSX mode
x
1
// Code snippets from http://facebook.github.io/react/docs/jsx-in-depth.html
2
3
// Rendering HTML tags
4
var myDivElement = <div className="foo" />;
5
ReactDOM.render(myDivElement, document.getElementById('example'));
6
7
// Rendering React components
8
var MyComponent = React.createClass({/*...*/});
9
var myElement = <MyComponent someProperty={true} />;
10
ReactDOM.render(myElement, document.getElementById('example'));
11
12
// Namespaced components
13
var Form = MyFormComponent;
14
15
var App = (
16
<Form>
17
<Form.Row>
18
<Form.Label />
19
<Form.Input />
20
</Form.Row>
21
</Form>
22
);
23
24
// Attribute JavaScript expressions
25
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
26
27
// Boolean attributes
28
<input type="button" disabled />;
29
<input type="button" disabled={true} />;
30
31
// Child JavaScript expressions
32
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
33
34
// Comments
35
var content = (
36
<Nav>
37
{/* child comment, put {} around */}
38
<Person
39
/* multi
40
line
41
comment */
42
name={window.isLoggedIn ? window.name : ''} // end of line comment
43
/>
44
</Nav>
45
);
46
JSX Mode for React's JavaScript syntax extension.
MIME types defined: text/jsx
.