How To Create A Local NPM package of React Components

One of the big benefits of React.js is reusable components. In fact, you’ve probably used one of the many awesome react.js components from npm. Rather than copy and paste your own components from project to project. Here’s how to create a local npm package of react components.

Useful Boilerplate

https://github.com/juliancwirko makes it easy to create a NPM Package of React Components. I wanted a package called myappincome, so I did the following:

  • Clone the repo into myappincome with git clone https://github.com/juliancwirko/react-npm-boilerplate.git myappincome
  • Remove the git repo that was cloned with cd myappincome; rm -rf .git
  • Edit package.json so the name of the package is “myappincome”
  • Initialize a new git repo with git init
  • npm install
  • Edit \src\index.js to create a very simple component like:
import React from 'react';

class MyComponent extends React.Component {

    render() {
    return (
      <div>
        FROM INSIDE MY COMPONENT
      </div>
    )
   }
};

export default MyComponent;

As you can see, not the most useful component in the world, but will demonstrate this works fine.

Let’s try it out.

Using it in a project

To keep things simple, I’ll use [Create-React-App] to demonstrate how our package can be used. The process will be similar for whatever project you’re working with.

create-react-app testlocalpackage
cd testlocalpackage
npm install --save /path/to/myappincome

You should see something very similar to this:

npm WARN prepublish-on-install As of npm@5, `prepublish` scripts will run only for `npm publish`.
npm WARN prepublish-on-install (In npm@4 and previous versions, it also runs for `npm install`.)
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information.

> myappincome@1.0.1 prepublish /tmp/myappincome
> babel --plugins transform-es2015-modules-umd src --ignore __tests__ --out-dir ./dist

src/index.js -&gt; dist/index.js
testlocalpackage@0.1.0 /private/tmp/testlocalpackage
└── myappincome@1.0.1 

You can see the package is called “react-npm-boilerplate” and version “1.0.1”. You can change this in package.json, but for now, I’m leaving it alone.

Now edit src\App.js to import and use our component:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import MyComponent from 'myappincome';

class App extends Component {
	render() {
		return (
		<div className="App">
			<div className="App-header">
				<img src={logo} className="App-logo" alt="logo" />
				<h2>Welcome to React</h2>
			</div>
			<p className="App-intro">
				To get started, edit <code>src/App.js</code> and save to reload.
			</p>
			<MyComponent />
		</div>
		);
	}
}
export default App;

That’s it! Start the application with yarn start and you should see our component being rendered:

MyComponent In Create React App

MyComponent In Create React App

Multiple Components

So far, we’ve only got one component. Adding multiple components is a little trickier as we can only export 1 as default. That means we have several options. To keep this short, I’m going to show an example of adding 2 more components and the various ways they can be exported and included in an app.

Two More Components

Let’s create two news files in \src. The first called TestComponent.js:

import React from 'react';

class TestComponent extends React.Component {

    render() {
    return (
      <div>
        FROM INSIDE TEST COMPONENT
      </div>
    )
   }
};

export default TestComponent;

A second called SampleComponent.js with:

import React from 'react';

class SampleComponent extends React.Component {

    render() {
    return (
      <div>
        FROM INSIDE SAMPLE COMPONENT
      </div>
    )
   }
};

export default SampleComponent;

Finally, rename src\index.js' tosrc\MyComponent.js’. We’ll be creating a new index.js next.

Exporting multiple components

Mozilla’s article on explaining the different types of import and export is about the best I’ve come across. If you’re not comfortable with the different types, definitely go and read that before the rest of this post.

Create src\index.js with the following:

import SampleComponent from './SampleComponent';
import  MyComponent from './MyComponent';
import TestComponent from './TestComponent';

export default TestComponent;
export {MyComponent, SampleComponent};

Importing Multiple Components

Update App.js to:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import TestComponent, {MyComponent, SampleComponent}  from 'myappincome';

class App extends Component {
	render() {
		return (
		<div className="App">
			<div className="App-header">
				<img src={logo} className="App-logo" alt="logo" />
				<h2>Welcome to React</h2>
			</div>
			<p className="App-intro">
				To get started, edit <code>src/App.js</code> and save to reload.
			</p>
			<MyComponent />
      <br />
      <SampleComponent />
      <br />
      <TestComponent />
		</div>
		);
	}
}
export default App;

Refresh the app and it doesn’t work! That’s because there’s a drawback to packaging up your components in an npm package.

Drawback

Unfortunately, any changes we make to our components in myappincome don’t show up in our app automatically. Just like when a new version of an app is released on npm.

Thankfully, it can be easily worked around by deleting the myappincome folder with rm -rf node_modules\myappincome and then running npm install again after every change.

It’s not ideal, but at least it works.

MultipleComponents in Create React App

MultipleComponents in Create React App

Conclusions

It’s now much easier to share components between all our projects and we haven’t had to install a local npm server like Sinopia.

What’s more, if at some point in the future we decide to publish our package on npm, we can.

As always, I’m not sure this is the best way to do this. It works, but if you know of a better way, please get in touch either in the comments below, or on twitter https://twitter.com/myappincome.

