~

index.html

@@ -11,6 +11,9 @@
     <GithubLogo />
   </div>
 	<section id="react"></section>
+  <section id="render-target"></section>
+  <FlipMove />
 	<script type="text/javascript" src="dist/js/app.js"></script>
+  <script type="text/javascript" src="dist/js/es6.app.js"></script>
 </body>
 </html>

package.json

@@ -7,29 +7,22 @@
   "scripts": {
     "clean": "rm -f dist/{css/*,js/*,img/*}",
     "autoprefixer": "postcss -u autoprefixer -r dist/css/*",
-
     "less": "for file in src/less/*.less; do lessc --strict-imports $file dist/css/`basename -s .less $file`.css ; done",
-
     "lint": "eslint src/js",
     "jsxhint": "jsxhint src/js",
-    "react": "mkdir -p dist/js/ && browserify -t [ babelify --presets [ react ] ] src/js/app.js -o dist/js/app.js",
+    "react": "mkdir -p dist/js/ && browserify -t [ babelify --presets [ react es2015 ] ] src/js/app.js -o dist/js/app.js && browserify -t [ babelify --presets [ react es2015 ] ] src/js/es6.app.jsx -o dist/js/es6.app.js",
     "uglify": "mkdir -p dist/js && rm -rf dist/js/app.min.js && uglifyjs dist/js/*.js -m -c -o dist/js/app.min.js",
-
     "imagemin": "imagemin src/img dist/img -p",
     "icons": "svgo -f src/img/icons && mkdir -p dist/img && svg-sprite-generate -d src/img/icons -o dist/img/icons.svg",
-
     "serve": "browser-sync start --reload-delay 200 --server --files 'dist/css/**/*.css, dist/js/**/*.js, **/*.html, !node_modules/**/*.html'",
-
     "build:less": "npm run less && npm run autoprefixer",
     "build:js": "npm run react",
     "build:img": "npm run imagemin && npm run icons",
     "build:all": "npm run build:less && npm run build:js && npm run build:img",
-
     "watch:less": "onchange 'src/less/**/*.less' -v -- npm run build:less",
     "watch:js": "onchange 'src/js/**/*.*' -- npm run build:js",
     "watch:img": "onchange 'src/img/**/*.*' -- npm run build:img",
     "watch:all": "npm-run-all -p build:all watch:less watch:js watch:img serve",
-
     "postinstall": "npm run watch:all"
   },
   "browser": {
@@ -41,7 +34,8 @@
         "babelify",
         {
           "presets": [
-            "react"
+            "react",
+            "es2015"
           ]
         }
       ]
@@ -54,6 +48,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.3.1",
+    "babel-preset-es2015": "^6.5.0",
     "babel-preset-react": "^6.5.0",
     "babelify": "^7.2.0",
     "browser-sync": "^2.11.1",
@@ -65,7 +60,6 @@
     "imagemin-cli": "^2.1.0",
     "jsxhint": "^0.15.1",
     "less": "^2.6.0",
-    "node-sass": "^3.4.2",
     "npm-run-all": "^1.5.1",
     "onchange": "^2.0.0",
     "parallelshell": "^2.0.0",
@@ -78,6 +72,7 @@
     "vinyl-source-stream": "~1.0.0"
   },
   "dependencies": {
-    "react": "~0.13.2"
+    "react": "~0.13.2",
+    "react-flip-move": "^1.1.1"
   }
 }

src/js/components/title.js

@@ -2,10 +2,20 @@
 
 var React = require('react');
 
+var FlipMove = require('react-flip-move');
+
 var Title = React.createClass({
+  renderTopArticles: function() {
+    return <span>Hello world</span>
+  },
   render: function() {
     return <p>
       {this.props.name}
+      <div className="top-articles">
+        <FlipMove easing="cubic-bezier(0, 0.7, 0.8, 0.1)">
+          { this.renderTopArticles() }
+        </FlipMove>
+      </div>
     </p>;
   }
 });