react hot loader without ejecting

Author: rohan-paul

Node-Express/README.md

@@ -16,10 +16,12 @@ This means that Node.js is a program we can use to execute JavaScript on our com
 This engine takes your JavaScript code and converts it into a faster machine code. Machine code is low level code which the computer can run without needing to first interpret it.
  Firefox uses Mozilla’s SpiderMonkey JS engine, and Microsoft products use its Chakra engine.
 
- The Node.js Execution model
+ ### The Node.js Execution model
 In very simplistic terms, when you connect to a traditional server, such as Apache, it will spawn a new thread to handle the request. In a language such as PHP or Ruby, any subsequent I/O operations (for example, interacting with a database) block the execution of your code until the operation has completed. That is, the server has to wait for the database lookup to complete before it can move on to processing the result. If new requests come in while this is happening, the server will spawn new threads to deal with them. This is potentially inefficient, as a large number of threads can cause a system to become sluggish — and, in the worse case, for the site to go down. The most common way to support more connections is to add more servers.
 
-Node.js, however, is single-threaded. It is also event-driven, which means that everything that happens in Node is in reaction to an event. For example, when a new request comes in (one kind of event) the server will start processing it. If it then encounters a blocking I/O operation, instead of waiting for this to complete, it will register a callback before continuing to process the next event. When the I/O operation has finished (another kind of event), the server will execute the callback and continue working on the original request. Under the hood, Node uses the libuv library to implement this asynchronous (i.e. non-blocking) behavior.
+Node.js, however, is single-threaded. It is also event-driven, which means that everything that happens in Node is in reaction to an event. 
+
+### For example, when a new request comes in (one kind of event) the server will start processing it. If it then encounters a blocking I/O operation, instead of waiting for this to complete, it will register a callback before continuing to process the next event. When the I/O operation has finished (another kind of event), the server will execute the callback and continue working on the original request. Under the hood, Node uses the libuv library to implement this asynchronous (i.e. non-blocking) behavior.
 
 Node’s execution model causes the server very little overhead, and consequently it’s capable of handling a large number of simultaneous connections. The traditional approach to scaling a Node app is to clone it and have the cloned instances share the workload. Node.js even has a built-in module to help you implement a cloning strategy on a single server.
 

Node-Express/passport-actual-implementation.md renamed to Node-Express/passport-actual-workflow-implementation.md

@@ -4,7 +4,7 @@
 
 1> Official Doc - https://reacttraining.com/react-router/web/api/Redirect
 
-Rendering a <Redirect> will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.
+Rendering a <Redirect> will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do. 
 
 2> https://medium.com/@anneeb/redirecting-in-react-4de5e517354a
 

React/Redirect-from-react-router-dom.md

