How to create a React component and publish it on NPM

Let’s suppose this is an image about React and NPM

I was thinking about doing some kind of catharsis before starting this Story, but, let’s go to the solutions. The catharsis in not necessary anymore because the Redux alternative with no complexity is already created :D

Pttsss! Don’t forget about reading the new React Conditional Rendering article (1 min read)

Update for 2018: For anyone else running into errors that Webpack was complaining about the jsx syntax with Unexpected token, then, please check this Chris’ comment

If you want to create a React component and publish it in NPM, you have to do two things:

• Create the Component
• Create a project where you’ll test your component

Creating the component

Let’s suppose our component will be called react-fancy-component

Then, manually, create these files:

.babelrc

webpack.config.js

package.json (do not forget to change the name in this file)

Let’s continue running things:

npm link will be used to dev-test our component in our testing-project while we are developing it.

Then, create your component in /src/index.js

Let’s try with this example. Create this file:

src/index.js

Done! Our fancy component is finished!

Creating our testing project

Now, let’s create a really basic project to test our fancy component.

Then, let’s modify our src/App.js file adding the import and the component usage. So, you should add these 2 lines:

import Fancy from 'react-fancy-component';

<Fancy />

Your src/App.js should look like this:

And then, finally, run npm start and see what a beautiful fancy component you just created! You got it, man!

It should look like this

Faaancy man

As last step, let’s publish our Component.

As first step, please, go to your component folder (react-fancy-component ) and add all data that you should add in the package.json file, like name, version, description, and author.

Then, in the component folder, let’s configure npm to publish your component (remember you need an account in http://npmjs.com/. Don’t worry, it’s free… for now…).

What you have to do, is run npm login and put your username, password and public email.

Then, run npm publish and… THAT’S ALL!

Check this out man: https://www.npmjs.com/package/react-fancy-component

Soo fancy!

Fancy maaaaan!

And the Magic? Where is the Magic?

The magic is in two lines in the whole project. Both lines are inside webpack.config.json file.

• libraryTarget: 'commonjs2': This line says “Hey, our Output should be an exportable module!”. Check more info in the official documentation.
• externals: { 'react': 'commonjs react' }: This line says “Hey, let’s use the React dependency that is using whoever is using me!”. Be careful with version-incompatibilities.

What about the development time?

You have to run npm start in two different Terminals. One terminal in the component folder, and another one in the test-project folder.

Webpack will recompile your component each time you do a change in any file (in your component), and then, automatically, the Webpack we have in our test-project will detect the change, and recompile our testing project. You will see your changes in your browser.

What about the music?

Here, the Fancy Man: