index.html 2.3 KB

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