Advanced React Configuration

In this chapter, we will explore advanced configurations to optimize your React application. We will see how to customize the development and production environments.

TypeScript Configuration

TypeScript brings static typing to JavaScript, which improves the maintainability and robustness of your code.

1. Installing TypeScript:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

2. Configuring tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  "include": ["src"]
}

Webpack Configuration

Although Create React App uses Webpack under the hood, we can eject it for advanced customization: