Setup

Balance is a React implementation of Reckon's design system. It provides components that are adaptive to interactions and screen sizes across devices, and includes full screen reader and keyboard navigation support for accessibility.

Getting Started

The Balance design system, and the apps that consume it are built with React and TypeScript. They will likely use GraphQL for managing data. Below are some learning resources to get you up and running.

React

If you’re new to React, start with the official React getting started documentation. As you read through the topics, follow along using the React Hello World CodePen example.

Here are some additional resources:

• Online training at reacttraining.com, buildwithreact.com, and reactforbeginners.com
• Community resources in Awesome React
• Answers in the various React support communities

TypeScript

Developed and maintained by Microsoft, TypeScript is an open-source JavaScript syntactical superset language. Poised to potentially replace JavaScript, TypeScript may become the default language for React, a user interface framework maintained by Facebook and it is already the default language for Google's Angular.

Here are some additional resources:

• React + TypeScript cheatsheet and demo repo
• Definitely Typed: A GitHub forum containing high-quality TypeScript definition files for common libraries and frameworks.

GraphQL

If you're new to GraphQL, start with the official Introduction to GraphQL docs. You can also browse video content on the How to GraphQL website

Here are some additional resources:

• GraphQL tutorials

Installing packages

You can install a Balance package using a package manager like npm or yarn.

npm install @reckon-web/core

Once you’ve installed packages you can import components available in Balance:

import { Core } from '@reckon-web/core';

Wrap your app with Core

In order to propagate Balance’s theme to the components, you need to wrap your React app in Balance’s Core component:

import { Core } from '@reckon-web/core';
const WrappedApp = (props) => (
  <Core>
    <App {...props} />
  </Core>
);