using the new version grammar

app/components/header.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import './header.less'
+
+class Header extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <div className="components-logo row">
+                <img src="/static/images/logo.png" width="40" className="-col-auto"/>
+                <h1 className="caption">React Music Player</h1>
+            </div>
+        )
+    }
+}
+
+export default Header;

app/final/components/listItem.js → app/components/listItem.js

@@ -1,15 +1,18 @@
 import React from 'react';
-require('./listitem.less');
-let PubSub = require('pubsub-js');
+import './listitem.less';
+import PubSub from 'pubsub-js';
 
-let ListItem = React.createClass({
-	deleteHandler(item, event) {
+class ListItem extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    deleteHandler(item, event) {
 		event.stopPropagation();
 		PubSub.publish('DEL_MUSIC', item);
-	},
+	}
 	playMusic(item, e) {
 		PubSub.publish('PLAY_MUSIC', item);
-	},
+	}
     render() {
     	let item = this.props.data;
         return (
@@ -19,6 +22,6 @@ let ListItem = React.createClass({
             </li>
         );
     }
-});
+}
 
 export default ListItem;

app/final/components/listitem.less → app/components/listitem.less

@@ -1,8 +1,8 @@
 .components-listitem {
-	height: 36px;
-	line-height: 36px;
+	height: 40px;
+	line-height: 40px;
 	border-bottom: 1px solid #ddd;
-	text-indent: 10px;
+	text-indent: 15px;
 	cursor: pointer;
 	.delete {
 		cursor: pointer;

app/final/components/progress.js → app/components/progress.js

@@ -1,24 +1,25 @@
 import React from 'react';
-require('./progress.less');
+import './progress.less';
 
-let Progress = React.createClass({
-	getDefaultProps() {
-		return {
-			barColor: '#2f9842'
-		}
-	},
+class Progress extends React.Component {
+	constructor (props) {
+		super(props);
+	}
 	changeProgress(e) {
 		let progressBar = this.refs.progressBar;
 		let progress = (e.clientX - progressBar.getBoundingClientRect().left) / progressBar.clientWidth;
 		this.props.onProgressChange && this.props.onProgressChange(progress);
-	},
+	}
     render() {
         return (
-        	<div className="components-progress" ref="progressBar" onClick={this.changeProgress}>
+        	<div className="components-progress" ref="progressBar" onClick={this.changeProgress.bind(this)}>
         		<div className="progress" style={{width: `${this.props.progress}%`, background: this.props.barColor}}></div>
         	</div>
         );
     }
-});
+}
+Progress.defaultProps = {
+	barColor: '#2f9842'
+}
 
 export default Progress;

app/helloworld/index.js → app/index.js

@@ -1,24 +1,23 @@
-import React from 'react';
-import { render } from 'react-dom';
-import { AppContainer } from 'react-hot-loader';
-import Root from './Root';
-
+import React from 'react'
+import { render } from 'react-dom'
+import { AppContainer } from 'react-hot-loader'
+import Root from './root'
 
 render(
     <AppContainer>
         <Root />
     </AppContainer>,
     document.getElementById('root')
-);
+)
 
-if (module.hot) {
-    module.hot.accept('./Root', () => {
-        const NewRoot = require('./Root').default;
+if(module.hot) {
+    module.hot.accept('./root', () => {
+        const NewRoot = require('./root').default;
         render(
             <AppContainer>
                 <NewRoot />
             </AppContainer>,
             document.getElementById('root')
         );
     });
-}
+}

app/index.tpl.html

@@ -7,8 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
     <link rel="stylesheet" type="text/css" href="/static/css/common.css">
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-   	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>
+    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
+   	<script type="text/javascript" src="https://cdn.bootcss.com/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>
 </head>
 
 <body class="view-login">

app/page/list.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { MUSIC_LIST } from '../config/config';
+import ListItem from '../components/listitem';
+
+class List extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        let Items = null;
+        if(this.props.musicList) {
+            Items = this.props.musicList.map((item) => {
+                return (
+                    <ListItem
+                        key={item.id}
+                        data={item}
+                        focus={this.props.currentMusicItem === item}
+                    ></ListItem>
+                );
+            });
+        }
+        return (
+            <ul>
+                { Items }
+            </ul>
+        );
+    }
+}
+
+export default List;