In this article, I will show you simple steps on how to create a React Component Library with any css design frame work of your choice. For this example, I will be using Webpack for compilation.
Also, I will be writing this pretty straight forward so it’s not “tl;dr”, with the assumption that you guys know some basic cmd line. So, you should be able to just C&P the commands and be on your way 😉 .
To skip this read and just go straight to the code, go here (highly suggested because wordpess keeps breaking my code examples):
https://github.com/michaelguild13/react-umd-boilerplate
Initial Setup
The first thing we will want to do is get all the tools we will need to do this. We will want Node for our package management and Webpack for our export of our UMD ( Universal Module Definition ).
mkdir react-component-library cd react-component-library npm init
For the “npm init”, feel free to put whatever you want.
npm i -D webpack webpack-dev-server css-loader sass-loader node-sass
Webpack for our compiling and webpack’s dev server for testing & sass loading
npm i -D babel-loader babel-core babel-preset-es2015 babel-preset-react
Babel for using es2015/es6 and react javascript coding
npm i -D react react-dom
React & React-Dom for obvious reasons…I mean, why else would you be here…Now that we have all the tools we need, it’s time to hook them all up.
Babel Setup
Create a new file in your root directory called “.babelrc“. In that file, copy and paste this code.
.babelrc
{
presets[es2015,react]
}
Tell babel to use es2015 and react presets for compiling es6 to native vanilla javascript
For more info. on babel setup go here
Webpack Setup
First we will have to make three directories ( app, dist, build )
Webpack’s compiler will create directories but we are doing this assuming you don’t know that
mkdir src mkdir static
src : Application code
static: Compiled UMD for testing on dev server
In the Root directory, create an index.html file:
index.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React Component Library</title> </head> <body> Testing UI <div id="app"></div> <script src="index.js"></script> <script src="static/bundle.js"></script> </body> </html>
Here we are including the UMD library that webpack creates and our app bundle that webpack’s dev server creates so that we can test out the library
In the root directory create a “webpack.config.js” file:
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:1337',
'webpack/hot/dev-server',
'./src/index'
],
output: {
path: __dirname,
filename: 'bundle.js',
publicPath: '/static/'
},
module: {
loaders: [
{ test: /\.js$/, loaders: ['babel'], include: path.join(__dirname, 'src') },
{ test: /\.json$/, loader: 'json' },
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader?sourceMap' }
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
This is the configuration file for webpack.
In this file we are telling it to use babel’s config presents for compiling our javascript. We are also letting webpack know what plugin’s to include. The two plugins are for the webpack’s dev server and for the hot reloader. The hot reloader watches files and reloads the server. for more info go here.
Now all we have to do is setup npm’s package with the scripts we need to get webpack to do it’s thingy. Inside of the package.js file, add the follow lines in the script object.
Server.js
// Webpack
var webpack = require('webpack');
var config = require('./webpack.dev.config');
var WebpackDevServer = require('webpack-dev-server');
// Dev Server for testing
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(1337, 'localhost', function (err, result) {
if (err) {
console.log(err);
}
console.log('Listening at localhost:1337');
});
Node Setup
The next thing we need to do is setup our testing webpack dev server to run with our webpack setup.
"scripts": {
"start": "npm run watch & node server.js",
"watch": "webpack --watch src/build.js index.js --output-library ReactUMD --output-library-target umd",
"build": "webpack ./src/build.js index.js --output-library ReactUMD --output-library-target umd",
"build-min": "webpack -p src/build.js dist/reactUMD.min.js --output-library ReactUMD --output-library-target umd",
"build-css": ""
}
Looking at the following commands, it’s pretty straight forward on what does what.
npm start – builds & watches the UMD.
npm run build – builds only the UMD file. File is exported as index.js in root for including as a Node Package.
npm run build-min – builds the UMD minified file and is exported as reactUMD.min.js in the root directory.
I am stopping this tutorial prematurely due to my frustration of wordpress’ wysiwyg breaking my code snippets. Just clone the repo and feel free to shoot me questions or issues on that repository: https://github.com/michaelguild13/react-umd-boilerplate
