pe3/React-0.13-ES2015-SUIT-CSS.md

## app.js
// using React v0.13.0 Beta syntax
// http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

import "./base.css";
import React from "react";

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
HelloMessage.propTypes = { name: React.PropTypes.string };

window.onload = function() {
  React.render(<HelloMessage name="World" />, document.getElementById('content'));
}

window.React = React; //for the react inspector

## base.css
@import "suitcss-base";


:root {
  --base-link-color: #069;
}


html {
  color: #444;
  font-size: 1rem;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}

a {
  color: var(--base-link-color);
  text-decoration: none;
}

a:hover,
a:focus,
a:active {
  color: var(--base-link-color);
  text-decoration: underline;
}

mark {
  background-color: #cee2ff;
  padding: .1875rem;
  border-radius: 3px;
}

## index.html
<!DOCTYPE html>
<html>
    <head>
		<meta charset='utf-8'>
		<script src="bundle.js"></script>
	</head>
	<body>
		<div id="content"></div>
	</body>
</html>

## package.json
{
  "devDependencies": {
    "babel-loader": "^4.0.0",
    "css-loader": "^0.9.1",
    "react": "^0.13.0-beta.1",
    "rework-webpack-loader": "^0.1.0",
    "style-loader": "^0.8.3",
    "suit-loader": "git://github.com/aaronj1335/suit-loader.git",
    "suitcss-base": "^0.8.0",
    "webpack": "^1.5.3"
  }
}

## React-0.13-ES2015-SUIT-CSS.md

      
    Raw
  

              React-0.13-ES2015-SUIT-CSS.md
            
          
    to run: webpack-dev-server
suit-loader is deprecated.
should probably use something like rework-webpack-loader but i dont understand webpack or rework well enough.

  
## webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  devtool: "source-map",
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
      { test: /\.css$/, loader: 'style-loader!css-loader!suit-loader' }
    ]
  }
};
	// using React v0.13.0 Beta syntax
	// http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

	import "./base.css";
	import React from "react";

	class HelloMessage extends React.Component {
	render() {
	return <div>Hello {this.props.name}</div>;
	}
	}
	HelloMessage.propTypes = { name: React.PropTypes.string };

	window.onload = function() {
	React.render(<HelloMessage name="World" />, document.getElementById('content'));
	}

	window.React = React; //for the react inspector
	@import "suitcss-base";


	:root {
	--base-link-color: #069;
	}


	html {
	color: #444;
	font-size: 1rem;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	}

	a {
	color: var(--base-link-color);
	text-decoration: none;
	}

	a:hover,
	a:focus,
	a:active {
	color: var(--base-link-color);
	text-decoration: underline;
	}

	mark {
	background-color: #cee2ff;
	padding: .1875rem;
	border-radius: 3px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<script src="bundle.js"></script>
	</head>
	<body>
	<div id="content"></div>
	</body>
	</html>
	{
	"devDependencies": {
	"babel-loader": "^4.0.0",
	"css-loader": "^0.9.1",
	"react": "^0.13.0-beta.1",
	"rework-webpack-loader": "^0.1.0",
	"style-loader": "^0.8.3",
	"suit-loader": "git://github.com/aaronj1335/suit-loader.git",
	"suitcss-base": "^0.8.0",
	"webpack": "^1.5.3"
	}
	}
	module.exports = {
	entry: './app.js',
	output: {
	filename: 'bundle.js'
	},
	devtool: "source-map",
	module: {
	loaders: [
	{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
	{ test: /\.css$/, loader: 'style-loader!css-loader!suit-loader' }
	]
	}
	};