React+craco+ts+scss initial project

- craco

1.npm i @craco/craco
2.Create a craco.config.js file in the root directory

my-app
├── node_modules
├── craco.config.js
└── package.json

3.Update package.json

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

4.add craco.config.js in the root directory

module.exports = function({ env }) {
    return {

    };
}

TypeScript

1. install

npm install --save-dev typescript ts-loader @types/react @types/react-dom

• typescript - the library that converts TypeScript files (file extension with .ts or .tsx) into JavaScript.

• ts-loader - Webpack loader that integrates TypeScript into Webpack. Webpack uses this loader to help convert TS
  files into the JS and integrate into the final bundle.

• @types/react - provide typing for React API. Also, provides intellisence and documentation.

• @types/react-dom - provide typing for React DOM API. Also, provides intellisence and documentation.

2.tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "Node"
  }
}

3.Configure

• add ts-loader and test for ts and tsx files

      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }

• add ts and tsx to the list of extensions to resolve

 resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  }

• remember to rename the js files to tsx if they have React code, else ts and fix the entry point

 entry: path.resolve(__dirname, 'src', 'index.tsx'),