Before we install axios, we are going to quickly create our little React app:

1. In a folder of our choice, let's open Visual Studio Code and its Terminal and enter the following command to create a new React and TypeScript project:

npx create-react-app crud-api --typescript

Note that the version of React we use needs to be at least version 16.7.0-alpha.0. We can check this in the package.json file. If the version of React in package.json is older than 16.7.0-alpha.0, then we can install this version using the following command:

npm install [email protected]
npm install [email protected]

2. After the project is created, let's add TSLint as a development dependency to our project, along with some rules that work well with React and Prettier:

cd crud-api
npm install tslint tslint-react tslint-config-prettier --save-dev

3. Let's now add a tslint.json file containing some rules:

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "rules": {
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "jsx-no-lambda": false,
    "no-debugger": false,
    "no-console": false,
  },
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  }
}

4. If we open App.tsx, there is a linting error. So, let's resolve this by adding public as the modifier on the render method:

class App extends Component {
  public render() {
    return ( ... );
  }
}

5. Now we can install axios using NPM:

npm install axios

Note that axios has TypeScript types within it, so, we don't need to install them. 

6. Let's start our app running before we continue with development:

npm start

The app will then start up and run in our browser. In the next section, we'll use axios to get posts from JSONPlaceholder.