React Components + CSS Modules ❤️
- What can be done with styles, should be done with styles.
- No global dependencies neither in JS nor in CSS.
- Universal components. Unlikely BEM there is a possibility to provide same styles to the different components.
- Possibility to mix particular styles without CSS Modules using
classNameproperty (see React CSS Modules for the details). - Predictability.
- React
- React CSS Modules
- babel
- PostCSS
- autoprefixer
- postcss-url (for better experience)
// webpack.config.js
const { resolve } = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
module.exports = {
entry: '...',
output: {
filename: '[name].js',
path: resolve('dist'),
},
module: {
loaders: [
{
test: /\.css$/i,
loader: ExtractTextPlugin.extract('style',
'css?modules&localIdentName=[name]--[local]&importLoaders=1!postcss'),
},
],
},
plugins: [
new ExtractTextPlugin('styles.css'),
new NpmInstallPlugin({
cacheMin: 999999,
save: true,
saveDev: true,
}),
],
postcss: [
require('postcss-url')({url: 'inline'}),
require('autoprefixer')({browsers: ['last 2 versions']}),
],
};In order to remove various test helpers, which you don't need in your production environment, you should add the Webpack DefinePlugin. It will also decrease the bundle size and provide some performance. Configuration example:
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
],Start Webpack dev server:
$ npm startBuild preview:
$ npm run demoRun tests:
$ npm test- React Component Specs and Lifecycle: https://facebook.github.io/react/docs/component-specs.html
- React Event System: http://facebook.github.io/react/docs/events.html
- React Forms: https://facebook.github.io/react/docs/forms.html
- React Controlled Components: https://facebook.github.io/react/docs/forms.html#controlled-components
- React Prop Validation: https://facebook.github.io/react/docs/reusable-components.html#prop-validation
- React Supported Attributes: https://facebook.github.io/react/docs/tags-and-attributes.html#supported-attributes
- CSS Modules: https://github.com/css-modules/css-modules#css-modules
- CSS Modules Composition: https://github.com/css-modules/css-modules#composition
- CSS Modules Values: https://github.com/css-modules/postcss-modules-values#css-modules-values
The MIT License