File modules/editor/codemirror/mode/jsx/index.html

Last commit: Sun Dec 17 01:14:09 2017 +0100	Jan Dankert	Integration eines weiteren Code-Editors: Codemirror. Demnächst müssen wir hier mal aufräumen und andere Editoren rauswerfen.


     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>



Download modules/editor/codemirror/mode/jsx/index.html


History
Sun, 17 Dec 2017 01:14:09 +0100	Jan Dankert	Integration eines weiteren Code-Editors: Codemirror. Demnächst müssen wir hier mal aufräumen und andere Editoren rauswerfen.