edit readme

README.md

@@ -1,24 +1,3 @@
-# react-sass-boilerplate
-
-Quick start for React and Sass
-
-Required: Node.js v4
-
-## Files
-
-- .babelrc : Babel configuration
-- .eslintrc.js : ESLint configuration for gulpfile.js
-- .gitignore
-- gulpfile.js : Build tasks
-- package.json : Customize this for your project
-- README.md : Customize this for your project
-- build : Build directory
-- src : Source directory
-  - index.html : Single HTML file
-  - images : Images are here
-  - scripts : Front-end js and jsx are here
-    - .eslintrc.js : ESLint configuration for front-end scripts
-    - main.js : JavaScript entry point
 
 ## Usage
 
@@ -39,32 +18,3 @@ Just to build:
 ```
 npm run build
 ```
-
-## Modules
-
-- browser-sync
-- browserify
-  - babelify
-    - babel-polyfill
-    - babel-preset-es2015
-    - babel-preset-react
-  - licensify
-  - watchify
-- eslint
-  - eslint-plugin-node
-  - eslint-plugin-react
-- del
-- gulp
-  - gulp-changed
-  - gulp-load-plugins
-  - gulp-notify
-  - gulp-plumber
-  - gulp-sass
-    - gulp-autoprefixer
-    - gulp-cssnano
-    - gulp-uglify
-  - gulp-sourcemaps
-  - vinyl-buffer
-  - vinyl-source-stream
-- react
-  - react-dom

src/scripts/main.js

@@ -1,22 +1,61 @@
 import { Router, Route, Link } from "react-router";
 import React from "react";
 
+const App = React.createClass({
+
+});
+
 const Top = React.createClass({
+	render() {
+	}
+});
+
+const Users = React.createClass({
 	render() {
 		return (
-			<div>hoge</div>
+			<div>
+				<h1>Users</h1>
+				<div className="master">
+					<ul>
+						{/* use Link to route around the app */}
+            {this.state.users.map(user => (
+              <li key={user.id}><Link to={`/user/${user.id}`}>{user.name}</Link></li>
+            ))}
+					</ul>
+				</div>
+				<div className="detail">
+					{this.props.children}
+				</div>
+			</div>
 		);
 	}
 });
 
+const User = React.createClass({
+	componentDidMount() {
+		this.setState({
+			// route components are rendered with useful information, like URL params
+      user: findUserById(this.props.params.userId)
+		});
+	},
+
+	render() {
+    return (
+      <div>
+        <h2>{this.state.user.name}</h2>
+        {/* etc. */}
+      </div>
+    );
+  }
+})
 render((
 	<Router history={browserHistory}>
 		<Route path="/" component={App}>
 			<Route path="top" component={Top} />
-			<Route path="users" component={users}>
+			<Route path="users" component={Users}>
 				<Route path="/user/:userId" component={User} />
 			</Route>
 			<Route path="*" component={NoMatch} />
 		</Route>
 	</Router>
-),document.body);
+), document.body);