| | Github NPM Demo https://github.com/sasha240100/react-rectangle-popup-menu Originally published at . ZeoLearn Some time ago I decided to make an article that covers topics like publishing to , API architecture. Best tutorial for this would be a react component library development. NPM A good example of React Component library as for me is . It has neat documentation website with easy step-by-step guide and lots of different variations of making a color-picker for your React application. react-color https://casesandberg.github.io/react-color/ So I decided to go with making a like Google has: rectangle-popup-menu This is from google.com website (an example of what I plan to make) Part 1. Preparing project (Setup) Let’s make up some requirements that every modern library should fit nowadays. Tree-shaking UMD pattern Build output is es5 Clear documentation Examples (demos) Unit testing = Module bundling Rollup & Webpack Rollup & Webpack For bundling library I chose rollup (you can read in a more detailed article that explains why rollup is better for libraries in by ). “Webpack and Rollup: the same but different” Rich Harris Rollup: https://rollupjs.org/guide/en Plus I used (and ) to serve examples folder. It handles css wrapping, font loading and es6 -> es5 transpilation (with the help of babel). webpack webpack-dev-server Webpack: https://webpack.js.org/ = Unit testing Jest Unit-testing tool by Facebook that perfectly fits our needs in comparing react component snapshots. Link: https://facebook.github.io/jest/ = Serving examples Express Has a minor place in a project, but helps us configure proper examples serving properly (as is using it). webpack-dev-server = write es6, provide es5 Babel Nowadays is already widely supported by a majority of well-known browsers, but is not just about working with es5, it’s a global standard for transpiling javascript subsets into browser-compatible implementation. ES6 Babel In this project we use mostly for using latest ES features like and supporting JSX subset. Babel async/await Link: https://babeljs.io/ Part 2. Development Now, once we installed all required devDependencies we are able to move forward to the development process. The first step is to decide on the project folder structure. For this library, this is what I had at the end: — Skip this folder, this is just for images I had in API docs assets/ — UMD and ES module build files + sourcemaps. build/ — This folder contains test examples that I use to test library in different cases. examples/ .html — Contains library source code written in JSX and file for in-folder babel configuration src/ .babelrc — JEST tests test/ Other files are needed to complete project configuration. I highly recommend you to use for Continuous integration (must-have for modern projects, especially such as a component library). travis.yml : Don’t forget to exclude and from internal dependencies in rollup, otherwise, you’ll get compatibility errors on the client side and bad side effects, such as large bundle size and bad performance. Important react react-dom { // rollup.config.babel.js // ...external: , ['react', 'react-dom'] globals: { }} react: 'React','react-dom': 'ReactDOM' Source files / Code In the file I linked every single file that exports classes (actually React components): index.js export * from './PopupMenu';export * from './PopupTable';export * from './PopupText'; // index.js We won’t cover all the code written for this library as it’s more topic-specific rather than helpful, so let’s take for example only several parts of the code that explain our needs in project organization. As we build components for UI we include style files, rollup allows us to make bundles with styles and images the same way as webpack does. In my case I chose syntax as it is a one I am familiar with. This means that file will be compiled from to and then included as a javascript code that inserts inline styles into html tag. sass ./PopupMenu.scss sass css <head> Take into account that we enable feature that enables CSS modules feature: "modules": true import from './PopupMenu.scss'; style // Somewhere in JSX// ... render() {return (<div className={ } />)} style.myClassName // ... Any time we use JSX syntax in our ES6 modules we need to include react dependency, otherwise it will result in a build error. import , {Component} from 'react'; React In my case I even need to use React to provide context to child components this old way: . I have that takes of the parent (old because recently React introduced new Context API ) PopupTable popupWidth PopupMenu I would like to also highlight npm module that does pretty good job in combining multiple classes from CSS modules: classnames module example classnames Usage: Unit testing First you need to decide which unit-testing framework you want to choose. There are a few popular unit-testing frameworks I used and could suggest you to test: MochaJS AVA Jest For this component library I chose Jest. Because it is developed by Facebook (same as React) and it supports React components snapshot testing out of the box. (From JEST website) Capture snapshots of React trees or other serializable values to simplify testing and to analyze how state changes over time. That’s pretty simple, you render a react component you want to test, then call which converts it to a rendered html tree. Example: component.toJSON() // Jest Snapshot v1, https://goo.gl/fbAQLP = `<divclassName="PopupMenu_PopupMenu__8TfA4"><divclassName="PopupMenu_button__20m_Y"onMouseOut={[Function]}onMouseOver={[Function]}/><divclassName="PopupMenu_popover__3hd_Z"onMouseOut={[Function]}onMouseOver={[Function]}style={Object {"height": "auto","left": "calc(-100px + 50%)","visibility": "hidden","width": "calc(200px - 10px)",}}/></div>`; exports[`PopupMenu should render correctly 1`] Once you did it for the first time it is saved into a file, which is basically a module that exports several rendered DOM tree strings to compare with each new render. If the DOM tree has changed, it will tell you that. If the tree was changed by positive changes (means that was expected), you have to run to save new snapshots. *.test.js.snap jest -u Conclusion Let’s highlight the most relevant tips from this article: Rollup is better than Webpack for component libraries Include postcss plugin and bundle css into the same js file Use Unit testing and continuous integration to show others that you care about stability and prevent unexpected errors. I would also recommend you divide the build into two steps, and (Includes and further optimizations). development **production** minification All the sources can be found on . And the resulting is available as well. Github page demo Originally published at . ZeoLearn Recently I’ve made an course for Skillshare, you may find some interesting webgl secrets there! “Introduction into WebGL world” click here.

Facebook

Google

Harris

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Making of a component library for React

Too Long; Didn't Read

Companies Mentioned

Alexander Buzin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Making of a component library for React

Too Long; Didn't Read

Companies Mentioned

Alexander Buzin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES