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.
// 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" | |
} | |
} |
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.
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' } | |
] | |
} | |
}; |
I think Atomic Design fits React kind of way of doing things. You start with components (atoms) and then compose those into larger entities. That's pretty much what happens in atomic approach. They have some tooling for this purpose, namely Pattern Lab. See also the demo. Getting something like that together based on a set of React components should be too hard.