add react-query, update readme, add context to App

Author: ilyasudakov

package.json

@@ -61,15 +61,22 @@
     }
   },
   "lint-staged": {
-    "*.+(js|jsx)": ["eslint --fix", "git add"],
-    "*.+(json|css|md)": ["prettier --write", "git add"]
+    "*.+(js|jsx)": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.+(json|css|md)": [
+      "prettier --write",
+      "git add"
+    ]
   },
   "dependencies": {
     "compare-versions": "^3.6.0",
     "dotenv": "^8.2.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-query": "^3.6.0",
     "shelljs": "^0.8.4"
   }
 }

readme.md

@@ -6,18 +6,29 @@ React v17<br>
 Webpack 5<br>
 SCSS<br>
 Jest/React Testing Library<br>
-Env Files<br>
 PropTypes<br>
+ESLint & Prettier<br>
+Env Files<br>
 
 ## Setup
 
-Run `git clone https://github.com/ilyasudakov/basic-react-boilerplate.git` to clone repository<br>
-Run `npm run setup` to initiate setup process, where you can create new repo if you want to<br>
-Then you can `npm run start` to view template app
+1. Run `git clone https://github.com/ilyasudakov/basic-react-boilerplate.git <YOUR_PROJECT_NAME>` to clone repository<br>
+
+2. Change working directory to your project directory `cd <YOUR_PROJECT_NAME>`<br>
+
+3. Run `npm run setup` to initiate setup process, where you can create new repo if you want to<br>
+
+4. Then you can `npm run start` to view template app
 
 ## Commands
 
 Run `npm i` to install all dependencies<br>
 Run `npm run dev` to run app in development mode<br>
 Run `npm run start` to serve files to `/public` folder<br>
 Run `npm run test` to run tests<br>
+
+## Questions
+
+- Q: Why no Redux?
+
+  A: Too much boilercode, hard to maintain and slow to code. Rather use React-Query, which fetches, parses, caches data for you. Or in case if need global storage for your app, React Context will probably do fine , but in huge apps where global state changes frequently - Redux is probably better option

src/components/App.jsx

@@ -1,7 +1,18 @@
 import React from 'react';
+const AppContext = React.createContext();
 
-const App = () => {
-  return <div>App</div>;
+export const App = () => {
+  return (
+    <AppContext.Provider
+      value={
+        {
+          //your context state variables go here
+        }
+      }
+    >
+      <div>App</div>
+    </AppContext.Provider>
+  );
 };
 
-export default App;
+export default AppContext;

src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './components/App.jsx';
+import { App } from './components/App.jsx';
 
 ReactDOM.render(<App />, document.getElementById('root'));