React tutorial: Miscellaneous

Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html .

The startup React app has an index.js file (which I presume gets invoked when index.html file is served even though the index.html file does not include it as a script file). This index.js file has a statement: “import “./styles.css”;”. This statement seems to bring in the referred css file into the processing/rendering of index.html file (only page served by React – Single Page Application).

How exactly does this “import “./styles.css”;” work. I don’t recall seeing it in plain vanilla Javascript projects code that I have gone through. …

How to load CSS files using JavaScript?, https://www.geeksforgeeks.org/how-to-load-css-files-using-javascript/ . This article shows how to use DOM manipulation functions to load a CSS file. It does not use the import statement approach.

import, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import seems to the reference page for import statement in JavaScript. It does not mention CSS at all. All of its import examples seem to be of JavaScript code (functions/objects) only.

Could not find a good article explaining “import “./styles.css”;” usage in React application. It seems that this import of css file is not part of regular JavaScript and that React (and perhaps some other JS libraries/frameworks) provides it as a kind of extension.

...

React: Why index.html does not have script tag? Main answer seems to be that the index.html is only a template. At build time or runtime, html and js files seem to be generated from the index.html template file and other template files. For more, see: Why does React not use a script tag?, https://stackoverflow.com/questions/73167629/why-does-react-not-use-a-script-tag .

…

The following is an interesting post as it has a discussion on why React is claimed to be faster than JavaScript. I think React will be slower than Dynamic HTML JavaScript as the latter will use DOM manipulation API and update just the elements of the HTML page that need to be updated. One response (by yangli-io) in this article seems to be a knowledgeable one and it seems to make a similar statement. The advantage of React over Dynamic HTML JS seems to be more ease of writing and maintaining code which I tend to agree based on my current limited exposure to React and Dynamic HTML JS.

What really makes ReactJS as fast as it claims to be?, https://stackoverflow.com/questions/33355125/what-really-makes-reactjs-as-fast-as-it-claims-to-be

…

Example on inline styling in React from Dave Gray code:

<p style={{ marginTop: "2rem" }}>Your list is empty.</p>
This article helps in understanding above kind of statements: Inline Styling with React, https://www.pluralsight.com/guides/inline-styling-with-react .

...

To fix “Error: Can’t resolve ‘colornames'” in Chap. 10 (Dave Gray):

npm i colornames

colornames package documentation, https://www.npmjs.com/package/colornames mentions using toHex() function whereas Dave Gray tutorial which seems to use the same colornames package uses colorNames() function. I chose to go by the documentation and used toHex() function. … Got it now. The toHex() function seems to be the default export. So using a statement like below, I think, simply maps the toHex() function to colorNames():

import colorNames from ‘colornames’

In my code, I used:
import toHex from “colornames”;
Note that the documention page gives the following require example:
var toHex = require(‘colornames’)
followed by this usage example:
toHex(‘red’) // => “#FF0000”

…

react tooltip with hover, https://codesandbox.io/p/sandbox/react-tooltip-with-hover-j967n

...

The tutorial code (DataProvider component) uses children prop. children prop usage is explained well here: Passing JSX as children, https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children. From it: “When you nest content inside a JSX tag, the parent component will receive that content in a prop called children.” .. “You can think of a component with a children prop as having a “hole” that can be “filled in” by its parent components with arbitrary JSX.”

...

For await fetch related part of Dave Gray React tutorial, it may help to see my front-end index5.html await fetch code in directory NodeProg\ExpressTest1\method-app.

...

While the Dave Gray video uses IIFE along with a note appearing that IIFE is not needed, the repo code of the tutorial does not use it. The code related to invoking fetchItems is quite simple and as follows:

setTimeout(() => fetchItems(), 2000);

Above code is to invoke it after 2 secs timeout.

Without timeout the code will be simpler:

fetchItems();

...

React Query, https://tanstack.com/query/v3/docs/framework/react/overview . It states, “React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.” I have not checked it out so far.

...

Need to explore the following links later, as I am very interested in simple way to use MongoDB from a React App: Use mongodb directly from React, https://www.mongodb.com/community/forums/t/use-mongodb-directly-from-react/238644 . One response states that React cannot connect to MongoDB directly and that a server (e.g. Node.js server) will be needed as an intermediary. But it adds that Next.js React framework includes a built-in server and provides this link: How to Integrate MongoDB Into Your Next.js App, https://www.mongodb.com/developer/languages/javascript/nextjs-with-mongodb/ . Had a quick look at it. Is interesting but I think I will need to get some exposure to Next.js prior to studying the article. Maybe it will be easier for me to get into the routine of quickly developing a simple backend server using Node Express for such simple needs (like CRUD ops for a posts database).