Permalink
Browse files

Install Babel and React and modify Grunt to run Babel task

  • Loading branch information...
jekkilekki committed Dec 7, 2016
1 parent 2cbbbc8 commit 3fc993d835cbf8eccaa982b390bedf7bebd61710
Showing with 214 additions and 49 deletions.
  1. +34 −2 Gruntfile.js
  2. +4 −2 index.html
  3. +86 −0 js/app.js
  4. +10 −0 js/app.min.js
  5. +0 −45 js/functions.js
  6. +65 −0 js/react-app.js
  7. +15 −0 package.json
@@ -42,20 +42,52 @@ module.exports = function( grunt ) {
src: '*.css',
dest: ''
}
}
},

/**
* BabelJS task
* @link https://babeljs.io/docs/usage/api/
*/
babel: {
dev: {
options: {
minified: false,
sourceMap: false,
presets: ['latest']
},
files: {
"js/app.js": "js/react-app.js"
}
},
dist: {
options: {
minified: true,
sourceMap: false,
presets: ['latest']
},
files: {
"js/app.min.js": "js/react-app.js"
}
}
},

/**
* Watch task
*/
watch: {
css: {
files: '**/*.scss', /* What files are we watching? */
tasks: ['sass','autoprefixer'] /* Run this task (above) */
tasks: [ 'sass','autoprefixer' ] /* Run this task (above) */
},
js: {
files: 'js/react-app.js',
tasks: [ 'babel' ]
}
},
});
grunt.loadNpmTasks( 'grunt-contrib-sass' );
grunt.loadNpmTasks( 'grunt-contrib-watch' );
grunt.loadNpmTasks( 'grunt-autoprefixer' );
grunt.loadNpmTasks( 'grunt-babel' );
grunt.registerTask( 'default', ['watch'] );
}
@@ -6,7 +6,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sonsie+One|Quicksand|Nunito|Varela+Round|Averia+Serif+Libre" />
<!-- Load local Stylesheets -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="style.css" />
</head>

<body>
@@ -366,8 +366,10 @@ <h1 class="present-title">25<span>th</span></h1>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/axios/0.8.1/axios.min.js"></script>

<!-- Load local JavaScript -->
<!-- Load local JavaScript functions -->
<script type="text/javascript" src="js/functions.js"></script>
<!-- Load the JS with our React app -->
<script type="text/javascript" src="js/app.js"></script>

</body>
</html>
@@ -0,0 +1,86 @@
'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
* REACT app with WP API
* @link http://mediatemple.net/blog/tips/loading-and-using-external-data-in-react/
* @link http://codepen.io/krogsgard/pen/NRBqPp
*/
var Advent = _react2.default.createClass({
displayName: 'Advent',

// Set the initial React state
getInitialState: function getInitialState() {
return {
posts: [] // our data setup is expecting Posts
};
},
// something
componentDidMount: function componentDidMount() {
var _th = this;
this.serverRequest = axios.get(this.props.source).then(function (result) {
_th.setState({
posts: result.data
});
});
},

// Error handling - if Ajax request is still going when React (or you) remove a component, abort Ajax request
componentWillUnmount: function componentWillUnmount() {
this.serverRequest.abort();
},

// Render our component!!
render: function render() {
return _react2.default.createElement(
'div',
{ className: 'post-wrapper' },
this.state.posts.map(function (post) {
return _react2.default.createElement(
'div',
{ key: post.link, className: 'post' },
_react2.default.createElement(
'h2',
{ className: 'post-title' },
_react2.default.createElement('a', { href: post.link,
dangerouslySetInnerHTML: { __html: post.title.rendered }
})
),
post.featured_media ? _react2.default.createElement(
'a',
{ href: post.link },
_react2.default.createElement('img', { src: post._embedded['wp:featuredmedia'][0].media_details.sizes["large"].source_url })
) : null,
post.excerpt.rendered ? _react2.default.createElement('div', { className: 'excerpt', dangerouslySetInnerHTML: { __html: post.excerpt.rendered } }) : null,
_react2.default.createElement(
'div',
{ className: 'entry-meta' },
_react2.default.createElement(
'a',
{ className: 'author-wrap', href: post._embedded.author[0].link },
_react2.default.createElement('img', { className: 'avatar', src: post._embedded.author[0].avatar_urls['48'] }),
'by\xA0 ',
post._embedded.author[0].name
),
_react2.default.createElement(
'a',
{ className: 'button read-more', href: post.link },
'Read More \xBB'
)
)
);
})
);
}
});

