Is it a library?

• React's landing page (https://reactjs.org/) says that React is "A JavaScript library for building user interfaces"
• What's another JavaScript UI library? jQuery ... but these 2 JavaScript libraries work vastly differently (more on this later)

Is it a framework?

• most documentation/demos/tutorials on using React feel like working within a framework
  • and it can be confusing to know which parts of this "framework" are React and which parts are other JavaScript libraries
• even thought React calls itself a library, it is very commonly referred to as a framework

Is it just for Single Page Application development? ... (no)

Working with React so commonly feels like working within a framework, because it is most commonly used in SPA development along with a collection of numerous other JavaScript libraries

• all the libraries working together comprise the SPA, and React is a key part of it, but only a part, only a library

But it is challenging to find documentation/blogs/tutorials that show example "React apps" in a manner that helps distinguish React from the rest of the application libraries.

Even to understand the difference between React and JSX can be a hurtle due to how common it is to see JSX used with React.

As challenging as it can be to learn how to distinguish React parts from other parts of a SPA that are simply other JavaScript libraries, it can be even more challenging to learn how to incorporate React into an ASP.NET Core MVC app.

But incorporating React into an ASP.NET Core MVC app can certainly be done, and it can be very beneficial.

As the landing page (https://reactjs.org/) states: "React is a JavaScript library for building user interfaces"

React consists of

• an in-memory virtual DOM
  • this represents what the browser DOM should look like
  • https://reactjs.org/docs/faq-internals.html
• a reconciliation engine
  • this ensures that the browser DOM looks the way the virtual DOM says it should
  • this engine is a highly optimized mechanism that makes targeted changes to the smallest possible specific parts of the browser DOM necessary to match the virtual DOM
  • the developer does not write any code to directly interact with this mechanism
  • sources
    • https://reactjs.org/docs/reconciliation.html
    • https://github.com/acdlite/react-fiber-architecture
• a component-based API
  • this enables organizing the UI into reusable pieces--or components--comprised of cohesive state and functionality
    • this includes the ability to define a component's state
    • this includes the ability to define how a component's state is operated on
    • this includes the ability to define "props"--data or functionality--to pass to a component, and from parent to child components
  • this enables declaratively stating what the browser DOM should look like via the component's render function
  • sources
    • https://reactjs.org/docs/react-component.html
    • https://reactjs.org/docs/react-api.html
• a component life cycle that determines
  • when a component is instantiated
  • when a component becomes a part of the virtual DOM
  • when functionality can be called due to a change in state
  • when a component re-rendering occurs
  • sources
    • https://reactjs.org/docs/state-and-lifecycle.html
    • https://reactjs.org/docs/react-component.html#the-component-lifecycle
    • lifecycle diagram https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
• one-way data flow
  • React uses one-way binding
    • two-way binding (not React)
      • a change in a view model triggers a change in its bound piece of browser DOM, and a change in the browser DOM triggers a change in its bound view model
    • one-way binding
      • a change in a component's state triggers a browser DOM update--never the reverse
  • React's one-way data flow
    • data flows down from parent component to child components
    • https://reactjs.org/docs/state-and-lifecycle.html#the-data-flows-down

React vs. jQuery in terms of browser DOM manipulation

• jQuery provides the developer an API for direct, imperative browser DOM manipulation
• React sits between the developer and the browser DOM
  • the developer declaratively tells React how the browser DOM should look
  • rather than write code to directly update the browser DOM, the developer writes code to define changes in component state
  • then, given changes in state, React handles any manipulation of the browser DOM