Set up a React and TypeScript project from scratch

Reading Time: 2 minutes

Create a folder ts-graphql-country and change to directory

mkdir ts-graphql-country
cd ts-graphql-country

Generate package.json
Add “browserslist”: [ “last 2 Chrome versions” ] in package.json

npm init

"browserslist": [
   "last 2 Chrome versions"
]

Install react, react-dom and @reach/router
Install parcel bundler and prettier

npm install react react-dom @reach/router
npm install -D parcel-bundler prettier

Add dev script in package.json to launch web site at http://localhost:1234
Create a blank index.html in src folder

"scripts" {
  "dev": "parcel src/index.html"
}

Create .prettierrc file to store prettier configurations

{
    "trailingComma": "all",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true
}

Install @babel/core, @babel/preset-env and @babel/react

npm install -D @babel/core @babel/preset-env @babel/preset-react

Create .babelrc file and include babel presets as follows:

{
    "presets": ["@babel/preset-react", "@babel/preset-env"]
}

Install typescript, @types/react, @types/react-dom and @types/reacth__router
Install tslint, tslint-react and tslint-config-prettier
Run npx tsc –init to generate tsconfig.json

npm install -D typescript
npm install -D @types/react @types/react-dom @types/reach__router
npm install -D tslint tslint-react tslint-config-prettier
npx tsc --init

Open tsconfig.json. Update target to “ES2018”, uncomment “jsx” field and replace the value to “react”
Generate tslint.json and add the following

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "rules": {
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "member-ordering": false,
    "no-console": false,
    "jsx-no-lambda": false
  }
}

Add “lint”: “tslint –project .” script in package.json

"scripts": {
...
    "lint": "tslint --project ."
}

Install node-sass

npm install node-sass

Create blank scss file, style.scss, in src folder
Create an App component in App.tsx in src folder and write simple JavaScript code to render a h1 tag

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
    return (
        <h1>Hello</h1>  
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

Import style.scss and App.tsx to index.html to render App component

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.scss" />
    <title>TS GraphQL Country List</title>
  </head>

  <body>
    <div id="root">not rendered</div>
    <script src="./App.tsx"></script>
  </body>
</html>

In terminal, type npm run dev to start web application.
In browser, the following is displayed