## Create a new React App

To get started, first create a new React app, and then install and use the Amplify CLI to start adding backend capabilities to your app.

From your projects directory, run the following commands:

```bash
npx create-react-app react-amplified
cd react-amplified
```

This creates a new React app in a directory called **react-amplified** and then switches into the new directory. 

From the **react-amplified** directory, run the app by using the following command:

```bash
npm start
```

This runs a development server and allows you to see the output generated by the build. You can see the running app by navigating to [http://localhost:3000](http://localhost:3000).

## Initialize a new backend

With the app running, it's time to set up Amplify and create the backend services to support the app.

Open a new terminal. From the **react-amplified** directory, run:

```bash
amplify init
```

When you initialize Amplify you'll be prompted for some information about the app, with the option to accept recommended values:

```console
? Enter a name for the project reactamplified
The following configuration will be applied:

?Project information
| Name:  reactamplified
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

...

? Please choose the profile you want to use default
```

> Amplify CLI will infer the proper configuration based on the type of project Amplify is being initialized in where possible. Here it detected Create React App and provided the proper configuration for type of app, framework, source, distribution, build, and start options.

When you initialize a new Amplify project, a few things happen:

- It creates a top level directory called **amplify** that stores your backend definition. During the tutorial you'll add capabilities such as a GraphQL API and authentication. As you add features, the **amplify** folder will grow with infrastructure-as-code templates that define your backend stack. Infrastructure-as-code is a best practice way to create a replicable backend stack.
- It creates a file called **aws-exports.js** in the **src** directory that holds all the configuration for the services you create with Amplify. This is how the Amplify client is able to get the necessary information about your backend services.
- It modifies the **.gitignore** file, adding some generated files to the ignore list
- A cloud project is created for you in the AWS Amplify Console that can be accessed by running `amplify console`. The Console provides a list of backend environments, deep links to provisioned resources per Amplify category, status of recent deployments, and instructions on how to promote, clone, pull, and delete backend resources

## Install Amplify Libraries

The `aws-amplify` package is the main library for working with Amplify Libraries in your projects:

```bash
npm install aws-amplify
```

## Set up frontend

Next, configure Amplify so it can interact with backend services.

Open **src/index.js** and add the following code below the last import:

```javascript
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
Amplify.configure(awsExports);
```

And that's all it takes to configure Amplify. As you add or remove categories and make updates to your backend configuration using the Amplify CLI, the configuration in **aws-exports.js** will update automatically.

Now that your React app is set up and Amplify is initialized, you can add an API in the next step.