# Getting started

This page guides you through the steps to create a new React application for your project with CSPR.click UI SDK integrated and ready to use.

{% hint style="info" %}
If you want to integrate CSPR.click UI SDK into your existing React application, go to the [React](https://docs.cspr.click/cspr.click-v1.11/cspr.click-sdk/react) section. If you're not using React in your application, you can learn how to integrate CSPR.click in the [Javascript](https://docs.cspr.click/cspr.click-v1.11/cspr.click-sdk/javascript) section.
{% endhint %}

## Create a new project

To create a new React project with CSPR.click ready to use, write the following command in a terminal session:

```
npx create-react-app my-casper-app --template @make-software/csprclick-react
```

Next, go to the newly created project directory and run the app:

```
cd my-casper-app
npm start
```

Your new app will open in your browser. If it doesn't, browse to the URL: <http://localhost:3000>.

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-9462789a826a9dcc008657b8c95b1d5323d67be7%2Fcra-template-landing.png?alt=media" alt=""><figcaption><p>Your new application</p></figcaption></figure>

## Adjust the initialization options

Your new project comes with some default initialization options. You'll need to review them and adjust some.

Open the file `src/index.tsx` and locate the definition of the `clickOptions` variable. It'll look similar to this:

```typescript
import { CONTENT_MODE } from '@make-software/csprclick-core-types';

const clickOptions: CsprClickInitOptions = {
    appName: 'CSPR.app',
    appId: 'csprclick-template',
    contentMode: CONTENT_MODE.IFRAME,
    providers: [
        'casper-wallet',
        'ledger',
        'casper-signer',
    ]
};
```

You can use the default `csprclick-template` application identifier while you're working locally on your application. But to upload your new project to a server, you'll need to [get your own application id](https://docs.cspr.click/cspr.click-v1.11/documentation/overview).

Update the properties according to your needs. Read more about the [CsprClickInitOptions ](https://docs.cspr.click/cspr.click-v1.11/cspr.click-sdk/reference/types#csprclickinitoptions)type in the Core JS SDK reference.

These options are sent to CSPR.click through the `<ClickProvider>` component that wraps your main application component:

```tsx
<ClickProvider options={clickOptions}>
  <App/>
</ClickProvider>
```

## What's next

You're almost ready to start developing the next web3 killer app. Before you get cracking on your project, get familiar with some crucial aspects of CSPR.click that are demonstrated in the template:

#### Responding to CSPR.click events

The `App` component sets handlers to listen and respond to events triggered by CSPR.click when the user connects an account, switches to a different one, or closes the session.

Refer to the [Handling events](https://docs.cspr.click/cspr.click-v1.11/cspr.click-sdk/react/handling-events) page for information on how to add your listener functions.

#### Customize the top navigation bar

The template displays some settings selectors in the top navigation bar. Find the `ClickTopBar` component in `src/components/ClickTopBar/index.tsx` and see how these settings are defined.

Refer to the [Customizing the top bar](https://docs.cspr.click/cspr.click-v1.11/cspr.click-sdk/react/customizing-the-top-bar) section for complete reference on how to work with each of the setting elements in the top bar.

#### Request transaction approvals

At some point, your application will need to interact with the Casper network by sending a transaction (aka deploy).\
CSPR.click manages this process communicating with the active wallet to request the user to approve or reject the transaction. The UI depends on the wallet.

The template includes the `BuyMeACoffee` components to demonstrate how to request a transaction signature and send the approved deploy to the network.

Refer to the [Signing transactions](https://docs.cspr.click/cspr.click-v1.11/cspr.click-sdk/react/signing-transactions) page for information on how to request the user a transaction approval. Also, look at [Processing status updates](https://github.com/make-software/casper-click-websdk/blob/documentation-v1.11/docs/public/javascript/processing-status-updates.md) for information on how to listen for real-time status updates.