神刀安全网

Publishing React component in NPM

Recently I started playing with Facebook’s awesome view library React . Once I have done with my experiments, I decided to publish a reusable component in NPM. Initially, I thought it was very easy but later I got into many problems, So I thought of writing it as a blog.

In this blog post, We will be creating a simple React component followed by publishing it into NPM.

Creating a React component

First, Let’s starts with creating a simple hello-world component in React. The source code is available in GitHub and check NPM for the updated package.

Before Starting the actual development ensure you have installed Node and NPM in your machine. I am not gonna cover how to install Node and NPM. Please check the official Node webbsite for more details.

Initilizing Node project

Use the below command to initialize node project in a folder.

 npm init 

It will ask some questions, complete it to generate a package.json file or copy paste the below into your package.json file.

 {   "name": "react-hello-world",   "version": "1.0.1",   "description": "Simple package to learn how to publish react component into NPM",   "main": "index.js",   "author": "Raja Sekar       (http://rajasekarm.com)",   "license": "ISC" }   

Installing dependencies

So before starting our development, we have to install dependencies for our project. In our case the only dependency is React.

 npm install react —save 

Installing development dependencies

For our development, we will be using ES6 and JSX syntax. Its is not possible to import or require the package if the consumer did to convert those JSX and ES6 into vanilla JavaScript. The component should be easy to use like just install, import it and use it. No one will sit and debug the issue in your component.

So we need to convert ES6 and JSX into vanilla JavaScript, So that the component works across in all the environment. So we will be using babel and couple of presets to transpile the ES6 and JSX code into pure vanilla JavaScript.

 npm install babel-cli babel-preset-es2015 babel-preset-react  babel-preset-stage-0 --save-dev 

First React component

We are done with the environment setup, Let’s start writing out first react component.

 //helloworld.js import React from 'react';  class ReactHelloWorld extends React.Component {   render() {     return (       <div>Hello world!!</div>     )   } }  export default ReactHelloWorld; 

The above component will just print “Hello World” in the page. We have done with the component, now we have to convert our ES6/JSX into vanilla JavaScript to make sure it works in across all environment.

Configuring babelrc

Since we’re using babel to convert JSX/ES6 into vanilla JavaScript we have to configure babelrc file in root of our project. Create .bablerc file into our project root and copy paste the below code into it.

 {"presets": ["es2015", "stage-0", "react"]} 

Build Script

Now we will be using babel to convert our JSX/ES6 into vanilla javascript.

 babel  helloworld.js -o index.js 

So the above script will convert the ES6/JSX code into plain vanilla javascript. But we have to run the script every time when we publish the component into NPM. So NPM provides many hooks which helps to make the publishing work easier.

NPM pre-publishing script

In package.json add the below script which runs every time when we publish the component into npm.

   "scripts": {     "build": "./node_modules/.bin/babel helloworld.js -o index.js",     "prepublish": "npm run build"   } 

Committing to GitHub

Before publishing it into NPM, we have to make sure the component works fine. SO commit it into GitHub and check by installing it from the GitHub source.

 git add . git commit -m ‘first compinet' git push 

Now install the component from github source using,

 npm install git://git@github.com/rajzshkr/react-hello-world.git —save 

Importing and using the component

Once the component is installed, we have to check the behavior of the component by importing it.

 import React from 'react'; import ReactDOM from 'react-dom'; import ReactHelloWorld from 'react-hello-world’; ReactDom.Render( <ReactHelloWorld />, document.getElementById(‘app’); 

It should simply display “Hello world!!” on your page.

Publishing into NPM

Our component is ready to publish into NPM. Use the below commands to publish the component into NPM.

 npm login // It will prompt for NPM credentials npm publish 

Now you can install the component directly from the NPM using,

 npm install react-hello-world 

If you have any changes in your component, make sure you change the version number before publishing it.

Hope you enjoyed reading my blog, Let me know if you have any suggestion.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Publishing React component in NPM

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址