1. react - because this is a React-based template
2. react-dom - for adding React app to the DOM
3. react-router - for creating routes to views
4. history - peer dependency of react-router

1. webpack - for packaging
2. webpack-dev-server - for development

1. babel-loader - for loading React/jsx components
2. babel-core - peer dependency for babel-loader
3. babel-preset-react - to properly load React components
4. file-loader - for loading images etc.
5. style-loader - for loading styles
6. css-loader - for loading css
7. sass-loader - for loading sass

1. copy-webpack-plugin - to copy static boilerplate to build
2. Testing
3. jest-cli - for running tests

1. eslint - for linting
2. eslint-plugin-react - to handle linting amidst jsx

1. React Testing Library : npm install --save-dev @testing-library/react
2. Jest.
3. Enzyme.

When a component that is already displayed is re-render again. Purpose is to keep the UI in sync with the states

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory Solution :-

1. See the current value of max-old-space-size (in MB) To see the current (not exact but very close) value of max-old-space-size (in MB), run in your terminal : node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))'

2. Put this is in terminal :
   a. Set NODE_OPTIONS="--max-old-space-size=8192" OR b $env:NODE_OPTIONS="--max-old-space-size=8192"

1. prop-types Using 'prop-types' to document and validate the types of props passed to a component helps prevent errors. Prop types help to ensure that the correct data types are being passed into your components, reducing the likelihood of runtime errors. Prop types serve as documentation for your components, making it clear what types of data each component expects and what the component does with that data. They can help to identify issues with your code by providing helpful error messages when an incorrect data type is passed to a component.

Using prop types can help to facilitate collaboration between developers by making it clear what data is expected by each component and reducing confusion about how to use the component. Using prop types can improve the overall quality of your code by reducing the likelihood of runtime errors and making it more maintainable and readable.

Module not found: Error: Can't resolve './App' in '/home/user/Desktop/WebDev/React/temp/merntemplate/src' Did you mean 'App.js'? BREAKING CHANGE: The request './App' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

Solution : In webPack Rules write this. { test: /.m?js/, resolve: { fullySpecified: false, }, }