How to write a Custom React Component Library UMD

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

 

 

Fuck Yeah! Front-end Development

Ok, so I started a joke blog after Nick Hudkins, from Bolster Labs, made a “Fuck Yeah!” suggestion. The idea started with me randomly starting to sing the “America, Fuck Yeah!” ( http://www.youtube.com/watch?v=3BN1jSpiyIM&feature ). Immediately after starting to sing the lyrics, all of the guys from Bolster Labs started singing it as well. Which then, Nick started to talk about all the “Fuck Yeah!” tumbler pages he has started and then told me to start fuck-yeah-front-end-development.

And so my journey of writing half bullshit web articles as a joke has started.

http://fuckyeahfrontenddevelopment.tumblr.com/