56 |
60 |
57 | { page.main_content }
58 |
59 | 
31 |
32 | React / Cosmic JS (2.3 seconds):
33 |
34 | 
35 |
36 | * Benchmarking was performed by running ApacheBench. ```ab -n 100 -c 10 http://tonyspiro.com/``` and ```ab -n 100 -c 10 http://tonyspiro.com:8000/```
37 |
38 | * React Router is used to perform the navigation between "pages". Running ```npm start``` boots a node server that allows for the pages to render properly when loaded in from a url or on page refresh.
39 |
40 | * The [Cosmic JS browser package](https://github.com/cosmicjs/cosmicjs-browser) is used to pull the data from the Cosmic JS API into the app.
41 |
42 | * [Webpack](https://webpack.github.io/) is used for the dev and build process to turn ES6 JS into browser-friendly ES5 JS using the babel-loader.
43 |
44 | * The front end style is based off [a theme from Start Bootstrap](http://startbootstrap.com/template-overviews/clean-blog/).
45 |
46 | ###How I did it
47 | Here are the steps that were taken to build this app:
48 |
49 | 1. I exported the data out of [my WP blog](http://tonyspiro.com) using the [Cosmic JS WP Export plugin](https://github.com/cosmicjs/cosmicjs-wp-export). The exported JSON file is included in this repo at [tonyspirocom.json](https://github.com/tonyspiro/tonyspiro.com-react/blob/master/tonyspirocom.json)
50 | 2. I created a new bucket in [Cosmic JS](https://cosmicjs.com)
51 | 3. I then imported the JSON file into my Cosmic JS bucket
52 | 4. I built the React app and edited [config.js](https://github.com/tonyspiro/tonyspiro.com-react/blob/master/config.js) to point to the correct bucket in Cosmic JS
53 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | // app.js
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 | import { Router, Route, IndexRoute, Link } from 'react-router';
5 | import createBrowserHistory from 'history/lib/createBrowserHistory';
6 | let history = createBrowserHistory();
7 |
8 | // Utilities
9 | import AppStore from './stores/AppStore';
10 | import AppDispatcher from './dispatcher/AppDispatcher';
11 |
12 | // Components
13 | import Nav from './components/Nav';
14 | import Footer from './components/Footer';
15 | import Loading from './components/Loading';
16 |
17 | // Pages
18 | import Blog from './pages/Blog';
19 | import Work from './pages/Work';
20 | import Default from './pages/Default';
21 | import NoMatch from './pages/NoMatch';
22 |
23 |
24 | let getAppState = () => {
25 | return {
26 | data: AppStore.data
27 | };
28 | }
29 |
30 | class App extends React.Component{
31 |
32 | // Method to setState based upon Store changes
33 | _onChange() {
34 | this.setState(getAppState());
35 | }
36 |
37 | constructor() {
38 |
39 | super();
40 |
41 | // API data
42 | AppDispatcher.dispatch({
43 | action: 'init-app'
44 | });
45 |
46 | }
47 |
48 | // Add change listeners to stores
49 | componentDidMount() {
50 | AppStore.addChangeListener(this._onChange.bind(this));
51 | }
52 |
53 | // Remove change listeners from stores
54 | componentWillUnmount() {
55 | AppStore.removeChangeListener(this._onChange.bind(this));
56 | }
57 |
58 | render(){
59 |
60 | if(!AppStore.data.ready){
61 | let style = {
62 | marginTop: 120
63 | }
64 | return (
65 | Posted by Tony Spiro on { created }
61 |Posted by Tony Spiro on { created }
61 |