@samitouri / QOS-React-2 / commits / 4a37718e4e

Remove examples/ folder (#9323)

Dan Abramov committed Apr 3, 2017 at 20:32 UTC 4a37718e4ed56f1893abb19f59ec91a861000803
47 files changed +16 -1144
.eslintignore
-1
@@ -9,7 +9,6 @@ docs/_site/
9 docs/vendor/bundle/
10 # This should be more like examples/**/thirdparty/** but
11 # we should fix https://github.com/facebook/esprima/pull/85 first
12 -examples/
12 fixtures/
13 # Ignore built files.
14 build/
.flowconfig
-1
@@ -1,6 +1,5 @@
1 [ignore]
2
3 -<PROJECT_ROOT>/examples/.*
3 <PROJECT_ROOT>/fixtures/.*
4 <PROJECT_ROOT>/build/.*
5 <PROJECT_ROOT>/.*/node_modules/y18n/.*
.gitignore
-2
@@ -17,8 +17,6 @@ docs/.sass-cache
17 docs/js/*
18 docs/downloads/*.zip
19 docs/vendor/bundle
20 -examples/shared/*.js
21 -examples/**/bundle.js
20 fixtures/dom/public/react-dom.js
21 fixtures/dom/public/react.js
22 test/the-files-to-test.generated.js
docs/contributing/how-to-contribute.md
+1 -1
@@ -115,7 +115,7 @@ We recommend running `npm test` (or its variations above) to make sure you don't
115
116 First, run `npm run build`. This will produce pre-built bundles in `build` folder, as well as prepare npm packages inside `build/packages`.
117
118 -The easiest way to try your changes is to open and modify `examples/basic/index.html`. This file already uses `react.js` from the `build` folder so it will pick up your changes. Please make sure to rollback any unintentional changes in `examples` before sending a pull request.
118 +The easiest way to try your changes is to run `npm run build` and then open `fixtures/packaging/globals.html`. This file already uses `react.js` from the `build` folder so it will pick up your changes.
119
120 If you want to try your changes in your existing React project, you may copy `build/react.js`, `build/react-dom.js`, or any other build products into your app and use them instead of the stable version. If your project uses React from npm, you may delete `react` and `react-dom` in its dependencies and use `npm link` to point them to your local `build` folder:
121
docs/docs/web-components.md
-2
@@ -56,5 +56,3 @@ const proto = Object.create(HTMLElement.prototype, {
56 });
57 document.registerElement('x-search', {prototype: proto});
58 ```
59 -
60 -You can also check out this [complete Web Components example on GitHub](https://github.com/facebook/react/tree/master/examples/webcomponents).
examples/README.md deleted
-5
@@ -1,5 +0,0 @@
1 -# React Examples
2 -
3 -Here are some small React demos. Some use [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) and some include third-party library integration.
4 -
5 -For more fully-featured examples, check out [React TodoMVC](http://todomvc.com/examples/react/) and [React + Backbone TodoMVC](http://todomvc.com/examples/react-backbone/).
examples/basic-click-counter/index.html deleted
-54
@@ -1,54 +0,0 @@
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8">
5 - <title>Basic Click Counter Example with JSX</title>
6 - <link rel="stylesheet" href="../shared/css/base.css" />
7 - </head>
8 - <body>
9 - <h1>Basic Click Counter Example with JSX</h1>
10 - <div id="container">
11 - <p>
12 - To install React, follow the instructions on
13 - <a href="https://github.com/facebook/react/">GitHub</a>.
14 - </p>
15 - <p>
16 - If you can see this, React is <strong>not</strong> 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 and transformed in the browser.</p>
22 - <p>This example uses events and state to track clicks and update the rendered output.</p>
23 - <p>
24 - Learn more about React at
25 - <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
26 - </p>
27 - <script src="../../build/react.js"></script>
28 - <script src="../../build/react-dom.js"></script>
29 - <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
30 - <script type="text/babel">
31 - var Counter = React.createClass({
32 - getInitialState: function () {
33 - return { count: 0 };
34 - },
35 - handleClick: function () {
36 - this.setState({
37 - count: this.state.count + 1,
38 - });
39 - },
40 - render: function () {
41 - return (
42 - <button onClick={this.handleClick}>
43 - Click me! Number of clicks: {this.state.count}
44 - </button>
45 - );
46 - }
47 - });
48 - ReactDOM.render(
49 - <Counter />,
50 - document.getElementById('container')
51 - );
52 - </script>
53 - </body>
54 -</html>
examples/basic-commonjs/.babelrc deleted
-3
@@ -1,3 +0,0 @@
1 -{
2 - "presets": ["react", "es2015"]
3 -}
examples/basic-commonjs/README.md deleted
-9
@@ -1,9 +0,0 @@
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 -```sh
6 -npm start
7 -```
8 -
9 -to produce `bundle.js` with example code and React.
examples/basic-commonjs/index.html deleted
-37
@@ -1,37 +0,0 @@
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta 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="https://github.com/facebook/react/">GitHub</a>.
14 - </p>
15 - <p>
16 - If you can see this, React is <strong>not</strong> 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 navigating to the example
22 - directory
23 - <pre>cd /path/to/react/examples/example-name</pre>
24 - and running
25 - <pre>npm start</pre>
26 - <br>
27 - (don't forget to install first)
28 - <pre>npm install</pre>
29 - <br>
30 - </p>
31 - <p>
32 - Learn more about React at
33 - <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
34 - </p>
35 - <script src="bundle.js"></script>
36 - </body>
37 -</html>
examples/basic-commonjs/index.js deleted
-24
@@ -1,24 +0,0 @@
1 -'use strict';
2 -
3 -var React = require('react');
4 -var ReactDOM = require('react-dom');
5 -
6 -var ExampleApplication = React.createClass({
7 - render: function() {
8 - var elapsed = Math.round(this.props.elapsed / 100);
9 - var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
10 - var message =
11 - 'React has been successfully running for ' + seconds + ' seconds.';
12 -
13 - return <p>{message}</p>;
14 - }
15 -});
16 -
17 -var start = new Date().getTime();
18 -
19 -setInterval(function() {
20 - ReactDOM.render(
21 - <ExampleApplication elapsed={new Date().getTime() - start} />,
22 - document.getElementById('container')
23 - );
24 -}, 50);
examples/basic-commonjs/package.json deleted
-19
@@ -1,19 +0,0 @@
1 -{
2 - "name": "react-basic-commonjs-example",
3 - "description": "Basic example of using React with CommonJS",
4 - "private": true,
5 - "main": "index.js",
6 - "dependencies": {
7 - "babel-preset-es2015": "^6.6.0",
8 - "babel-preset-react": "^6.5.0",
9 - "babelify": "^7.3.0",
10 - "browserify": "^13.0.0",
11 - "react": "^15.0.2",
12 - "react-dom": "^15.0.2",
13 - "watchify": "^3.7.0"
14 - },
15 - "scripts": {
16 - "build": "browserify ./index.js -t babelify -o bundle.js",
17 - "start": "watchify ./index.js -v -t babelify -o bundle.js"
18 - }
19 -}
examples/basic-jsx-external/example.js deleted
-19
@@ -1,19 +0,0 @@
1 -var ExampleApplication = React.createClass({
2 - render: function() {
3 - var elapsed = Math.round(this.props.elapsed / 100);
4 - var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
5 - var message =
6 - 'React has been successfully running for ' + seconds + ' seconds.';
7 -
8 - return <p>{message}</p>;
9 - }
10 -});
11 -
12 -var start = new Date().getTime();
13 -
14 -setInterval(function() {
15 - ReactDOM.render(
16 - <ExampleApplication elapsed={new Date().getTime() - start} />,
17 - document.getElementById('container')
18 - );
19 -}, 50);
examples/basic-jsx-external/index.html deleted
-37
@@ -1,37 +0,0 @@
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8">
5 - <title>Basic Example with External JSX</title>
6 - <link rel="stylesheet" href="../shared/css/base.css" />
7 - </head>
8 -
9 - <body>
10 - <h1>Basic Example with External JSX</h1>
11 - <div id="container">
12 - <p>
13 - If you can see this, React is <strong>not</strong> working right. This is probably because you&apos;re viewing
14 - this on your file system instead of a web server.<br>
15 - Try navigating to the React root
16 - <pre>
17 - cd /path/to/react
18 - </pre>
19 - and running
20 - <pre>
21 - python -m SimpleHTTPServer
22 - </pre>
23 - and going to <a href="http://localhost:8000/examples/basic-jsx-external/">http://localhost:8000/examples/basic-jsx-external/</a>.
24 - </p>
25 - </div>
26 - <h4>Example Details</h4>
27 - <p>This is written with JSX in a separate file and transformed in the browser.</p>
28 - <p>
29 - Learn more about React at
30 - <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
31 - </p>
32 - <script src="../../build/react.js"></script>
33 - <script src="../../build/react-dom.js"></script>
34 - <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
35 - <script type="text/babel" src="example.js"></script>
36 - </body>
37 -</html>
examples/basic-jsx-harmony/index.html deleted
-49
@@ -1,49 +0,0 @@
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8">
5 - <title>Basic Example with JSX and ES6 features</title>
6 - <link rel="stylesheet" href="../shared/css/base.css" />
7 - </head>
8 - <body>
9 - <h1>Basic Example with JSX and ES6 features</h1>
10 - <div id="container">
11 - <p>
12 - To install React, follow the instructions on
13 - <a href="https://github.com/facebook/react/">GitHub</a>.
14 - </p>
15 - <p>
16 - If you can see this, React is <strong>not</strong> 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 with Harmony (ES6) syntax and transformed in the browser.</p>
22 - <p>
23 - Learn more about React at
24 - <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25 - </p>
26 - <script src="../../build/react.js"></script>
27 - <script src="../../build/react-dom.js"></script>
28 - <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
29 - <script type="text/babel">
30 - class ExampleApplication extends React.Component {
31 - render() {
32 - var elapsed = Math.round(this.props.elapsed / 100);
33 - var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
34 - var message =
35 - `React has been successfully running for ${seconds} seconds.`;
36 -
37 - return <p>{message}</p>;
38 - }
39 - }
40 - var start = new Date().getTime();
41 - setInterval(() => {
42 - ReactDOM.render(
43 - <ExampleApplication elapsed={new Date().getTime() - start} />,
44 - document.getElementById('container')
45 - );
46 - }, 50);
47 - </script>
48 - </body>
49 -</html>
examples/basic-jsx-precompile/example.js deleted
-19
@@ -1,19 +0,0 @@
1 -var ExampleApplication = React.createClass({
2 - render: function() {
3 - var elapsed = Math.round(this.props.elapsed / 100);
4 - var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
5 - var message =
6 - 'React has been successfully running for ' + seconds + ' seconds.';
7 -
8 - return <p>{message}</p>;
9 - }
10 -});
11 -
12 -var start = new Date().getTime();
13 -
14 -setInterval(function() {
15 - ReactDOM.render(
16 - <ExampleApplication elapsed={new Date().getTime() - start} />,
17 - document.getElementById('container')
18 - );
19 -}, 50);
examples/basic-jsx-precompile/index.html deleted
-40
@@ -1,40 +0,0 @@
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8">
5 - <title>Basic Example with Precompiled JSX</title>
6 - <link rel="stylesheet" href="../shared/css/base.css" />
7 - </head>
8 - <body>
9 - <h1>Basic Example with Precompiled JSX</h1>
10 - <div id="container">
11 - <p>
12 - If you can see this, React is <strong>not</strong> running. Try running:
13 - </p>
14 - <pre>npm install -g babel-cli
15 -cd examples/basic-jsx-precompile/
16 -npm install babel-preset-react
17 -babel example.js --presets react --out-dir=build</pre>
18 - </div>
19 - <h4>Example Details</h4>
20 - <p>This is written with JSX in a separate file and precompiled to vanilla JS by running:</p>
21 -
22 - <p><i>With Babel lower than 6.0</i></p>
23 - <pre>npm install -g babel
24 -cd examples/basic-jsx-precompile/
25 -babel example.js --out-dir=build</pre>
26 -
27 - <p><i>With Babel 6.0 or higher</i></p>
28 - <pre>npm install -g babel-cli
29 -cd examples/basic-jsx-precompile/
30 -npm install babel-preset-react
31 -babel example.js --presets react --out-dir=build</pre>
32 - <p>
33 - Learn more about React at
34 - <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
35 - </p>
36 - <script src="../../build/react.js"></script>
37 - <script src="../../build/react-dom.js"></script>
38 - <script src="build/example.js"></script>
39 - </body>
40 -</html>
examples/basic-jsx/index.html deleted
-49
@@ -1,49 +0,0 @@
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8">
5 - <title>Basic Example with JSX</title>
6 - <link rel="stylesheet" href="../shared/css/base.css" />
7 - </head>
8 - <body>
9 - <h1>Basic Example with JSX</h1>
10 - <div id="container">
11 - <p>
12 - To install React, follow the instructions on
13 - <a href="https://github.com/facebook/react/">GitHub</a>.
14 - </p>
15 - <p>
16 - If you can see this, React is <strong>not</strong> 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 and transformed in the browser.</p>
22 - <p>
23 - Learn more about React at
24 - <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25 - </p>
26 - <script src="../../build/react.js"></script>
27 - <script src="../../build/react-dom.js"></script>
28 - <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
29 - <script type="text/babel">
30 - var ExampleApplication = React.createClass({
31 - render: function() {
32 - var elapsed = Math.round(this.props.elapsed / 100);
33 - var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
34 - var message =
35 - 'React has been successfully running for ' + seconds + ' seconds.';
36 -
37 - return <p>{message}</p>;
38 - }
39 - });
40 - var start = new Date().getTime();
41 - setInterval(function() {
42 - ReactDOM.render(
43 - <ExampleApplication elapsed={new Date().getTime() - start} />,
44 - document.getElementById('container')
45 - );
46 - }, 50);
47 - </script>
48 - </body>
49 -</html>
examples/basic/index.html deleted
-52
@@ -1,52 +0,0 @@
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8">
5 - <title>Basic Example</title>
6 - <link rel="stylesheet" href="../shared/css/base.css" />
7 - </head>
8 - <body>
9 - <h1>Basic Example</h1>
10 - <div id="container">
11 - <p>
12 - To install React, follow the instructions on
13 - <a href="https://github.com/facebook/react/">GitHub</a>.
14 - </p>
15 - <p>
16 - If you can see this, React is <strong>not</strong> 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 in vanilla JavaScript (without JSX) and transformed in the browser.</p>
22 - <p>
23 - Learn more about React at
24 - <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25 - </p>
26 - <script src="../../build/react.js"></script>
27 - <script src="../../build/react-dom.js"></script>
28 - <script>
29 - var ExampleApplication = React.createClass({
30 - render: function() {
31 - var elapsed = Math.round(this.props.elapsed / 100);
32 - var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
33 - var message =
34 - 'React has been successfully running for ' + seconds + ' seconds.';
35 -
36 - return React.DOM.p(null, message);
37 - }
38 - });
39 -
40 - // Call React.createFactory instead of directly call ExampleApplication({...}) in React.render
41 - var ExampleApplicationFactory = React.createFactory(ExampleApplication);
42 -
43 - var start = new Date().getTime();
44 - setInterval(function() {
45 - ReactDOM.render(
46 - ExampleApplicationFactory({elapsed: new Date().getTime() - start}),
47 - document.getElementById('container')
48 - );
49 - }, 50);
50 - </script>
51 - </body>
52 -</html>
examples/fiber/debugger/.env deleted
-1
@@ -1 +0,0 @@
1 -NODE_PATH=../../../build/packages
\ No newline at end of file
examples/jquery-bootstrap/css/example.css deleted
-3
@@ -1,3 +0,0 @@
1 -.example {
2 - margin: 20px;
3 -}
\ No newline at end of file
examples/jquery-bootstrap/index.html deleted
-20
@@ -1,20 +0,0 @@
1 -<!doctype html>
2 -<html lang="en">
3 - <head>
4 - <meta charset="utf-8">
5 - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 - <title>jQuery Integration</title>
7 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
8 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
9 - <link rel="stylesheet" href="css/example.css" type="text/css" />
10 - </head>
11 - <body>
12 - <div id="jqueryexample"></div>
13 - <script src="../../build/react.js"></script>
14 - <script src="../../build/react-dom.js"></script>
15 - <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
16 - <script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
17 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
18 - <script type="text/babel" src="js/app.js"></script>
19 - </body>
20 -</html>
examples/jquery-bootstrap/js/app.js deleted
-139
@@ -1,139 +0,0 @@
1 -'use strict';
2 -
3 -// Simple pure-React component so we don't have to remember
4 -// Bootstrap's classes
5 -var BootstrapButton = React.createClass({
6 - render: function() {
7 - return (
8 - <a {...this.props}
9 - href="javascript:;"
10 - role="button"
11 - className={(this.props.className || '') + ' btn'} />
12 - );
13 - }
14 -});
15 -
16 -var BootstrapModal = React.createClass({
17 - // The following two methods are the only places we need to
18 - // integrate Bootstrap or jQuery with the components lifecycle methods.
19 - componentDidMount: function() {
20 - // When the component is added, turn it into a modal
21 - $(this.refs.root).modal({backdrop: 'static', keyboard: false, show: false});
22 -
23 - // Bootstrap's modal class exposes a few events for hooking into modal
24 - // functionality. Lets hook into one of them:
25 - $(this.refs.root).on('hidden.bs.modal', this.handleHidden);
26 - },
27 - componentWillUnmount: function() {
28 - $(this.refs.root).off('hidden.bs.modal', this.handleHidden);
29 - },
30 - close: function() {
31 - $(this.refs.root).modal('hide');
32 - },
33 - open: function() {
34 - $(this.refs.root).modal('show');
35 - },
36 - render: function() {
37 - var confirmButton = null;
38 - var cancelButton = null;
39 -
40 - if (this.props.confirm) {
41 - confirmButton = (
42 - <BootstrapButton
43 - onClick={this.handleConfirm}
44 - className="btn-primary">
45 - {this.props.confirm}
46 - </BootstrapButton>
47 - );
48 - }
49 - if (this.props.cancel) {
50 - cancelButton = (
51 - <BootstrapButton onClick={this.handleCancel} className="btn-default">
52 - {this.props.cancel}
53 - </BootstrapButton>
54 - );
55 - }
56 -
57 - return (
58 - <div className="modal fade" ref="root">
59 - <div className="modal-dialog">
60 - <div className="modal-content">
61 - <div className="modal-header">
62 - <button
63 - type="button"
64 - className="close"
65 - onClick={this.handleCancel}>
66 - &times;
67 - </button>
68 - <h3>{this.props.title}</h3>
69 - </div>
70 - <div className="modal-body">
71 - {this.props.children}
72 - </div>
73 - <div className="modal-footer">
74 - {cancelButton}
75 - {confirmButton}
76 - </div>
77 - </div>
78 - </div>
79 - </div>
80 - );
81 - },
82 - handleCancel: function() {
83 - if (this.props.onCancel) {
84 - this.props.onCancel();
85 - }
86 - },
87 - handleConfirm: function() {
88 - if (this.props.onConfirm) {
89 - this.props.onConfirm();
90 - }
91 - },
92 - handleHidden: function() {
93 - if (this.props.onHidden) {
94 - this.props.onHidden();
95 - }
96 - }
97 -});
98 -
99 -var Example = React.createClass({
100 - handleCancel: function() {
101 - if (confirm('Are you sure you want to cancel?')) {
102 - this.refs.modal.close();
103 - }
104 - },
105 - render: function() {
106 - var modal = null;
107 - modal = (
108 - <BootstrapModal
109 - ref="modal"
110 - confirm="OK"
111 - cancel="Cancel"
112 - onCancel={this.handleCancel}
113 - onConfirm={this.closeModal}
114 - onHidden={this.handleModalDidClose}
115 - title="Hello, Bootstrap!">
116 - This is a React component powered by jQuery and Bootstrap!
117 - </BootstrapModal>
118 - );
119 - return (
120 - <div className="example">
121 - {modal}
122 - <BootstrapButton onClick={this.openModal} className="btn-default">
123 - Open modal
124 - </BootstrapButton>
125 - </div>
126 - );
127 - },
128 - openModal: function() {
129 - this.refs.modal.open();
130 - },
131 - closeModal: function() {
132 - this.refs.modal.close();
133 - },
134 - handleModalDidClose: function() {
135 - alert("The modal has been dismissed!");
136 - }
137 -});
138 -
139 -ReactDOM.render(<Example />, document.getElementById('jqueryexample'));
examples/jquery-mobile/README.md deleted
-6
@@ -1,6 +0,0 @@
1 -jQuery Mobile React Example
2 -===========================
3 -
4 -This example demonstrates how jQuery Mobile applications can be built with React.
5 -
6 -The source code is based on jQuery Mobile's [pages-multi-page example](https://github.com/jquery/jquery-mobile/tree/master/demos/pages-multi-page).
examples/jquery-mobile/index.html deleted
-19
@@ -1,19 +0,0 @@
1 -<!doctype html>
2 -<html lang="en">
3 -<head>
4 - <meta charset="utf-8">
5 - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 - <meta name="viewport" content="width=device-width, initial-scale=1">
7 - <title>jQuery Mobile React Example</title>
8 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />
9 - <link rel="stylesheet" href="https://demos.jquerymobile.com/1.4.5/_assets/css/jqm-demos.css" />
10 -</head>
11 -<body class="ui-mobile-viewport ui-overlay-a">
12 - <div id="content"></div>
13 - <script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
14 - <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
15 - <script src="../../build/react.js"></script>
16 - <script src="../../build/react-dom.js"></script>
17 - <script src="js/app.js"></script>
18 -</body>
19 -</html>
examples/jquery-mobile/js/app.js deleted
-191
@@ -1,191 +0,0 @@
1 -/**
2 - * jQuery Mobile React Example
3 - *
4 - * Main application script.
5 - * For variety, this example is written in 100% JSHint-compliant JavaScript, not in JSX.
6 - *
7 - * Component structure:
8 - *
9 - * - App
10 - * |-- JQueryMobilePage (one)
11 - * | |-- JQueryMobileHeader
12 - * | |-- JQueryMobileContent
13 - * | | |-- PageOneContent
14 - * | | |-- JQueryMobileButton
15 - * | |-- JQueryMobileFooter
16 - * |-- JQueryMobilePage (two)
17 - * | |-- JQueryMobileHeader
18 - * | |-- JQueryMobileContent
19 - * | | |-- PageTwoContent
20 - * | | |-- JQueryMobileButton
21 - * | |-- JQueryMobileFooter
22 - * |-- JQueryMobilePage (popup)
23 - * |-- JQueryMobileHeader
24 - * |-- JQueryMobileContent
25 - * | |-- PagePopUpContent
26 - * | |-- JQueryMobileButton
27 - * |-- JQueryMobileFooter
28 - */
29 -
30 - /* global document, React */
31 -
32 -'use strict';
33 -
34 -/** Main application component. */
35 -var App = React.createClass({
36 - displayName: 'App',
37 -
38 - render: function() {
39 - return React.DOM.div({className:'app'},
40 - JQueryMobilePage({id:'one'}, PageOneContent(null)),
41 - JQueryMobilePage({id:'two'}, PageTwoContent(null)),
42 - JQueryMobilePage({id:'popup', headerTheme:'b'}, PagePopUpContent(null))
43 - );
44 - }
45 -});
46 -App = React.createFactory(App);
47 -
48 -/** jQuery Mobile button component. */
49 -var JQueryMobileButton = React.createClass({
50 - displayName: 'JQueryMobileButton',
51 -
52 - getDefaultProps: function() {
53 - return {className:'ui-btn ui-shadow ui-corner-all'};
54 - },
55 -
56 - render: function() {
57 - return React.DOM.p(null,
58 - React.DOM.a(this.props, this.props.children)
59 - );
60 - }
61 -});
62 -JQueryMobileButton = React.createFactory(JQueryMobileButton);
63 -
64 -/** jQuery Mobile page content component. */
65 -var JQueryMobileContent = React.createClass({
66 - displayName: 'JQueryMobileContent',
67 -
68 - render: function() {
69 - return React.DOM.div({role:'main', className:'ui-content'},
70 - this.props.children
71 - );
72 - }
73 -});
74 -JQueryMobileContent = React.createFactory(JQueryMobileContent);
75 -
76 -/** jQuery Mobile footer component. */
77 -var JQueryMobileFooter = React.createClass({
78 - displayName: 'JQueryMobileFooter',
79 -
80 - render: function() {
81 - return React.DOM.div({'data-role':'footer'},
82 - React.DOM.h4(null, 'Page footer')
83 - );
84 - }
85 -});
86 -JQueryMobileFooter = React.createFactory(JQueryMobileFooter);
87 -
88 -/** jQuery Mobile header component. */
89 -var JQueryMobileHeader = React.createClass({
90 - displayName: 'JQueryMobileHeader',
91 -
92 - render: function() {
93 - return React.DOM.div({'data-role':'header', 'data-theme':this.props.headerTheme},
94 - React.DOM.h1(null, this.props.title)
95 - );
96 - }
97 -});
98 -JQueryMobileHeader = React.createFactory(JQueryMobileHeader);
99 -
100 -/** jQuery Mobile page component. */
101 -var JQueryMobilePage = React.createClass({
102 - displayName: 'JQueryMobilePage',
103 -
104 - getDefaultProps: function() {
105 - return {'data-role':'page', 'data-theme':'a', headerTheme:'a'};
106 - },
107 -
108 - render: function() {
109 - var props = {};
110 - for (var key in this.props) {
111 - props[key] = this.props[key];
112 - }
113 - return React.DOM.div(props,
114 - JQueryMobileHeader({title:'Page ' + this.props.id, headerTheme:this.props.headerTheme}),
115 - JQueryMobileContent(null, this.props.children),
116 - JQueryMobileFooter(null)
117 - );
118 - }
119 -});
120 -JQueryMobilePage = React.createFactory(JQueryMobilePage);
121 -
122 -/** Application page one component. */
123 -var PageOneContent = React.createClass({
124 - displayName: 'PageOneContent',
125 -
126 - render: function() {
127 - return React.DOM.div(null,
128 - React.DOM.h2(null, 'One'),
129 - React.DOM.p(null,
130 - 'I have an ',
131 - React.DOM.code(null, 'id'),
132 - ' of "one" on my page container. I\'m first in the source order so I\'m shown when the page loads.'
133 - ),
134 - React.DOM.p(null, 'This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a single page template that has just one page within it.'),
135 - React.DOM.p(null, 'Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.'),
136 - React.DOM.p(null,
137 - 'You link to internal pages by referring to the ',
138 - React.DOM.code(null, 'id'),
139 - ' of the page you want to show. For example, to ',
140 - React.DOM.a({href:'#two'}, 'link'),
141 - ' to the page with an ',
142 - React.DOM.code(null, 'id'),
143 - ' of "two", my link would have a ',
144 - React.DOM.code(null, 'href="#two"'),
145 - ' in the code.'
146 - ),
147 - React.DOM.h3(null, 'Show internal pages:'),
148 - JQueryMobileButton({href:'#two'}, 'Show page "two"'),
149 - JQueryMobileButton({href:'#popup', 'data-rel':'dialog', 'data-transition':'pop'}, 'Show page "popup" (as a dialog)')
150 - );
151 - }
152 -});
153 -PageOneContent = React.createFactory(PageOneContent);
154 -
155 -/** Application page two component. */
156 -var PageTwoContent = React.createClass({
157 - displayName: 'PageTwoContent',
158 -
159 - render: function() {
160 - return React.DOM.div(null,
161 - React.DOM.h2(null, 'Two'),
162 - React.DOM.p(null, 'I have an id of "two" on my page container. I\'m the second page container in this multi-page template.'),
163 - React.DOM.p(null, 'Notice that the theme is different for this page because we\'ve added a few ',
164 - React.DOM.code(null, 'data-theme'),
165 - ' swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we\'re keeping these simple.'),
166 - JQueryMobileButton({href:'#one', 'data-direction':'reverse', className:'ui-btn ui-shadow ui-corner-all ui-btn-b'}, 'Back to page "one"')
167 - );
168 - }
169 -});
170 -PageTwoContent = React.createFactory(PageTwoContent);
171 -
172 -/** Application popup page component. */
173 -var PagePopUpContent = React.createClass({
174 - displayName: 'PagePopUpContent',
175 -
176 - render: function() {
177 - return React.DOM.div(null,
178 - React.DOM.h2(null, 'Popup'),
179 - React.DOM.p(null, 'I have an id of "popup" on my page container and only look like a dialog because the link to me had a ',
180 - React.DOM.code(null, 'data-rel="dialog"'),
181 - ' attribute which gives me this inset look and a ',
182 - React.DOM.code(null, 'data-transition="pop"'),
183 - ' attribute to change the transition to pop. Without this, I\'d be styled as a normal page.'),
184 - JQueryMobileButton({href:'#one', 'data-rel':'back', className:'ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left'}, 'Back to page "one"')
185 - );
186 - }
187 -});
188 -PagePopUpContent = React.createFactory(PagePopUpContent);
189 -
190 -// Render application.
191 -ReactDOM.render(App(null), document.getElementById('content'));
examples/quadratic/example.js deleted
-59
@@ -1,59 +0,0 @@
1 -var QuadraticCalculator = React.createClass({
2 - getInitialState: function() {
3 - return {
4 - a: 1,
5 - b: 3,
6 - c: -4
7 - };
8 - },
9 -
10 - /**
11 - * This function will be re-bound in render multiple times. Each .bind() will
12 - * create a new function that calls this with the appropriate key as well as
13 - * the event. The key is the key in the state object that the value should be
14 - * mapped from.
15 - */
16 - handleInputChange: function(key, event) {
17 - var partialState = {};
18 - partialState[key] = parseFloat(event.target.value);
19 - this.setState(partialState);
20 - },
21 -
22 - render: function() {
23 - var a = this.state.a;
24 - var b = this.state.b;
25 - var c = this.state.c;
26 - var root = Math.sqrt(Math.pow(b, 2) - 4 * a * c);
27 - var denominator = 2 * a;
28 - var x1 = (-b + root) / denominator;
29 - var x2 = (-b - root) / denominator;
30 - return (
31 - <div>
32 - <strong>
33 - <em>ax</em><sup>2</sup> + <em>bx</em> + <em>c</em> = 0
34 - </strong>
35 - <h4>Solve for <em>x</em>:</h4>
36 - <p>
37 - <label>
38 - a: <input type="number" value={a} onChange={this.handleInputChange.bind(null, 'a')} />
39 - </label>
40 - <br />
41 - <label>
42 - b: <input type="number" value={b} onChange={this.handleInputChange.bind(null, 'b')} />
43 - </label>
44 - <br />
45 - <label>
46 - c: <input type="number" value={c} onChange={this.handleInputChange.bind(null, 'c')} />
47 - </label>
48 - <br />
49 - x: <strong>{x1}, {x2}</strong>
50 - </p>
51 - </div>
52 - );
53 - }
54 -});
55 -
56 -ReactDOM.render(
57 - <QuadraticCalculator />,
58 - document.getElementById('container')
59 -);
examples/quadratic/index.html deleted
-31
@@ -1,31 +0,0 @@
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8">
5 - <title>Quadratic Formula Calculator</title>
6 - <link rel="stylesheet" href="../shared/css/base.css" />
7 - </head>
8 - <body>
9 - <h1>Quadratic Formula Calculator</h1>
10 - <div id="container">
11 - <p>
12 - If you can see this, React is <strong>not</strong> working right. This is probably because you&apos;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:8000/">http://localhost:8000/</a>.
18 - </p>
19 - </div>
20 - <h4>Example Details</h4>
21 - <p>This is written with JSX in a separate file and transformed in the browser.</p>
22 - <p>
23 - Learn more about React at
24 - <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25 - </p>
26 - <script src="../../build/react.js"></script>
27 - <script src="../../build/react-dom.js"></script>
28 - <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
29 - <script type="text/babel" src="example.js"></script>
30 - </body>
31 -</html>
examples/shared/css/base.css deleted
-62
@@ -1,62 +0,0 @@
1 -body {
2 - background: #fff;
3 - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
4 - font-size: 15px;
5 - line-height: 1.7;
6 - margin: 0;
7 - padding: 30px;
8 -}
9 -
10 -a {
11 - color: #4183c4;
12 - text-decoration: none;
13 -}
14 -
15 -a:hover {
16 - text-decoration: underline;
17 -}
18 -
19 -code {
20 - background-color: #f8f8f8;
21 - border: 1px solid #ddd;
22 - border-radius: 3px;
23 - font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
24 - font-size: 12px;
25 - margin: 0 2px;
26 - padding: 0px 5px;
27 -}
28 -
29 -h1, h2, h3, h4 {
30 - font-weight: bold;
31 - margin: 0 0 15px;
32 - padding: 0;
33 -}
34 -
35 -h1 {
36 - border-bottom: 1px solid #ddd;
37 - font-size: 2.5em;
38 - font-weight: bold;
39 - margin: 0 0 15px;
40 - padding: 0;
41 -}
42 -
43 -h2 {
44 - border-bottom: 1px solid #eee;
45 - font-size: 2em;
46 -}
47 -
48 -h3 {
49 - font-size: 1.5em;
50 -}
51 -
52 -h4 {
53 - font-size: 1.2em;
54 -}
55 -
56 -p, ul {
57 - margin: 15px 0;
58 -}
59 -
60 -ul {
61 - padding-left: 30px;
62 -}
examples/transitions/index.html deleted
-81
@@ -1,81 +0,0 @@
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8">
5 - <title>Example with Transitions</title>
6 - <link rel="stylesheet" href="../shared/css/base.css" />
7 - <link rel="stylesheet" href="transition.css" />
8 - </head>
9 - <body>
10 - <h1>Example with Transitions</h1>
11 - <div id="container">
12 - <p>
13 - To install React, follow the instructions on
14 - <a href="https://github.com/facebook/react/">GitHub</a>.
15 - </p>
16 - <p>
17 - If you can see this, React is <strong>not</strong> working right.
18 - If you checked out the source from GitHub make sure to run <code>grunt</code>.
19 - </p>
20 - </div>
21 - <h4>Example Details</h4>
22 - <p>This is written with JSX and transformed in the browser.</p>
23 - <p>
24 - Learn more about React at
25 - <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
26 - </p>
27 - <script src="../../build/react-with-addons.js"></script>
28 - <script src="../../build/react-dom.js"></script>
29 - <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
30 - <script type="text/babel">
31 - var CSSTransitionGroup = React.addons.CSSTransitionGroup;
32 - var INTERVAL = 2000;
33 -
34 - var AnimateDemo = React.createClass({
35 - getInitialState: function() {
36 - return {current: 0};
37 - },
38 -
39 - componentDidMount: function() {
40 - this.interval = setInterval(this.tick, INTERVAL);
41 - },
42 -
43 - componentWillUnmount: function() {
44 - clearInterval(this.interval);
45 - },
46 -
47 - tick: function() {
48 - this.setState({current: this.state.current + 1});
49 - },
50 -
51 - render: function() {
52 - var children = [];
53 - var pos = 0;
54 - var colors = ['red', 'gray', 'blue'];
55 - for (var i = this.state.current; i < this.state.current + colors.length; i++) {
56 - var style = {
57 - left: pos * 128,
58 - background: colors[i % colors.length]
59 - };
60 - pos++;
61 - children.push(<div key={i} className="animateItem" style={style}>{i}</div>);
62 - }
63 - return (
64 - <CSSTransitionGroup
65 - className="animateExample"
66 - transitionEnterTimeout={250}
67 - transitionLeaveTimeout={250}
68 - transitionName="example">
69 - {children}
70 - </CSSTransitionGroup>
71 - );
72 - }
73 - });
74 -
75 - ReactDOM.render(
76 - <AnimateDemo />,
77 - document.getElementById('container')
78 - );
79 - </script>
80 - </body>
81 -</html>
examples/transitions/transition.css deleted
-44
@@ -1,44 +0,0 @@
1 -.example-enter,
2 -.example-leave {
3 - -webkit-transition: all .25s;
4 - transition: all .25s;
5 -}
6 -
7 -.example-enter,
8 -.example-leave.example-leave-active {
9 - opacity: 0.01;
10 -}
11 -
12 -.example-leave.example-leave-active {
13 - margin-left: -128px;
14 -}
15 -
16 -.example-enter {
17 - margin-left: 128px;
18 -}
19 -
20 -.example-enter.example-enter-active,
21 -.example-leave {
22 - margin-left: 0;
23 - opacity: 1;
24 -}
25 -
26 -.animateExample {
27 - display: block;
28 - height: 128px;
29 - position: relative;
30 - width: 384px;
31 -}
32 -
33 -.animateItem {
34 - color: white;
35 - font-size: 36px;
36 - font-weight: bold;
37 - height: 128px;
38 - line-height: 128px;
39 - position: absolute;
40 - text-align: center;
41 - -webkit-transition: all .25s; /* TODO: make this a move animation */
42 - transition: all .25s; /* TODO: make this a move animation */
43 - width: 128px;
44 -}
examples/webcomponents/index.html deleted
-65
@@ -1,65 +0,0 @@
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8">
5 - <title>Basic Example with Web Components</title>
6 - <link rel="stylesheet" href="../shared/css/base.css" />
7 - </head>
8 - <body>
9 - <h1>Basic Example with Web Components</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 <strong>not</strong> working right.
17 - If you checked out the source from GitHub make sure to run <code>grunt</code>.
18 - </p>
19 - </div>
20 - <br /><br />
21 - <h4>Example Details</h4>
22 - <p>
23 - This example demonstrates Web Component / React Component interoperability
24 - by rendering a React Component, which renders a Web Component, which renders
25 - another React Component in the Web Component's shadow DOM.
26 - <p>
27 - <p>
28 - Learn more about React at
29 - <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
30 - </p>
31 - <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.21/webcomponents.js"></script>
32 - <script src="../../build/react.js"></script>
33 - <script src="../../build/react-dom.js"></script>
34 - <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
35 -
36 - <script type="text/babel">
37 -
38 - // Define Web Component
39 - var proto = Object.create(HTMLElement.prototype, {
40 - attachedCallback: {
41 - value: function() {
42 - var mountPoint = document.createElement('span');
43 - this.createShadowRoot().appendChild(mountPoint);
44 -
45 - var name = this.getAttribute('name');
46 - var url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
47 - ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
48 - }
49 - }
50 - });
51 - document.registerElement('x-search', {prototype: proto});
52 -
53 - // Define React Component
54 - class HelloMessage extends React.Component {
55 - render() {
56 - return <div>Hello <x-search name={this.props.name} />!</div>;
57 - }
58 - }
59 -
60 - // Mount React Component (which uses Web Component which uses React)
61 - var container = document.getElementById('container');
62 - ReactDOM.render(<HelloMessage name="Jim Sproch" />, container);
63 - </script>
64 - </body>
65 -</html>
fixtures/fiber-debugger/.env new
+1
@@ -0,0 +1 @@
1 +NODE_PATH=../../build/packages
\ No newline at end of file
fixtures/fiber-debugger/.gitignore renamed
fixtures/fiber-debugger/README.md renamed
fixtures/fiber-debugger/package.json renamed
fixtures/fiber-debugger/public/favicon.ico renamed
fixtures/fiber-debugger/public/index.html renamed
fixtures/fiber-debugger/src/App.js renamed
fixtures/fiber-debugger/src/Editor.js renamed
fixtures/fiber-debugger/src/Fibers.js renamed
fixtures/fiber-debugger/src/describeFibers.js renamed
fixtures/fiber-debugger/src/index.css renamed
fixtures/fiber-debugger/src/index.js renamed
fixtures/fiber-debugger/yarn.lock renamed
fixtures/fiber-triangle/index.html renamed
fixtures/packaging/babel-standalone.html new
+14
@@ -0,0 +1,14 @@
1 +<html>
2 + <body>
3 + <script src="../../build/react.js"></script>
4 + <script src="../../build/react-dom.js"></script>
5 + <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
6 + <div id="container"></div>
7 + <script type="text/babel">
8 + ReactDOM.render(
9 + <h1>Hello World!</h1>,
10 + document.getElementById('container')
11 + );
12 + </script>
13 + </body>
14 +</html>
\ No newline at end of file