React Flow control...

​>npx create-react-app  shopping-react

>npm start

1. Client makes a request from browser

            http://localhost:3000

2. The request is processed on "Web Server - HttpServer"

3. Request is processed by "HttpHandler" in HttpProcessing Pipeline.

4. HttpHandler uses a Routing Engine

5. Routing Engine verifies the request by using "Route Table".

6. Route Table comprises of information about the resources provided by application.

7. If requested is not available in route table then it returns 404 : Not Found.

8. If requested path is available then it returns 200: OK

9. AppComponent is rendered into Root of Index.html

10. Index.html is rendered into Browser.

                                                                                                           

                                                                                                                      Flow control image


FAQ: Which component is rendered by default?
Ans : "AppComponent"

FAQ: Where is the source for AppComponent?
Ans :  It is in "src/app.js"

FAQ: How index.html is able to access the scripts without linking the script files?
Ans:  By using "WebPack".

FAQ: What is WebPack?
Ans: WebPack is bundler, It is used to bundle all resources of your application.
        [scripts, styles, images etc..]
       It can configure which script to render in HTML page.
       Without linking script file it can render the scripts.
       It uses "Mapping" and "Model Binding".

FAQ: What is source for Index.html? From where index.html is accessing scripts?
Ans : src/index.js

                        index.html
        <div id="root"> </div>

       index.js

         const root = document.createRoot(document.getElementById("root"));
         root.render(<App/>);

FAQ: Can we run react application in browser where JavaScript is disabled?
Ans: No.

FAQ: How to know javascript enabled or not?
Ans : <noscript>