Income Report for April 2017

I’m making my income reports, including traffic numbers, public. That way, anyone thinking of starting something similar can see real world numbers. There are a lot of other sites sharing their income, so why does the world need another one?

I’m sharing the figures from month 1, which isn’t that common. Also, I can’t see many income reports from mobile app developers. So I’m hoping that this is something unique.

My hope is that these reports will inspire someone else to try something themselves. Please let me know if you think I can improve them. I’m always looking for ways to improve.

Current Status

This site is still being neglected, but I am slowly getting back into spending some time on things.

I’m finally comfortable using my MacBook, and have managed to setup a dev environment. I started working on Basic Pairs again, but failed miserably. Note to self, don’t go chasing version numbers when you don’t need to.

Hours this month

As always, I track the hours I’m spending on this project. It helps me track “return on investment” and highlights how much effort is required for something like this.

Topic Hours
April Income Report 1
Setting up MacBook 8
Upgrading Basic Pairs 5

Total Hours this month – 14

Traffic for MM YY

Audience Overview - April 2017

Audience Overview – April 2017

Audience Stats - April 2017

Audience Stats – April 2017

Acquisition Overview - April 2017

Acquisition Overview – April 2017

Page Views Top 10 - April 2017

Page Views Top 10 – April 2017

I won’t comment on the above images as the numbers haven’t changed. I’m leaving them in for future reference.

Monthly Income

Description Value
AdSense £0.97
Chitika Ads £0.00
CodeCanyon £0.00

Total Income £0.97

Monthly Expenses

Description Value
Site Hosting £1.25 (£14.99 a year)

Total Expenses £1.25

Profit over time

Total Profit £0.97 – £1.25 = £-0.28

Income Over Time - April 2017

Income Over Time – April 2017

Analysis

Despite adding nothing, the site has had a good month for adverts. Almost breaking the £1 barrier for the first time.

Lessons learned this month

Don’t Chase Version Number

When I finally got the MacBook setup with React Native, I decided to upgrade Basic Pairs to the latest versions. Huge mistake. There was absolutely no need (that I’m aware of) and it took ages.

If you do want to chase version numbers, at the very least, try to keep up with more frequent updates.

Target for the next month

Keep chipping away at something. My aim is for May to be the last month where nothing meaningful gets done.

Income Report for March 2017

I’m making my income reports, including traffic numbers, public. That way, anyone thinking of starting something similar can see real world numbers. There are a lot of other sites sharing their income, so why does the world need another one?

I’m sharing the figures from month 1, which isn’t that common. Also, I can’t see many income reports from mobile app developers. So I’m hoping that this is something unique.

My hope is that these reports will inspire someone else to try something themselves. Please let me know if you think I can improve them. I’m always looking for ways to improve.

Current Status

Happy beyond belief that I’ve made money online from software that I have written. Yep, you read that right, this site has finally made money from something other than adverts. Not a lot, but my first sale on CodeCanyon was completed. The one sale was only worth £4.99, but we all have to start somewhere. The trick will be to repeat it!

I’ve also treat myself to a new MacBook Pro. I won’t be putting that down on the balance sheet for this site, as it’s a huge cost

Finally, I’m slowly managing to spend more time on this project. Nowhere near the hours I was once working, but more than the 0 from last month.

Hours this month

As always, I track the hours I’m spending on this project. It helps me track “return on investment” and highlights how much effort is required for something like this.

Topic Hours
Income Report for February 2017 1
Setting up the MacBook 15 hours

Total Hours this month – 16

Traffic for MM YY

Audience Overview - March 2017

Audience Overview – March 2017

None of my pages made it on reddit or alike this month, so no big spoke. Virtually the same as last month.

Audience Stats - March 2017

Audience Stats – March 2017

Also almost identical to last months.

Page Views Top 10 - March 2017

Page Views Top 10 – March 2017

Again, continuing the trend of informational pages being viewed more often than tutorials.

Audience Overview - March 2017

Audience Overview – March 2017

Monthly Income

Description Value
AdSense £0.59
Chitika Ads £0.01
Chitika Referal £0
TsoHost Referal £0
CodeCanyon £4.99

Total Income £5.59

Monthly Expenses

Description Value
Site Hosting £1.25 (£14.99 a year)

Total Expenses £1.25

Profit over time

Total Profit £5.59 – £1.25 = £4.34

Income Over Time - March 2017

Income Over Time – March 2017

What a lovely uptick. I hope another positive month appears before too long!

Analysis

First ever month of profit! Ad income is also on the rise.

Visitors have dropped slightly this month, but as I’ve put in zero effort, I can’t be shocked.

Lessons learned this month

It is an absolutely amazing feeling to see your first sale through.

Progress this month

I didn’t set myself any targets this month as I was in no position to achieve anything.

Target for the next month

This month I’m only going to set myself 2 hopefully very achievable ones.

  1. Finish setting up the MacBook so I can develop both iOS and Android React Native apps.
  2. Update my single Code Canyon release to be both iOS and Android.