diff --git a/examples/README.md b/examples/README.md
new file mode 100644
index 0000000000..8f0989f6b6
--- /dev/null
+++ b/examples/README.md
@@ -0,0 +1,9 @@
+### React Router Examples
+
+In order to try out the examples, you need to follow these steps:
+
+1. Clone this repo
+1. Run `npm -g install webpack`, if you don't have it installed already
+1. Run `npm install` from the repo's root directory
+1. Run `./script/build-examples` from the repo's root directory
+1. Point your browser to the `index.html` location in this directory
diff --git a/examples/animations/app.css b/examples/animations/app.css
new file mode 100644
index 0000000000..4eeef9a770
--- /dev/null
+++ b/examples/animations/app.css
@@ -0,0 +1,30 @@
+.Image {
+ position: relative;
+}
+
+.Image img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 400;
+ width: 400;
+ background: gray;
+}
+
+.example-enter {
+ opacity: 0.01;
+ transition: opacity .5s ease-in;
+}
+
+.example-enter.example-enter-active {
+ opacity: 1;
+}
+
+.example-leave {
+ opacity: 1;
+ transition: opacity .5s ease-in;
+}
+
+.example-leave.example-leave-active {
+ opacity: 0.01;
+}
diff --git a/examples/animations/app.js b/examples/animations/app.js
index 5fa0cf5e37..874376e1be 100644
--- a/examples/animations/app.js
+++ b/examples/animations/app.js
@@ -41,4 +41,4 @@ var routes = (
);
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/animations/index.html b/examples/animations/index.html
index a68f5fa076..024f779cd9 100644
--- a/examples/animations/index.html
+++ b/examples/animations/index.html
@@ -1,37 +1,8 @@
Animation Example
-
-
+
+
+
+
diff --git a/examples/auth-flow/app.js b/examples/auth-flow/app.js
index 8d710887e7..d08dd71fcd 100644
--- a/examples/auth-flow/app.js
+++ b/examples/auth-flow/app.js
@@ -29,7 +29,6 @@ var App = React.createClass({
Sign in;
return (
-
Auth User Flow
- {loginOrOut}
- About
@@ -190,4 +189,4 @@ var routes = (
);
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/auth-flow/index.html b/examples/auth-flow/index.html
index 1d92fcd760..bd966bcf8b 100644
--- a/examples/auth-flow/index.html
+++ b/examples/auth-flow/index.html
@@ -1,6 +1,8 @@
Authentication Flow Example
-
+
+
+
diff --git a/examples/data-flow/app.css b/examples/data-flow/app.css
index f0836c5cc4..2083aae714 100644
--- a/examples/data-flow/app.css
+++ b/examples/data-flow/app.css
@@ -11,12 +11,18 @@ a.active {
color: hsl(20, 50%, 50%);
}
+#example {
+ position: absolute;
+}
+
.App {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
+ width: 500px;
+ height: 500px;
}
.Master {
diff --git a/examples/data-flow/app.js b/examples/data-flow/app.js
index 0ed89ae647..158163eb7d 100644
--- a/examples/data-flow/app.js
+++ b/examples/data-flow/app.js
@@ -72,4 +72,4 @@ var routes = (
);
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/data-flow/index.html b/examples/data-flow/index.html
index 0fbf9ce2f9..0b770d7099 100644
--- a/examples/data-flow/index.html
+++ b/examples/data-flow/index.html
@@ -1,6 +1,8 @@
Data Flow Example
+
+
+
-
diff --git a/examples/dynamic-segments/app.js b/examples/dynamic-segments/app.js
index f7456e316e..d16a33bedd 100644
--- a/examples/dynamic-segments/app.js
+++ b/examples/dynamic-segments/app.js
@@ -55,4 +55,4 @@ var routes = (
);
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/dynamic-segments/index.html b/examples/dynamic-segments/index.html
index 0cacc7701b..75daca3efc 100644
--- a/examples/dynamic-segments/index.html
+++ b/examples/dynamic-segments/index.html
@@ -1,5 +1,7 @@
Dynamic Segments Example
-
+
+
+
diff --git a/examples/app.css b/examples/global.css
similarity index 80%
rename from examples/app.css
rename to examples/global.css
index 09c56b2485..b2fdc81a92 100644
--- a/examples/app.css
+++ b/examples/global.css
@@ -15,3 +15,6 @@ a.active {
color: hsl(20, 50%, 50%);
}
+.breadcrumbs a {
+ text-decoration: none;
+}
diff --git a/examples/index.html b/examples/index.html
new file mode 100644
index 0000000000..1a5730760d
--- /dev/null
+++ b/examples/index.html
@@ -0,0 +1,17 @@
+
+React Router Examples
+
+
+React Router Examples
+
diff --git a/examples/master-detail/app.css b/examples/master-detail/app.css
index fc6cc32035..ab0545eb4d 100644
--- a/examples/master-detail/app.css
+++ b/examples/master-detail/app.css
@@ -11,12 +11,18 @@ a.active {
color: hsl(20, 50%, 50%);
}
+#example {
+ position: absolute;
+}
+
.App {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
+ width: 500px;
+ height: 500px;
}
.ContactList {
diff --git a/examples/master-detail/app.js b/examples/master-detail/app.js
index f7459feccf..1b2faec86e 100644
--- a/examples/master-detail/app.js
+++ b/examples/master-detail/app.js
@@ -213,7 +213,7 @@ var routes = (
);
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
// Request utils.
diff --git a/examples/master-detail/index.html b/examples/master-detail/index.html
index b8484ced3a..074ad93096 100644
--- a/examples/master-detail/index.html
+++ b/examples/master-detail/index.html
@@ -1,5 +1,8 @@
Master Detail Example
+
+
+
diff --git a/examples/partial-app-loading/app.js b/examples/partial-app-loading/app.js
index 58cda22251..38bbeb08fd 100644
--- a/examples/partial-app-loading/app.js
+++ b/examples/partial-app-loading/app.js
@@ -69,4 +69,4 @@ var routes = (
);
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/partial-app-loading/index.html b/examples/partial-app-loading/index.html
index 098fb42786..cb2ce6c337 100644
--- a/examples/partial-app-loading/index.html
+++ b/examples/partial-app-loading/index.html
@@ -1,5 +1,7 @@
Partial App Loading Example
-
+
+
+
diff --git a/examples/query-params/app.js b/examples/query-params/app.js
index fafae223c9..8ace6037d0 100644
--- a/examples/query-params/app.js
+++ b/examples/query-params/app.js
@@ -40,4 +40,4 @@ var routes = (
);
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/query-params/index.html b/examples/query-params/index.html
index 5b9750992c..a83a7e2faa 100644
--- a/examples/query-params/index.html
+++ b/examples/query-params/index.html
@@ -1,5 +1,7 @@
Query Params Example
-
+
+
+
diff --git a/examples/shared-root/app.js b/examples/shared-root/app.js
index 2e4513a918..05c6ba3f8a 100644
--- a/examples/shared-root/app.js
+++ b/examples/shared-root/app.js
@@ -80,4 +80,4 @@ var routes = (
);
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/shared-root/index.html b/examples/shared-root/index.html
index d5521e2bf0..3d8b6b5ea5 100644
--- a/examples/shared-root/index.html
+++ b/examples/shared-root/index.html
@@ -1,5 +1,7 @@
Shared Root Example
-
+
+
+
diff --git a/examples/simple-master-detail/app.css b/examples/simple-master-detail/app.css
index f0836c5cc4..eb2f94e5fa 100644
--- a/examples/simple-master-detail/app.css
+++ b/examples/simple-master-detail/app.css
@@ -11,12 +11,18 @@ a.active {
color: hsl(20, 50%, 50%);
}
+#example {
+ position: absolute;
+}
+
.App {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
+ width: 1000px;
+ height: 800px;
}
.Master {
@@ -24,7 +30,7 @@ a.active {
left: 0;
top: 0;
bottom: 0;
- width: 300px;
+ width: 200px;
overflow: auto;
padding: 10px 40px;
}
diff --git a/examples/simple-master-detail/app.js b/examples/simple-master-detail/app.js
index 6a439afadf..6b57314e40 100644
--- a/examples/simple-master-detail/app.js
+++ b/examples/simple-master-detail/app.js
@@ -58,7 +58,7 @@ var routes = (
);
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
/*****************************************************************************/
// data stuff
diff --git a/examples/simple-master-detail/index.html b/examples/simple-master-detail/index.html
index aab30e830d..15cb2928ca 100644
--- a/examples/simple-master-detail/index.html
+++ b/examples/simple-master-detail/index.html
@@ -1,5 +1,8 @@
Simple Master Detail Example
+
+
+
diff --git a/examples/transitions/app.js b/examples/transitions/app.js
index f8c80177ac..574fb8678e 100644
--- a/examples/transitions/app.js
+++ b/examples/transitions/app.js
@@ -64,4 +64,4 @@ var routes = (
);
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/transitions/index.html b/examples/transitions/index.html
index d264475afc..025275ff85 100644
--- a/examples/transitions/index.html
+++ b/examples/transitions/index.html
@@ -1,5 +1,7 @@
Transitions Example
-
+
+
+