Getting started

What is React?

Our component library is built with React, a popular JavaScript library for building User Interfaces.

If you’re new to React, we recommend going through the official React getting started documentation.

If you’re starting a new project…

We have built a starter kit in Next.js, TypeScript and Emotion which you can clone and use as a starting point for your next project.

1. Clone latest code

These commands clone the latest starter kit code, without the version history or ties to the remote repository.

git clone --depth=1 --branch=main git@github.com:agriculturegovau/agds-starter-kit.git my-app
rm -rf ./my-app/.git

2. Create new git repository

The code has been downloaded, but you probably want to set up your own version control. Rename the project name in package.json and then initialise git.

git init

3. Install dependencies

Now run the following commands to install packages and run the project.

yarn && yarn dev

If you’re implementing components in an existing project…

All of our AgDS components can be used in existing React applications. To get everything set up, we need to go through the following steps:

1. Install dependencies

Our component library uses the CSS-in-JS styling libraries Emotion and Facepaint which need to be installed as dependencies in your application. This can be done by running the following command in your terminal:

yarn add @emotion/react facepaint

You will also need to configure the Emotion Babel plugin for the minification and optimization of Emotion styles.

yarn add --dev @emotion/babel-plugin

Your .babelrc should contain:

{
  "plugins": ["@emotion"]
}

If you’re using TypeScript, your TSConfig compilerOptions should contain:

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"

Fore more information about using Emotion with TypeScript, please refer to the official documentation.

2. Install AgDS

Install the @ag.ds-next/react package by running the following command in your terminal:

yarn add @ag.ds-next/react

3. Wrap your application in our Core component

The Core component needs to wrap your entire application and it is where you can configure the theme and routing/links. For an example of configuring routing/links in AgDS for a Next.js application, please see the code for our example site.

// This example assumes you are using NextJS
// This is an example of `_app.tsx`

import { Core } from '@ag.ds-next/react/core';
import { theme } from '@ag.ds-next/react/ag-branding';

// Note: You will need to create this import
import { LinkComponent } from './LinkComponent';

export default function MyApp({ Component, pageProps }) {
	return (
		<Core theme={theme} linkComponent={LinkComponent}>
			<Component {...pageProps} />
		</Core>
	);
}

That’s it

You can now start using our components!

What’s next?

Explore our example site to see our list of interface examples, as well as the related code on GitHub.

You should also explore our wide range of components, and install the ones you need in your application.

If you get stuck, feel free to reach out to us in the Design System Teams Chat.