Create a ReactJS package
========================

In this guide we will cover how to create and use a ReactJS components library
using a `Private Repository`. 

Assumptions
```````````

This guide assumes

1. We're hosting our react component library on `Bitbucket`
2. The library we're wanting to create is `react-ft-components`
3. The project where we'd want to use these components would be `react-ft-rockon`
4. We're also assuming that will primarily be using `yarn` package manager
5. We're assuming you already have `create-react-app` CLI installed

Create library
``````````````

This section of guide includes how to create a `react-ft-components` library.
Steps are as follows:

1. Create application using CLI

.. code-block:: sh

    create-react-app react-ft-components

2. Install dependencies

.. code-block:: sh

    yarn add @babel/cli @babel/core --dev
    yarn add @babel/preset-env @babel/preset-react --dev

3. Create a `.babelrc` file

.. code-block:: sh

    touch .babelrc

4. Get rid of all files in `src` folder

.. code-block:: sh

    cd src && rm *

and create `components/index.js` file with following contents

.. code-block:: javascript

    import React, { Component } from 'react';

    export default class DummyComponent extends Component {
        render () {
            return (
                <div>I am a dummy react npm module</div>
            )
        }
    }

5. Do a sanity check and see if you're able to build `index.js`

.. code-block:: sh

    ./node_modules/.bin/babel src/components --out-file index.js

6. Update `build` and `postinstall` script in `package.json` by adding following line 
{within `script` block}

.. code-block:: json

    "build": "./node_modules/.bin/babel src --out-file index.js",
    "postinstall": "./node_modules/.bin/babel src --out-file index.js",

7. Check with `yarn build` and see if everything is working fine

8. In `package.json` rename `dependencies` to `peerDependencies`. This assumes
that `react-ft-components` will be used in a project where packages 
mentioned in `peerDependencies` are already installed.

9. Rename `devDependencies` to `dependencies`

10. Commit the code to `Bitbucket`

.. code-block:: sh

    git init
    wget "https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore" -O .gitignore
    git add .
    git commit -m "first commit"
    git remote add origin git@bitbucket.org:<username>/<repo-name>.git
    git push -u origin master

11. Once this is done you can also generate tarball using

.. code-block:: sh

    yarn pack

Installing created library
``````````````````````````

1. Create a new react app using

.. code-block:: sh

    create-react-app react-ft-rockon

2. Install tarball using 

.. code-block:: sh

    cd react-ft-rockon/
    yarn add ../react-ft-components/react-ft-components-v0.1.0.tgz

Alternatively you can install directly from repo as follows

.. code-block:: sh

    cd react-ft-rockon/
    yarn add ssh://git@bitbucket.org:<username>/<repo-name>.git

3. Use the component in `App.js`, firstly import it

.. code-block:: sh

    import DummyComponent from 'react-ft-components';

and then use it in the application

.. code-block:: sh

    <DummyComponent />

4. Build and start the application

.. code-block:: sh

    yarn start

Reference:

1. `Building a React component as an NPM module <https://medium.com/recraftrelic/building-a-react-component-as-a-npm-module-18308d4ccde9>`_
1. `Create Node.js module <https://docs.npmjs.com/creating-node-js-modules>`_
1. `How to create and publish NPM Packages? <https://www.youtube.com/watch?v=rTsz09zRuTU>`_