Getting started

HSDS: React

Fancy React Utils

Search…

HSDS: React

Submitting for review

Publishing a release

Getting started

In this guide, we'll walk through how to get started with HSDS development.
Setup
First, we need to clone the Github repo to your computer. Open up your terminal, and run this command in the directory of your choice:
1
git clone [email protected]:helpscout/hsds-react.git
Copied!
Next, go into that directory:
1
cd hsds-react
Copied!
And install all the dependencies in the world...
1
npm install
Copied!
Note: You can use Yarn if you like, but it is recommended you use npm, as that is what we use. This is to avoid install conflicts from yarn.lock vs package-lock.json.
Great 🌈! You've setup and installed all of HSDS's dependencies.
Development environment
HSDS's Storybook development environment
HSDS's development environment is powered by Storybook. To fire up HSDS's Storybook, run the following command:
1
npm start
Copied!
HSDS's start does a neat thing that automatically checks and installs dependencies for you. After the initial npm install, you most likely don't need to do this anymore when running npm start 💪.
Once Storybook builds, you'll be able to visit it at http://localhost:8900/.
The live version of HSDS's Storybook can be seen at https://hsds-react.netlify.com/.
Fantastic ✌️! You've got HSDS up and running on your computer.
Code editor
You can use whatever code editor you like! We recommend using Visual Studio Code.
Git branch
Create a new git branch for your work. You can call it whatever you like (the more descriptive of your work, the better):
1
git checkout -b strong-component
Copied!
Next
Let's create our new component in HSDS!

Contributing

Creating a component

Last modified 1yr ago

Copy link

Contents

Setup

Development environment

Code editor

Git branch