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.
Here is one more approach, csstyle.
One of the problems is that CSS isn't actually just about styling. It can be intermingled with logic. Let's consider something like a Sidebar component. That will help to illustrate the issue.
Basic markup could look like this:
I expect it would get fixed to the left side of the screen by default and there would be a handle that could be used to open it. In addition the maximum width of the Sidebar should be fixed. This leads to a couple of questions:
Traditionally we would just add some classes to the component, define CSS for 2-4 and deal with jQuery or something to tackle 1. This approach can work with React too but I feel we can get something better.
What if it was possible to inject
style
as a property? Then we would have something like this:In addition Sidebar would have to bind that style to its contents (ie. content, handle). I guess the component would have some default values to override. The default configuration could look something like this:
This gives you a public styling interface and CSS related logic is encapsulated within the component. I followed SUITCSS naming convention here as it seems reasonable. The JSX of Sidebar should match it.
In addition there would have to be something like
merge(this.state.style, this.props.style)
before rendering.Sidebar-handle
should have a drag handler that would modifySidebar-content
width. That sounds like trivial to do in this approach.There are some props and cons. I'll cover these next.
Pros
Cons
style
(first priority) so perhaps it's better to avoid or just deal with colors and such using it?At least for now the best thing about SUITCSS for me seems to be the naming scheme. The rest is a little irrelevant in this sort of approach. Having styles on component level feels like the right thing to do with React. There are of course questions like how to deal with global styles of an app but I expect that is something you would deal on a higher level. And given the approach, you would have very good control over it (all React of course).