_react2.default.render(_react2.default.createElement(Advent, { source: 'http://aaronsnowberger.com/wp-json/wp/v2/posts/?_embed&categories=764&per_page=3&author=1' }), document.querySelector("#posts"));

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -140,48 +140,3 @@ function numberTrans( id, endpt, transDur, transEase ) {
}
});
};

// /**
// * REACT app with WP API
// * @link http://mediatemple.net/blog/tips/loading-and-using-external-data-in-react/
// * @link http://codepen.io/krogsgard/pen/NRBqPp
// */
// var Advent = React.createClass({
// // Set the initial React state
// getInitialState: function() {
// return {
// posts: [] // our data setup is expecting Posts
// }
// },

// componentDidMount: function() {
// var _th = this;
// this.serverRequest =
// axios
// .get(this.props.source)
// .then(function(result) {
// _th.setState({
// posts: result.data
// });
// });
// },

// // Error handling - if Ajax request is still going when React (or you) remove a component, abort Ajax request
// componentWillUnmount: function() {
// this.serverRequest.abort();
// },

// // Render our component!!
// render: function() {
// return (
// <div>
// { /* Render stuff here */ }
// </div>
// )
// }
// });

// React.render(
// <App source="#" />,
// document.querySelector("#app")
// );
@@ -0,0 +1,65 @@
import React from 'react';
import ReactDOM from 'react-dom';

/**
* REACT app with WP API
* @link http://mediatemple.net/blog/tips/loading-and-using-external-data-in-react/
* @link http://codepen.io/krogsgard/pen/NRBqPp
*/
var Advent = React.createClass({
// Set the initial React state
getInitialState: function() {
return {
posts: [] // our data setup is expecting Posts
}
},
// something
componentDidMount: function() {
var _th = this;
this.serverRequest =
axios
.get(this.props.source)
.then(function(result) {
_th.setState({
posts: result.data
});
});
},

// Error handling - if Ajax request is still going when React (or you) remove a component, abort Ajax request
componentWillUnmount: function() {
this.serverRequest.abort();
},

// Render our component!!
render: function() {
return (
<div className="post-wrapper">
{this.state.posts.map(function(post) {
return (
<div key={post.link} className="post">
<h2 className="post-title"><a href={post.link}
dangerouslySetInnerHTML={{__html:post.title.rendered}}
/></h2>
{post.featured_media ?
<a href={post.link}><img src={post._embedded['wp:featuredmedia'][0].media_details.sizes["large"].source_url} /></a>
: null}
{post.excerpt.rendered ?
<div className="excerpt" dangerouslySetInnerHTML={{__html:post.excerpt.rendered}} />
: null}
<div className="entry-meta">
<a className="author-wrap" href={post._embedded.author[0].link}><img className="avatar" src={post._embedded.author[0].avatar_urls['48']} />by&nbsp; {post._embedded.author[0].name}</a>
<a className="button read-more" href={post.link}>Read More &raquo;</a>
</div>
</div>
);
})}
</div>
)
}
});

React.render(
<Advent source="http://aaronsnowberger.com/wp-json/wp/v2/posts/?_embed&categories=764&per_page=3&author=1" />,
document.querySelector("#posts")
);
@@ -19,10 +19,25 @@
"url": "https://github.com/jekkilekki/advent-calendar/issues"
},
"homepage": "https://github.com/jekkilekki/advent-calendar#readme",
"babel": {
"presets": [
"latest",
"react"
]
},
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.16.0",
"grunt": "^1.0.1",
"grunt-autoprefixer": "^3.0.4",
"grunt-babel": "^6.0.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-watch": "^1.0.0"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1"
}
}

0 comments on commit 3fc993d

Please sign in to comment.