Merge pull request #1463 from andreypopp/example-commonjs

Add basic CommonJS example with browserify
2025-11-01 09:12:30 +00:00 · 2014-04-29 10:58:14 -07:00
parent b9e215d169 93fed1a459
commit 3eee27ebc8
4 changed files with 75 additions and 0 deletions
@@ -0,0 +1,7 @@
+# Basic example of using React with Browserify
+
+Run `npm install` in the directory to install React from npm. Then run:
+
+    ./node_modules/.bin/browserify --debug --transform reactify ./index.js > ./bundle.js
+
+to produce `bundle.js` with example code and React.
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
+    <title>Basic CommonJS Example with Browserify</title>
+    <link rel="stylesheet" href="../shared/css/base.css" />
+  </head>
+  <body>
+    <h1>Basic CommonJS Example with Browserify</h1>
+    <div id="container">
+      <p>
+        To install React, follow the instructions on
+        <a href="http://www.github.com/facebook/react/">GitHub</a>.
+      </p>
+      <p>
+        If you can see this, React is not working right.
+        If you checked out the source from GitHub make sure to run <code>grunt</code>.
+      </p>
+    </div>
+    <h4>Example Details</h4>
+    <p>This is written with JSX in a CommonJS module and precompiled to vanilla JS by running:</p>
+    <pre>browserify --debug --transform reactify index.js &gt; bundle.js</pre>
+    <p>
+      Learn more about React at
+      <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
+    </p>
+    <script src="bundle.js"></script>
+  </body>
+</html>
@@ -0,0 +1,25 @@
+/**
+  * @jsx React.DOM
+  */
+
+var React = require('react');
+
+var ExampleApplication = React.createClass({
+  render: function() {
+    var elapsed = Math.round(this.props.elapsed  / 100);
+    var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
+    var message =
+      'React has been successfully running for ' + seconds + ' seconds.';
+
+    return <p>{message}</p>;
+  }
+});
+
+var start = new Date().getTime();
+
+setInterval(function() {
+  React.renderComponent(
+    <ExampleApplication elapsed={new Date().getTime() - start} />,
+    document.getElementById('container')
+  );
+}, 50);
@@ -0,0 +1,14 @@
+{
+  "name": "react-basic-commonjs-example",
+  "description": "Basic example of using React with CommonJS",
+  "main": "index.js",
+  "devDependencies": {
+    "envify": "~1.2.1",
+    "react": "~0.10.0",
+    "reactify": "~0.13.1",
+    "browserify": "~3.44.2"
+  },
+  "scripts": {
+    "build": "browserify --debug --transform reactify index.js > bundle.js"
+  }
+}