Getting started

Learn how to quickly get started with our component library to build expressive, consistent UI at Reckon.

Components can be combined to help anyone building products for Reckon to efficiently design consistent experiences for users.

This frees us up to focus on solving unique user challenges, rather than reinventing interface elements that are already in use.

Illustration of a subset of Balance components in their various states

Expectations

The component library was designed to help developers quickly create the best experience for Reckon users. Each component includes information to help you implement them, such as:

Explanations of the user problem it solves in the interface
Interactive examples so you can see the component in action
Best practices and guidelines to use the component correctly

Installing packages

Reckon’s component library is called Balance, and it’s available on the npm registry. You can install packages using 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>
);

Learning resources

These resources have information on getting started with React and how to develop apps for Reckon.

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

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

Component methodology

We make our components flexible enough to meet diverse needs. Our components are set up to be restructured based on the information passed in. No matter what type of experience you’re creating, you can use components as the building blocks of your product or feature.

Each of our components has a well-documented public interface (API) with guidelines and well-defined conventions. This way, developers don’t need to worry about the underlying implementation. Instead, they can focus on creating great user experiences.

We ensure that our components are made for everyone. They meet accessibility standards and are responsive to most screens or devices. We also put a lot of effort into optimizing the performance of the components, so everyone can build inclusive experiences that work.

Feedback

Issues or feature requests can be created on the Reckon Jira board.

More information can be found on the contributing page