Edit (2017–02–10): This article is kind of outdated. I now have a custom package that compiles UMD and CommonJS modules. Check out an example of that here. That being said, the instructions in this article might work for you anyhow!
This was not as trivial as I was hoping it was, but I finally did it. I made a very simple component that I thought was relatively cool and wanted to share it with the world. You can see its effect here in this gif:
Check it out here and leave me a star if you think it’s cool!
So I went looking and found a bunch of articles telling me what to do, but since I used Brunch as a build tool, almost none of them applied to me. I wanted someone to hold my hand and I almost found it.
Enter JedWatson and the generator-react-component. Trust me, this is going to make your life a LOT easier.
The Helpful Generator
The first thing I would do is to install Yeoman and Gulp if you haven’t already. Then it’s a simple matter of installing the generator:
npm install -g generator-react-componentAnd then running it to create a skeleton project:
yo react-componentGo to the generator’s project page for more information, but there will be a few prompts that will guide you to creating your project.
After that’s done, you’re pretty much 90% of the way there.
Developing Your Package
Immediately, you can run:
npm startTo fire up a server where you can see a page with your component being rendered. Simply go to localhost:8000 in your browser to see the page. That’s your live demo / example page right there! All out of the box.
Now it’s time to actually write your component. Look inside the src directory in your project folder. In here, you can use any manner of JSX and ES6 goodies to craft your creation as long as it has the js file extension.
The best part is that every change you save to the files in this folder will update automatically. That means all you have to do is to save your file, and alt-tab your way to the browser to see your changes update automagically.
Releasing Your Package
As if it wasn’t easy enough already, releasing your package is even easier. The README.md file is already written up and all you have to do is fill in the blanks.
You may also want to run additional Gulp build tasks if there are extra fancy things you want to do. You can easily do that in gulfile.js and the generated file even tells you where to run your gulp tasks.
Once everything is ready, make sure your github repo (as named in your package.json) already exists and type the following into the command line in order to build and publish:
npm run buildnpm run release
And you’re done! That’s all.
Not only do you now have a package published to NPM, you also have a webpage hosted on github pages with the live demo that you can share with your friends.
In addition, there are other npm scripts included in the generated package.json that allow you to lint your code, publish your site, and do other handy things.
Done
Wasn’t that easy? Let me know about the cool things that you’ve done and maybe we can all share some github stars with each other!
At this point, I’m supposed to tell you to hit that little heart at the bottom because apparently the chances of you doing so are increased with an explicit statement. So if you found this useful at all, hit the heart there below!
