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

 

 

Label Pattern with Just Css for bootstrap

labelpattern.gif

Demo: http://codepen.io/michaelguild13/pen/wMBOBj?editors=010

After reading Brad Frost’s article on the Float Label UI pattern, I started to wonder if it’s possible to do so with just pure css. So, created a codepen with it working.

My requirements are as follows

  • only display placeholder text
  • on focus, display label
  • if the input or text area contains value, keep the label displayed

I kept my markup to match bootstrap and for accessible reasons. When css is disabled, it’s  still usable. By being able to display the label on if input has value, allows the user to never loose context.  The only “Gotchya” is that the only way to display the label if it contains value, is to use the required attribute.

 Html Markup:

Screen Shot 2015-12-08 at 7.37.35 PM.png

Scss Styles:

.label-pattern {
position: relative;
overflow: hidden;
border-bottom: 1px solid grey;

label {
color: blue;
display: block;
font-size: .6rem;
font-weight: bold;
text-align: top;
padding-bottom: 1rem;
}
input, textarea {
position: absolute;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 50px;
border: none;
background-color: #fff;
transition: background-color 200ms linear;
&:focus,
&:valid{
outline: none;
border: none;
background: transparent;
&::-webkit-input-placeholder { color:transparent; }
&:-moz-placeholder { color:transparent; } /* FF 4-18 */
&::-moz-placeholder { color:transparent; } /* FF 19+ */
&:-ms-input-placeholder { color:transparent; } /* IE 10+ */
}
}
}

***btw, don’t ask why I used codepen vs jsfiddle 😛 ***

Formify.js – Contenteditable All the Things!

I’ve been working on a library to make content instantly editable with no extra leg work or dependent files. Formify creates a vitual form model based on the formify class to make nodes “contenteditable”. Do single updates or whole page content updates via form submission though traditional or ajax methods. Build the content view without having to do all the extra work of editable content.

Click here to Demo

http://michaelguild13.github.io/formify/

  • Will support json schema generation
  • third party tools like formvalidation.io
  • is very light weight with no dependancies only at 5k !

Freebord Social Media Website, http://Freebord.us

So, I started a social media website for people that ride freebords. My main reason for starting this site is because there is no really good way for freeborders to connect with each other. There is the freebord forum but it seriously sucks. forums aren’t the best tool for communicating with but having something like facebook does.

There is so much that I am doing with freebord.us that I will have to write it all up later. But for now, feel free to check it out and please realize that it is all in beta.