Set up a React and TypeScript project from scratch

 0 total views

  • 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

Use CSS to draw diagonal line across of square

 2 total views

  1. Create two divs and convert them into flexboxes.
.square {
   position: relative;
   width: 130px;
   height: 130px;
   border: 1px solid black;
   background: red;

   display: flex;
   justify-content: center;
   align-items: center;
}

<div class="square left-diag"></div>
<div class="square right-diag"></div>

2. Add .left-diag:after pseudo element to draw a black dialog line that draws from bottom left to upper right. Sass style is shown below:

.square {
   &.left-diag:after {
     content: "";
     position: absolute;
     z-index: 1;
     border: 1px solid black;
     height: 140%;
     transform: rotate(-45deg);
   }
}

3. Add .right-diag:after pseudo element to draw a black dialog line that draws from bottom right to upper left. Sass style is shown below:

.square {
   &.right-diag:after {
     content: "";
     position: absolute;
     z-index: 1;
     border: 1px solid black;
     height: 140%;
     transform: rotate(45deg);
   }
}

4. Lets refactor the sass styles and group common css properties in a mixin function

@mixin strikethroughDiagonal($rotation) {
  content: "";
  position: absolute;
  z-index: 1;
  border: 1px solid black;
  height: 140%;
  transform: rotate($rotation);
}

.square {
   &.left-diag:after {
     @include strikethroughDiagonal(-45deg); 
   }

   &.right-diag:after {
     @include strikethroughDiagonal(45deg); 
   }
}

Stackblitz repo:

https://stackblitz.com/edit/js-4s7qhi