Hello world

Once the environment is installed, three files should exist inside ./src - index.js, index.html, and develop.js
Go ahead and type alert('hello') inside develop.js, save the file and run npm start
This starts up the dev server and shows the alert! (See {@tutorial developersCommonIssues} for any problems)

Simple component

You can add this code in develop.js to render a simple component

        import {render} from 'react-dom';
        import React from 'react';

        //functional "dumb" component
        function Hello(){
          return (<h3>Hello World</h3>)
        }
        render(<Hello/>,document.getElementById('app'));
      
Note : In most cases, we will only render in develop.js, while index.js will export the class itself to be used in a different component

Add additional files

Most of the times our code will be located in other files.
  • Create a file called "component.js" inside ./src
  • Move the "alert" from develop.js to component.js
  • inside develop.js, add this line of code import * as CompExport from './component'
  • Save the files and refresh the browser

Add CSS/SCSS files

Similarly to external JS files, the library also supports external CSS/SCSS files
  • Create a file in ./src called index.scss
  • Add this line of code to develop.js : import * as StyleExport from './index.scss'
  • Inside index.scss, add this this css rule : body{background-color:green}
  • Save the files, refresh the browser = you should see a green body

Write unit tests - Jest

It is highly recommended to write unit tests to your components
All Jest test files are to be located inside the __tests__ directory
You can learn more about the test framework we use, Jest, here

Build the component - ./src/index.js

Now that we know how to develop, It's time to see how to build and deploy our component
Any code that's written or imported into index.js will be bundled together into a minified, ES5 javascript file
Any object exported from index.js will be available for import by other components
Anything you put in develop.js is used for DEV-ENV only and WILL NOT be passed to production

Analyze the build

Once index.js is filled as required, it's a wise idea to check that the distributed file is not too large
Due to the ease of installing components in NPM, it's easy to include a library of 500kb for 3 lines of code
run npm run analyze and inspect the stats.txt that was generated - this information is before GZIP, after minification

Deploy the component - Release it!

Once everything's in place, it's time to deploy the component.
  • Create a repo for the component in bitbucket
  • Create a git repo locally in your project (usually done through git init)
  • Add the remote as origin - git remote add origin REPO_PATH
  • Use npm run releasePatch OR npm run releaseMinor OR npm run releaseMajor - depending on the version you want to increase
  • the release process will run the Jest tests if they exist, will build the documentation, build the dist files and interactively publish and tag the release