mirror of https://github.com/gogits/gogs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.3 KiB
89 lines
2.3 KiB
<!doctype html> |
|
|
|
<title>CodeMirror: JSX mode</title> |
|
<meta charset="utf-8"/> |
|
<link rel=stylesheet href="../../doc/docs.css"> |
|
|
|
<link rel="stylesheet" href="../../lib/codemirror.css"> |
|
<script src="../../lib/codemirror.js"></script> |
|
<script src="../javascript/javascript.js"></script> |
|
<script src="../xml/xml.js"></script> |
|
<script src="jsx.js"></script> |
|
<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style> |
|
<div id=nav> |
|
<a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a> |
|
|
|
<ul> |
|
<li><a href="../../index.html">Home</a> |
|
<li><a href="../../doc/manual.html">Manual</a> |
|
<li><a href="https://github.com/codemirror/codemirror">Code</a> |
|
</ul> |
|
<ul> |
|
<li><a href="../index.html">Language modes</a> |
|
<li><a class=active href="#">JSX</a> |
|
</ul> |
|
</div> |
|
|
|
<article> |
|
<h2>JSX mode</h2> |
|
|
|
<div><textarea id="code" name="code">// Code snippets from http://facebook.github.io/react/docs/jsx-in-depth.html |
|
|
|
// Rendering HTML tags |
|
var myDivElement = <div className="foo" />; |
|
ReactDOM.render(myDivElement, document.getElementById('example')); |
|
|
|
// Rendering React components |
|
var MyComponent = React.createClass({/*...*/}); |
|
var myElement = <MyComponent someProperty={true} />; |
|
ReactDOM.render(myElement, document.getElementById('example')); |
|
|
|
// Namespaced components |
|
var Form = MyFormComponent; |
|
|
|
var App = ( |
|
<Form> |
|
<Form.Row> |
|
<Form.Label /> |
|
<Form.Input /> |
|
</Form.Row> |
|
</Form> |
|
); |
|
|
|
// Attribute JavaScript expressions |
|
var person = <Person name={window.isLoggedIn ? window.name : ''} />; |
|
|
|
// Boolean attributes |
|
<input type="button" disabled />; |
|
<input type="button" disabled={true} />; |
|
|
|
// Child JavaScript expressions |
|
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>; |
|
|
|
// Comments |
|
var content = ( |
|
<Nav> |
|
{/* child comment, put {} around */} |
|
<Person |
|
/* multi |
|
line |
|
comment */ |
|
name={window.isLoggedIn ? window.name : ''} // end of line comment |
|
/> |
|
</Nav> |
|
); |
|
</textarea></div> |
|
|
|
<script> |
|
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { |
|
lineNumbers: true, |
|
mode: "jsx" |
|
}) |
|
</script> |
|
|
|
<p>JSX Mode for <a href="http://facebook.github.io/react">React</a>'s |
|
JavaScript syntax extension.</p> |
|
|
|
<p><strong>MIME types defined:</strong> <code>text/jsx</code>.</p> |
|
|
|
</article>
|
|
|