From 936da8930e3e6f3781ac72917d2e072685d9a9fa Mon Sep 17 00:00:00 2001 From: Shinnosuke Komiya Date: Sat, 5 Mar 2016 00:15:20 +0900 Subject: [PATCH] edit readme --- README.md | 50 --------------------------------------------- src/scripts/main.js | 45 +++++++++++++++++++++++++++++++++++++--- 2 files changed, 42 insertions(+), 53 deletions(-) diff --git a/README.md b/README.md index 2dce8ac..e7969cf 100644 --- a/README.md +++ b/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 diff --git a/src/scripts/main.js b/src/scripts/main.js index d030912..2df4bef 100644 --- a/src/scripts/main.js +++ b/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 ( -
hoge
+
+

Users

+
+
    + {/* use Link to route around the app */} + {this.state.users.map(user => ( +
  • {user.name}
  • + ))} +
+
+
+ {this.props.children} +
+
); } }); +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 ( +
+

{this.state.user.name}

+ {/* etc. */} +
+ ); + } +}) render(( - + -),document.body); +), document.body);