Add basic CommonJS example with browserify
Andrey Popp committed
Apr 29, 2014 at 21:55 UTC
93fed1a459c420275fce28ca26cd7d28202689a5
4 files changed
+75
examples/basic-commonjs/README.md
new
+7
@@ -0,0 +1,7 @@
1
+# Basic example of using React with Browserify
2
+
3
+Run `npm install` in the directory to install React from npm. Then run:
4
+
5
+ ./node_modules/.bin/browserify --debug --transform reactify ./index.js > ./bundle.js
6
+
7
+to produce `bundle.js` with example code and React.
examples/basic-commonjs/index.html
new
+29
@@ -0,0 +1,29 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head>
4
+ <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
5
+ <title>Basic CommonJS Example with Browserify</title>
6
+ <link rel="stylesheet" href="../shared/css/base.css" />
7
+ </head>
8
+ <body>
9
+ <h1>Basic CommonJS Example with Browserify</h1>
10
+ <div id="container">
11
+ <p>
12
+ To install React, follow the instructions on
13
+ <a href="http://www.github.com/facebook/react/">GitHub</a>.
14
+ </p>
15
+ <p>
16
+ If you can see this, React is not working right.
17
+ If you checked out the source from GitHub make sure to run <code>grunt</code>.
18
+ </p>
19
+ </div>
20
+ <h4>Example Details</h4>
21
+ <p>This is written with JSX in a CommonJS module and precompiled to vanilla JS by running:</p>
22
+ <pre>browserify --debug --transform reactify index.js > bundle.js</pre>
23
+ <p>
24
+ Learn more about React at
25
+ <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
26
+ </p>
27
+ <script src="bundle.js"></script>
28
+ </body>
29
+</html>
examples/basic-commonjs/index.js
new
+25
@@ -0,0 +1,25 @@
1
+/**
2
+ * @jsx React.DOM
3
+ */
4
+
5
+var React = require('react');
6
+
7
+var ExampleApplication = React.createClass({
8
+ render: function() {
9
+ var elapsed = Math.round(this.props.elapsed / 100);
10
+ var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
11
+ var message =
12
+ 'React has been successfully running for ' + seconds + ' seconds.';
13
+
14
+ return <p>{message}</p>;
15
+ }
16
+});
17
+
18
+var start = new Date().getTime();
19
+
20
+setInterval(function() {
21
+ React.renderComponent(
22
+ <ExampleApplication elapsed={new Date().getTime() - start} />,
23
+ document.getElementById('container')
24
+ );
25
+}, 50);
examples/basic-commonjs/package.json
new
+14
@@ -0,0 +1,14 @@
1
+{
2
+ "name": "react-basic-commonjs-example",
3
+ "description": "Basic example of using React with CommonJS",
4
+ "main": "index.js",
5
+ "devDependencies": {
6
+ "envify": "~1.2.1",
7
+ "react": "~0.10.0",
8
+ "reactify": "~0.13.1",
9
+ "browserify": "~3.44.2"
10
+ },
11
+ "scripts": {
12
+ "build": "browserify --debug --transform reactify index.js > bundle.js"
13
+ }
14
+}