@@ -0,0 +1,119 @@
+### React Hot Loader is a plugin that allows React components to be live reloaded without the loss of state. It works with Webpack and other bundlers that support both Hot Module Replacement (HMR) and Babel plugins. (see my note in file webpack-Hot-Module-Replacement.md) It is the replacement of code in a running application without requiring a restart or reloading of the application. It is very useful when developing because you can see your changes as you make them thus giving immediate feedback. React hot loading depends on a working Webpack HMR setup
+
+https://gaearon.github.io/react-hot-loader/getstarted/  - This is a good resource to implement HMR (Hot Module Replacement) in React
+
+## Hot reloading In create-react-app AFTER ejecting
+
+/home/paul/codes-Lap/React/boilerplate/redux-boilerplate-base-counter-AFTER-EJECTING
+
+### First configuration in webpackDevServer.config.js
+
+// Enable hot reloading server. It will provide /sockjs-node/ endpoint
+// for the WebpackDevServer client so it can learn when the files were
+// updated. The WebpackDevServer client is included as an entry point
+// in the Webpack development configuration. Note that only changes
+// to CSS are currently hot reloaded. JS changes will refresh the browser.
+``hot: true,``
+
+# How React Hot Loader works
+
+https://github.com/gaearon/react-hot-loader.wiki.git
+
+React-Hot-Loader was created to solve 2 tasks:
+
+- Seamlessly replace the old Components, by the new ones.
+- Hide all updates from React, to not let him remount changed branches, and thus drop the information stored in component instances, e.g state.
+
+To achieve these goals React-Hot-Loader
+
+- first detects which "old" components shall be replaced by which new ones.
+- swaps the real code "behind" the components.
+
+Hot module replacement, enchanted with React-hot-loader, might look like a awesome concept, helping you to build application faster, and better, but, according to some, it also has some drawback like A) Compilation is not so “hot”. It may took a minute to build a bundle or B) It empowers monkey-patching, not the tests first approach.
+
+# How to turn on Hot Module Replacement in create-react-app without ejecting
+
+### While implementing the react-hot-loader without ejecting create-react-app I have followed []this guide](https://daveceddia.com/hot-reloading-create-react-app/)
+
+And my [live app here-a boilterplate basic counter with react and redux](https://github.com/rohan-paul/redux-boilerplate-base-counter/tree/master/redux-boilerplate-base-counter-without-ejecting)
+
+https://daveceddia.com/hot-reloading-create-react-app/
+
+#### Create React App don’t have Hot Module Replacement (HMR) set up by default. HMR allows us to replace modules in-place without restarting the server.
+
+Install the following 3 packages
+
+``yarn add react-app-rewired react-app-rewire-hot-loader react-hot-loader``
+
+Create a file called config-overrides.js in the root directory of your project (not under “src”) with this code:
+
+```js
+const rewireReactHotLoader = require('react-app-rewire-hot-loader');
+
+module.exports = function override(config, env) {
+  config = rewireReactHotLoader(config, env);
+  return config;
+}
+
+```
+Change index.js accordingly:
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import registerServiceWorker from './registerServiceWorker';
+
+// Add this import:
+import { AppContainer } from 'react-hot-loader';
+
+// Wrap the rendering in a function:
+const render = Component => {
+  ReactDOM.render(
+    // Wrap App inside AppContainer
+    <AppContainer>
+      <App />
+    </AppContainer>,
+    document.getElementById('root')
+  );
+};
+
+// Do this once
+registerServiceWorker();
+
+// Render once
+render(App);
+
+// Webpack Hot Module Replacement API
+if (module.hot) {
+  module.hot.accept('./App', () => {
+    render(App);
+  });
+}
+```
+
+### Change package.json to use react-app-rewired instead of react-scripts. In the “scripts” section, change this:
+
+```js
+"scripts": {
+  "start": "react-scripts start",
+  "build": "react-scripts build",
+  "test":  "react-scripts test --env=jsdom"
+}
+```
+
+To this:
+
+```js
+"scripts": {
+  "start": "react-app-rewired start",
+  "build": "react-app-rewired build",
+  "test":  "react-app-rewired test --env=jsdom"
+}
+
+```
+
+### What is repalaceReducer()
+
+Replaces the reducer currently used by the store to calculate the state. You might need this if your app implements code splitting, and you want to load some of the reducers dynamically. You might also need this if you implement a hot reloading mechanism for Redux.

React/hot-reloading-in-React.md

@@ -0,0 +1,11 @@
+### Official Guide - https://webpack.js.org/guides/hot-module-replacement/
+
+Hot Module Replacement (or HMR) is one of the most useful features offered by webpack. It allows all kinds of modules to be updated at runtime without the need for a full refresh.
+
+### Official concept - https://webpack.js.org/concepts/hot-module-replacement/
+
+### Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways:
+
+Retain application state which is lost during a full reload.
+Save valuable development time by only updating what's changed.
+Tweak styling faster -- almost comparable to changing styles in the browser's debugger.

React/react-hot-loader.md

@@ -57,6 +57,6 @@ I am using dispatch() to send the type along with the data that we get from the
 
 This double function strategy allows us to wait for an asynchronous operation (like fetching data) to complete, and then the action is returned by the thunk.
 
-The plain data flows in a typical Redux dispatch(action) -> reducer -> new state -> re-render
+The plain data flows in a typical Redux is like this >> dispatch(action) -> reducer -> new state -> re-render
 
 The adjusted order, including reducers, is: dispatch ➡️ action creator ➡️ thunk ➡️ action ➡️ reducer.

React/webpack-Hot-Module-Replacement.md

@@ -23,7 +23,7 @@ While creating index.html manually works good, it would be nice if webpack can c
 Webpack can do this for us with the help of html-webpack-plugin. Using this plugin has some added advantages like auto-hashing the ‘src’ attribute of the embedded <script> tag every time the webpack is run, which makes browser to get the latest version of the file from server instead of using a cached one whenever it has a new hash.
 
 
-In **create-react-app** - this is module is used extensively, which I can see after ejecting
+In **create-react-app** - this module is used extensively, which I can see after ejecting
 The below from ``./config/webpack.config.prod.js``
 ```js
 // Generates an `index.html` file with the <script> injected.
@@ -61,7 +61,7 @@ And the below from ``./config/webpack.config.dev.js``
 
 # Loaders
 
-Loaders let you run preprocessors on files as they’re imported. This allows you to bundle static resources beyond JavaScript, but let’s look at what can be done when loading .js modules first.
+Webpack accepts a loader object which specify loader to apply to files that match the test regex and exclude files that match the exclude regex. So, loaders let you run preprocessors on files as they’re imported. This allows you to bundle static resources beyond JavaScript, but let’s look at what can be done when loading .js modules first.  In this below case we’re applying the babel-loader to all files with a .js extension that aren’t in node_modules and are not in bower_components
 
 module: {
 +     rules: [