How to Create and Publish React Components using the create-react-app?

If you are familiar with React you should already know that there is a tool that makes creating and setting up new project with reactJS just as easy as googling this topic.

I am talking about the create-react-app.

First create your app using the following commands:

If you don’t have create-react-app script installed perform this before going ahead.

npm i -g create-react-app

Create new app using:

create-react-app <App Name>

That should setup almost everything for you. This is how the folder structure is laid out:

Folder Structure

Create a new Folder for your component and add index.js inside that folder.

index.js will be the starting point of your component.

Add all your logic and stuff into it. Once done we have to modify the package.json to export your component and add some required dependencies.

Run the following command:

npm i --save-dev babel-cli babel-preset-env babel-preset-react babel-preset-stage-2

This command should install some devDependencies that you will be needing to publish your component.

babel-cli is the one that will transpile your code to es5 since that is something that will run on all the browsers.

babel-preset-env is the preset that is needed by babel-cli to convert es6 code to es5.

babel-preset-react is a preset that is needed by babel-cli to understand how to convert react code to es5.

babel-preset-stage-2 is a preset that is needed by babel-cli to understand some experimental react syntax that is not standardized yet but widely used like Property Initializers, static defaultProps, static propTypes etc.

Note: If you are not using any experimental stuff babel-preset-stage-2 is not needed. And on the same hand if you are using something that is not present in stage-2 you should use the appropriate stage. They range from stage-0 to stage-4, where stage-0 is extremely experimental and stage-4 means it will be part of next release.

Once you are done with installing all required dependencies, change your build script to use babel and transpile your code into es5.

Change your build script to:

"SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/<Your_Component_Folder> --out-dir dist --copy-files"

Add the following lines to your package.json:

"main": "dist/index.js",
"module": "dist/index.js",
"babel": {
   "presets": [ "react", "env", "stage-2" ]
}

Lets download and install all the new dependencies that we have added:

npm i

Now build your component using

npm run bulid

Finally everything is set for you to publish your component. (This step assumes you have an npm account and you have logged into it.)

npm publish

Gh Pages

If you wan to deploy your application to github.io follow these steps:

1. Add github pages package: npm i — save-dev gh-pages
2. Add your repo details to package.json
“repository”: { “type”: “git”, “url”: “<GITHUB REPO LINK>" },
3. Add the following script to your scripts: “deploy”: “gh-pages -b gh-pages -d dist”
4. Once that is done you have to go to GitHub repo settings and scroll down to GitHub Pages section and select which branch needs to be used for the demo. Most often gh-pages branch will be selected but just in case if it isn’t, go head and select it.

Note: The last 2 steps assumes that you have a branch with name gh-pages in your repo.

You should now be able to build, deploy and publish your components using CRA.

Happy hacking.