Task: Add app provider and add config alias paths for tsconfig and removed React imported

README.md

@@ -7,6 +7,7 @@ CUBETIQ React App Template for general use in react application.
 - Create React App: 4.0.3
 - React: 17.0.0
 - TypeScript: 4.1.2
+- Craco: 6.1.2 | Craco less: 1.17.1
 
 # Contributors
 

craco.config.js

@@ -1,9 +1,16 @@
-const path = require('path')
+const path = require('path');
 
 module.exports = {
-  resolve: {
+  webpack: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      '@': path.resolve(__dirname, 'src/')
-    },
+    }
   },
-}
+  jest: {
+    configure: {
+      moduleNameMapper: {
+        '^@(.*)$': '<rootDir>/src$1'
+      }
+    }
+  }
+};

src/app/App.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import AppProvider from '@/provider/AppProvider'
 import RouterView from '../routes'
-import './App.css'
+import './App.less'
 
 const App = () => {
   return (
-    <RouterView />
+    <AppProvider><RouterView /></AppProvider>
   )
 }
 

src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import './index.css'
+import './index.less'
-import App from './app/App'
+import App from '@/app/App'
 import reportWebVitals from './reportWebVitals'
 
 ReactDOM.render(

src/pages/About/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './index.less'
 
 export default function About() {

src/pages/Home/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './index.less'
 
 export default function Home() {

src/provider/AppProvider.tsx

@@ -0,0 +1,5 @@
+const AppProvider = (props: any) => {
+    return <>{props.children}</>
+}
+
+export default AppProvider

src/routes/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 import { routes } from './routes'
 

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,5 +20,8 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "extends": "./tsconfig.paths.json",
+  "include": [
+    "src"
+  ]
 }

tsconfig.paths.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "baseUrl": "./",
+        "paths": {
+            "@/*": ["src/*"]
+        }
+    }
+}