flipflopapp/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    Installation

Create a basic app

npm install -g create-react-app
create-react-app my-app

Run development server

yarn start

Add libraries

npm install --save redux
npm install --save react-redux
npm install --save react-router


## actions.js
import { ACTION1 } from './constants';

export function action1 (data1, data2) {
  return {
    type: ACTION1,
    data1,
    data2,
  }
}

// An Async Action using a library known as Thunk. Thunk has to be
// added as middleware for stores in createStore to work. You will
// have to google how to do that :)

const {apiCall} from './apis'; // to be implemented

export function asyncAction (data) {
  return (dispatch) => {
    dispatch({ type: 'API_ATTEMPT' });
    apiCall(data)
    .then((res) => {
      dispatch({ type: 'API_SUCCESS', res });
    })
    .catch((error) => {
      dispatch({ type: 'API_ERROR', error });
    })
  }
}

## components-example1.js
import React, { PropTypes, Component } from 'react';
import classNames from 'classnames';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

// The root

class MainApp extends Component {

  //constructor(props) {
  //  super(props);
  //}

  render() {
    const { children } = this.props;
    return (
      <div>
        <Header title="React Tutorial" />
        <div className="contents">
          {children}
        </div>
      </div>
    )
  }

}


## components-example2.js
import React, { PropTypes, Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import './App.css';

// The root

export function Root(props) {
  const { children } = props;
  return (
    <div>
      <Header title="React Tutorial" />
      <div className="contents">
        {children}
      </div>
    </div>
  )
}

// Header

function Header(props) {
  const {title} = props;
  return (
    <div>
      <h1>{title}</h1>
    </div>
  )
}

// Pages

export function Page1(props) {
  return (
    <div>
      <span>Hello World!</span>
    </div>
  )
}

## constants.js

// simple action
export const ACTION1 = 'ACTION1';

// async action with multiple stages
export const API_ATTEMPT = 'API_ATTEMPT';
export const API_SUCCESS = 'API_SUCCESS';
export const API_ERROR = 'API_ERROR';

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

## index.js
import 'babel-polyfill';

import React from 'react';
import ReactDOM from 'react-dom';

// redux
import { createStore, } from 'redux';
import { Provider } from 'react-redux';

// router
import { Router, Route, IndexRoute, } from 'react-router';
import createHistory from 'history/createBrowserHistory';
const history = createHistory()

// styles
import './index.css';

// state
import reducers from './reducers.js';
const store = createStore(reducers);

// components
import * as App from './App.js';
const {Root, Page1} = App;

// initialize
ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Root>
        <Route path="/*" component={Page1} />
      </Root>
    </Router>
  </Provider>
, document.getElementById('root'));

## package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-polyfill": "^6.23.0",
    "history": "^4.6.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.3",
    "react-router": "^4.0.0",
    "redux": "^3.6.0"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

## reducers-empty.js
const initialState = {};

export default function empty(state = initialState, action) {
    return state;
}
	import { ACTION1 } from './constants';

	export function action1 (data1, data2) {
	return {
	type: ACTION1,
	data1,
	data2,
	}
	}

	// An Async Action using a library known as Thunk. Thunk has to be
	// added as middleware for stores in createStore to work. You will
	// have to google how to do that :)

	const {apiCall} from './apis'; // to be implemented

	export function asyncAction (data) {
	return (dispatch) => {
	dispatch({ type: 'API_ATTEMPT' });
	apiCall(data)
	.then((res) => {
	dispatch({ type: 'API_SUCCESS', res });
	})
	.catch((error) => {
	dispatch({ type: 'API_ERROR', error });
	})
	}
	}
	import React, { PropTypes, Component } from 'react';
	import classNames from 'classnames';
	import { bindActionCreators } from 'redux';
	import { connect } from 'react-redux';

	// The root

	class MainApp extends Component {

	//constructor(props) {
	// super(props);
	//}

	render() {
	const { children } = this.props;
	return (
	<div>
	<Header title="React Tutorial" />
	<div className="contents">
	{children}
	</div>
	</div>
	)
	}

	}

	// simple action
	export const ACTION1 = 'ACTION1';

	// async action with multiple stages
	export const API_ATTEMPT = 'API_ATTEMPT';
	export const API_SUCCESS = 'API_SUCCESS';
	export const API_ERROR = 'API_ERROR';
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>React App</title>
	</head>
	<body>
	<div id="root"></div>
	</body>
	</html>
	import 'babel-polyfill';

	import React from 'react';
	import ReactDOM from 'react-dom';

	// redux
	import { createStore, } from 'redux';
	import { Provider } from 'react-redux';

	// router
	import { Router, Route, IndexRoute, } from 'react-router';
	import createHistory from 'history/createBrowserHistory';
	const history = createHistory()

	// styles
	import './index.css';

	// state
	import reducers from './reducers.js';
	const store = createStore(reducers);

	// components
	import * as App from './App.js';
	const {Root, Page1} = App;

	// initialize
	ReactDOM.render(
	<Provider store={store}>
	<Router history={history}>
	<Root>
	<Route path="/*" component={Page1} />
	</Root>
	</Router>
	</Provider>
	, document.getElementById('root'));
	{
	"name": "my-app",
	"version": "0.1.0",
	"private": true,
	"dependencies": {
	"babel-polyfill": "^6.23.0",
	"history": "^4.6.1",
	"react": "^15.4.2",
	"react-dom": "^15.4.2",
	"react-redux": "^5.0.3",
	"react-router": "^4.0.0",
	"redux": "^3.6.0"
	},
	"devDependencies": {
	"react-scripts": "0.9.5"
	},
	"scripts": {
	"start": "react-scripts start",
	"build": "react-scripts build",
	"test": "react-scripts test --env=jsdom",
	"eject": "react-scripts eject"
	}
	}
	const initialState = {};

	export default function empty(state = initialState, action) {
	return state;
	}