index.html (2410B)
1 <!doctype html> 2 3 <title>CodeMirror: JSX mode</title> 4 <meta charset="utf-8"/> 5 <link rel=stylesheet href="../../doc/docs.css"> 6 7 <link rel="stylesheet" href="../../lib/codemirror.css"> 8 <script src="../../lib/codemirror.js"></script> 9 <script src="../javascript/javascript.js"></script> 10 <script src="../xml/xml.js"></script> 11 <script src="jsx.js"></script> 12 <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style> 13 <div id=nav> 14 <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a> 15 16 <ul> 17 <li><a href="../../index.html">Home</a> 18 <li><a href="../../doc/manual.html">Manual</a> 19 <li><a href="https://github.com/codemirror/codemirror">Code</a> 20 </ul> 21 <ul> 22 <li><a href="../index.html">Language modes</a> 23 <li><a class=active href="#">JSX</a> 24 </ul> 25 </div> 26 27 <article> 28 <h2>JSX mode</h2> 29 30 <div><textarea id="code" name="code">// Code snippets from http://facebook.github.io/react/docs/jsx-in-depth.html 31 32 // Rendering HTML tags 33 var myDivElement = <div className="foo" />; 34 ReactDOM.render(myDivElement, document.getElementById('example')); 35 36 // Rendering React components 37 var MyComponent = React.createClass({/*...*/}); 38 var myElement = <MyComponent someProperty={true} />; 39 ReactDOM.render(myElement, document.getElementById('example')); 40 41 // Namespaced components 42 var Form = MyFormComponent; 43 44 var App = ( 45 <Form> 46 <Form.Row> 47 <Form.Label /> 48 <Form.Input /> 49 </Form.Row> 50 </Form> 51 ); 52 53 // Attribute JavaScript expressions 54 var person = <Person name={window.isLoggedIn ? window.name : ''} />; 55 56 // Boolean attributes 57 <input type="button" disabled />; 58 <input type="button" disabled={true} />; 59 60 // Child JavaScript expressions 61 var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>; 62 63 // Comments 64 var content = ( 65 <Nav> 66 {/* child comment, put {} around */} 67 <Person 68 /* multi 69 line 70 comment */ 71 name={window.isLoggedIn ? window.name : ''} // end of line comment 72 /> 73 </Nav> 74 ); 75 </textarea></div> 76 77 <script> 78 var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 79 lineNumbers: true, 80 mode: "jsx" 81 }) 82 </script> 83 84 <p>JSX Mode for <a href="http://facebook.github.io/react">React</a>'s 85 JavaScript syntax extension.</p> 86 87 <p><strong>MIME types defined:</strong> <code>text/jsx</code>, <code>text/typescript-jsx</code>.</p> 88 89 </article>