side by side working

Author: Roy Sivan

.gitignore

@@ -1,2 +1,6 @@
 bower_components/*
-bower_components
+bower_components
+node_modules/*
+*.log
+
+npm-debug.log

assets/css/ang_react.css

@@ -1,2 +1,2 @@
 body {
-  background: purple; }
+  background: white; }

assets/css/bootstrap_custom.css

@@ -1007,8 +1007,7 @@ body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.42857;
-  color: #333333;
-  background-color: #fff; }
+  color: #333333; }
 
 input, button, select, textarea {
   font-family: inherit;

assets/js/angular_app.js

@@ -7,6 +7,6 @@ reang = angular.module('reang', ['ngResource'])
 })
 .controller( 'reang_controller', ['$rootScope', '$scope', 'Posts', function($rootScope, $scope, Posts){
 	Posts.query({}, function(res){
-		console.log(res);
+		$scope.posts = res;
 	});
-})
+}]);

assets/js/react_app.js

@@ -0,0 +1,54 @@
+var React = require('react');
+var $ = jQuery;
+
+var Post = React.createClass({
+	render: function(){
+		return (
+			<article>
+				<h1>{this.props.post.title}</h1>
+				{this.props.post.content}
+			</article>
+		)
+	}
+})
+
+
+var App = React.createClass({
+	
+	getposts: function() {
+		console.log('getting posts..');
+		$.ajax({
+			url: 'http://dclient.dev/wp-json/posts',
+			dataType: 'json',
+			method: 'GET',
+			success: function(res){
+				console.log( res );
+				this.setState({data:res})
+			}.bind(this)
+		});	
+	},
+	
+	getInitialState: function() {
+		return { data: [{ title: 'test'}] }
+	},
+	
+	componentDidMount: function() {
+		this.getposts();
+	},
+	
+	render: function() { 
+		if(this.state.data.length) {
+			return (
+				<div>
+					{this.state.data.map(function(post){
+						return (
+							<Post post={post}></Post>
+						)
+					})}
+				</div>
+			)
+		}
+	}
+});
+
+React.render(<App/>, document.getElementById( 'test_react' ) );

assets/js/react_app.jsx

@@ -1,5 +1 @@
-var $ = jQuery;
-
-$(document).ready(function(){
-	console.log('here');
-})
+var $ = jQuery;

assets/js/scripts.js

@@ -1,3 +1,3 @@
 body {
-	background: purple;
+	background: white;
 }

assets/scss/ang_react.scss

@@ -13,6 +13,6 @@
   "dependencies": {
     "angular": "~1.3.15",
     "angular-resource": "~1.3.15",
-    "react": "~0.13.1"
+    "bootstrap-sass": "~3.3.4"
   }
 }

bower.json

@@ -1,5 +1,5 @@
 body {
-  background: purple;
+  background: white;
 }
 /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
 
@@ -1406,7 +1406,6 @@ body {
   font-size: 14px;
   line-height: 1.42857;
   color: #333333;
-  background-color: #fff;
 }
 
 input,