react-typescript-webpack-empty-project

To initial project based on delivered code:

1. Download this code localy
2. npm start

TO initial empty project step by step by yourself

1. Initial project npm init -y
2. #Installing devDependencies

npm install --save-dev @types/react @types/react-dom css-loader html-webpack-plugin mini-css-extract-plugin source-map-loader typescript ts-loader webpack webpack-cli webpack-dev-server

#installing Dependencies npm install react react-dom

3. Let’s also manually add a few different files and folders under our root folder:

Add webpack.config.js to add webpack-related configurations (look into deliverd files) Add tsconfig.json for all of our TypeScript configurations (look into deliverd files) Add a new directory- src. Create a new directory components, in the src folder. Finally, add index.html,** App.tsx**, and index.tsx in the components folder. (look into deliverd files)

Initialization of json-server

1. Install json-server npm i --save-dev json-server
2. Add mockData,js, createMockDB.js, apiServer.js file in tools directory and fill up it (look into deliverd files)
3. Modify package.json script and install npm i --save-dev npm-run-all (look into deliverd files)

Prettier

1. npm ---save-dev prettier

Helful links

1. https://www.smashingmagazine.com/2020/05/typescript-modern-react-projects-webpack-babel/
2. https://webpack.js.org/guides/typescript/#build-performance