The library for web and native user interfaces.
Adding instructions for chrome. (No server needed! Just execute a single command line to load in Chrome).
Adding instructions for chrome. (No server needed! Just execute a single command line to load in Chrome).
jordow committed
Jun 3, 2013 at 02:39 UTC
8c37499af82e57f0487319abca2242cbad4024b8
1 file changed
+52
-20
examples/basic-jsx-external/index.html
+52
-20
@@ -4,34 +4,66 @@
4
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
5
<title>Basic Example with external JSX</title>
6
<link rel="stylesheet" href="../shared/css/base.css" />
7
+ <style type="text/css" media="screen">
8
+ .codeBox {
9
+ padding: 7px;
10
+ overflow:scroll;
11
+ background-color: #eee;
12
+ font-weight:normal;
13
+ }
14
+ </style>
15
+ <script type="text/javascript" charset="utf-8">
16
+ window.setTimeout(function() {
17
+ var chromeClientCLI = window.chromeClientCLI;
18
+ var errorBox = window.errorBox;
19
+ var chromeErrorFooter = window.chromeErrorFooter;
20
+ var chromeInstructions = window.chromeInstructions;
21
+ var isChrome = !!window.chrome;
22
+ chromeClientCLI.innerText =
23
+ 'open -a "Google Chrome" --new \\\n' +
24
+ ' ' + window.location.href + ' \\\n' +
25
+ ' --args --allow-file-access-from-files --user-data-dir=/tmp';
26
+
27
+ errorBox.innerText =
28
+ isChrome ? 'To run in Chrome, do one of the following:' :
29
+ 'Errors loading page: Check the console.'
30
+ chromeErrorFooter.innerText =
31
+ isChrome ? 'If page still does not load, check console.' : '';
32
+
33
+ if (!isChrome) {
34
+ chromeInstructions.innerText = "";
35
+ }
36
+ }, 0);
37
+
38
+ </script>
39
</head>
40
+
41
<body>
42
<h1>Basic Example with external JSX</h1>
43
<div id="container">
44
<p>
12
- If you can see this, React is not working right. This is probably because you're viewing
13
- this on your file system instead of a web server. Try running
14
- <pre>
15
- python -m SimpleHTTPServer
16
- </pre>
17
- and going to <a href="http://localhost:8080/">http://localhost:8080/</a>.
45
+ <h4 id="errorBox" style="color: #733"></h4>
46
+ <ol id="chromeInstructions">
47
+ <li>
48
+ Open this page on a Mac via the terminal command:
49
+ <pre id="chromeClientCLI" class="codeBox">
50
+ </li>
51
+ <h4><i>OR</i></h4>
52
+ <li>
53
+ Serve this page from a web server
54
+ <pre id="chromeServerCLI" class="codeBox">
55
+cd /Path/To/This/File
56
+python -m SimpleHTTPServer
57
+open -a "Google Chrome" <a href="http://localhost:8080/">http://localhost:8080/</a>. </pre>
58
+ </li>
59
+ </ol>
60
+ <h4 id="chromeErrorFooter" style="color: #733"></h4>
61
</p>
62
</div>
20
- <h4>Example Details</h4>
21
- <ul>
22
- <li>
23
- This is built with
24
- <a href="https://github.com/substack/node-browserify">browserify</a>.
25
- </li>
26
- <li>
27
- This is written with JSX in a separate file and transformed in the browser.
28
- </li>
29
- </ul>
30
- <p>
31
- </p>
63
<p>
33
- Learn more at
34
- <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
64
+ Example Details: This is built with
65
+ <a href="https://github.com/substack/node-browserify">browserify</a>.
66
+ A separate JSX file is transformed in the browser.
67
</p>
68
<script src="../../build/react.js"></script>
69
<script src="../../build/JSXTransformer.js"></script>