React in Web Frontend Application

• UUID: 609a1679-3bb7-4183-8a22-025663ab7731
• See also
  • [One!Contents:20231203.React.js Framework Selection.md]

Key points about React.js

• React.js is not a framework but only a library which focus on just one aspect of web applications
  • the one aspect is reactive representation of data in memory
• Why to choose React.js
  • because of many existing React.js components
• React.js vs Angular
  • React.js is not a framework while Angular is a framework
  • React.js is for a aspect of the HTML document
  • Angular is for makeing web technology powered applications
  • Angular is more proper for enterprise applications as being more professionally maintained complete solution
  • React.js is more for quick individual applications as there are a large space for individual configurations
  • The create-react-app enlarges React.js to be more like Angular, however, is not well/professionally maintained
    • The well/professional here means not managed at enterprise level situation like Angular which is financially and capable developer-wise garanteed by Google.
• There is no good recommendation of web frontend framework for React.js on the official website of React.js
  • Next.js is mainly an application instead of an framework considering
    • React.js related code are not preserved but executed in Next.js at compile time which makes the built result not really web frontend application
  • Remix has too many dependencies on Remix things and also much like a static site generator application
  • Gatsby is more a static site generator application than a framework
  • Expo (for native apps) is not for standard web browser runtime

Key points about React.js powered application routing

• React.js itself has no concept of web application
  • as React.js focus only on a GUI part of the HTML document in the web browser
• Routing was mainly about URL linking before Single Page Application (SPA) became a topic
  • And routing were mainly handled by a web server instead of by a web client browser tab
• SPA which uses React.js for GUI parts has the need of an router to do routing
• Because React.js is so predominant in SPA which uses React.js, routing solutions for these SPA are commonly entitile with React.js
• For simple React.js powered SPA, routing is not necessary (in terms of different URLs)
  • if certain states of the SPA is not needed to be tagged with certain URLs
• For my application, I prefer not to have multiple URLs for SPA, therefore, I decide not to use a "typical" router
  • "Typical" routers for React.js powered applications include
    • React Router
      • https://github.com/remix-run/react-router
      • https://reactrouter.com/en/main/start/overview
      • https://v5.reactrouter.com/web/guides/quick-start
      • https://reacttraining.com/blog/reach-react-router-future

Key points about React.js shared state management

• Application global state management is not a direct topic in React.js
  • Again, as React.js is just a library which focus on just one aspect of HTML documents
• However, sharing state data among different React.js components is one of the core concerns of using React.js
• Comparing to just use global variable for data writing and reading is that React.js components need to be triggered to rerender to avoid outdated representation of data while also considering the performance
• There has been many solutions to tackle this concern, including
  • the once most popular and ubiquitous choice of Redux
  • and many others such as MobX

Key points about React.js shared CSS rules

• React.js itself doesn't address sharing CSS rules among different components
• However, sharing CSS rules is one of the core concerns of using React.js
• Basically, React.js supports inline CSS rules for components well
• Shared CSS rules work just like in ordinary HTML documents by using shared tag names, class names, attributes, and so on