Using create-react-app

create-react-app is a command-line tool that we can use to quickly create a React and TypeScript app with lots of useful pieces.

Open Visual Studio Code in an empty folder of your choice. Let's create an app using this tool:

1. We use the create-react-app npm package to create a React and TypeScript project by entering the following:

npx create-react-app my-react-ts-app --typescript

The npx tool temporarily installs the create-react-app npm package and uses it to create our project.  

We chose to call our project my-react-ts-app. We also specified --typescript, which is the bit that tells the tool to set the project up with TypeScript.

The tool will take a minute or so to create your project.

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 less that 16.7.0-alpha.0 then we can install this version using the following command:

npm install react@16.7.0-alpha.0
npm install react-dom@16.7.0-alpha.0

1. When the project is created, add TSLint as a development dependency, along with some rules that work well with React and Prettier:

cd my-react-ts-app
npm install tslint tslint-react tslint-config-prettier --save-dev

1. 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,
    "no-debugger": false,
    "no-console": false,
  },
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  }
}

Here we are merging the generally recommended rules with specific ones for React and Prettier. We've enabled the use of debugger and console statements, which will come in handy from time to time as we develop our app.

We've also suppressed the rule about the ordering of import statements and object literal keys, to make life easier as we copy bits of code from this book.

1. We can now start the app running in a development server, by entering the following command:

npm start

After a few seconds, a browser window opens, with our app running:

Our React code is in the src folder.

1. With our app still running, open the App.tsx file. You'll immediately see a linting error on the render method, because we haven't specified the modifier:

 So, let's fix that by adding public as the modifier:

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

1. While we are still in App.tsx, let's change the anchor tag to the following: 

<a className="App-link"  rel="noopener noreferrer">
 Learn React and TypeScript
</a>

1. Save the file, and go back to the app in the browser. The app has automatically changed, showing the new content. Nice!

create-react-app has configured a lot of great stuff for us in our project. This is great if we just want to quickly start learning React, and skip over how the React and TypeScript code is packaged up to be served from a web server.

In the next section, we'll do manually do some of what create-react-app did for us automatically. This will start to give us an understanding of what needs to happen when React and TypeScript apps are packaged up.