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.
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:
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