Introduction

Under construction

This documentation is under construction

About

This is the documentation for hexagon-react , a wrapper library for HexagonJS which exposes most of the components as React components .

The library is only available an es6 module . This means that you will have to use something like webpack to bundle it into your application.

Installation

Install with npm (recommended)

npm install --save hexagon-react

Install with bower

bower install --save hexagon-react

Quick Start

This section will go through installing all the dependencies, setting up webpack to transpile jsx+es6 to es5, and creating an example page using some of the components.

Create a project directory

To start, create a new folder for the project code to live in. For this quick start guide, we are going to create one called hexagon-react-demo :

mkdir hexagon-react-demo
cd hexagon-react-demo

Initialise a new npm project and install dependencies

Initialise a new npm project with

npm init

and answer all the quesions it asks - the defaults should be fine

npm install --save-dev webpack
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

npm install --save-dev react
npm install --save-dev react-dom
npm install --save-dev hexagon-js
npm install --save-dev hexagon-react

npm install --save-dev live-reload

Note

hexagon-react requires the React and hx globals to be available. So we install them here ready to include on the page

Set up webpack to build your jsx

We have already installed all the dependencies we need, so all that is left now is to create the webpack config file.

Create a file called webpack.config.js and paste the following config into it. This will set up webpack to transpile ES6 and jsx to ES5.

module.exports = {
  context: __dirname,
  entry: './index.jsx',
  output: {
    path: 'target',
    filename: 'index.js'
  },
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
}

Create a page using react components

Create a file called index.jsx and copy this into it:

import { TitleBar, Content, NumberPicker, DatePicker, TagInput, Slider } from 'hexagon-react'

const page = <div>
<TitleBar title="Hexagon React demo"></TitleBar>
<Content>
  <h1>Number Picker</h1>
  <NumberPicker></NumberPicker>
  <h1>Date Picker</h1>
  <DatePicker></DatePicker>
  <h1>Tag Input</h1>
  <TagInput></TagInput>
  <h1>Slider</h1>
  <Slider></Slider>
</Content>
</div>

ReactDOM.render(page, hx.select('#mount').node())

Create an example page

Create a file called index.html and copy the following into it:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/node_modules/hexagon-js/dist/hexagon-light/hexagon.css">
  </head>
  <body>
    <div id="mount"></div>
    <script src="/node_modules/react/dist/react.js"></script>
    <script src="/node_modules/react-dom/dist/react-dom.js"></script>
    <script src="/node_modules/hexagon-js/dist/hexagon-light/hexagon.js"></script>
    <script src="/target/index.js"/>
  </body>
</html>

Build the site

Now we should have everything we need to build the site. We can add an entry into package.json for building the site:

"scripts": {
  "build": "webpack",
  "watch": "webpack -w",
  "server": "live-server"
}

So you should end up with something like:

{
  "name": "hexagon-react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "hexagon-js": "^1.3.2",
    "hexagon-react": "^0.1.1",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "webpack": "^1.13.1"
  },
  "scripts": {
    "build": "webpack",
    "watch": "webpack -w",
    "server": "live-server"
  }
}

Now open up two terminals. In one, run:

npm run watch

And the other, run

npm run server