Posts

Trying out variations of code in TicTacToe app. in react tutorial

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  . https://react.dev/learn/tutorial-tic-tac-toe Too many re-renders. React limits the number of renders to prevent an infinite loop, https://bobbyhadz.com/blog/react-too-many-re-renders-react-limits-the-number . This article gives the scenarios in which this error occurs. In my case, it was due to this scenario: “Calling a function that sets the state in the render method of a component.” It took me quite some time to figure it out. Finally I had this very small test file where the problem was being reproduced. Above page gave me further info. on it. My test file contents are given below: import { useState } from "react"; export default function MyApp() {   const [cond, setCond] = useState(true);   setCond(false); // Dummy statement to demonstrate t...
Post a Comment
Read more

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 state...
Post a Comment
Read more

Building React Router part of Dave Gray tutorial

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  . For react router part of the tutorial (Dave Gray), I am first tried to use the old source code (Chapters 16, 17 & 18) with its package.json files (from github)(folder name: learn_react_router-main). I invoked: npm i react-router-dom -S to install react-router-dom (takes a long time). Then ran npm start I got the following error: “Error: error:0308010C:digital envelope routines::unsupported”… I tried out the refactored to react router v6 source code (Chapters 16 & 17 Part 2 – Source Code) (folder name: react_router_v6-main). I copied all its folders and files into ChapXMod after deleting all its folders & files except node_modules. Then I am trying out: npm start. I got the same error: “Error: error:0308010C:digital envelope routines::unsupported...
Post a Comment
Read more

React conditional rendering

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  . Conditional Rendering,  https://react.dev/learn/conditional-rendering  is a useful page in this context.  Dave Gray Lists and Keys chapter code can be changed to use if else instead of ternery op., as follows: if (items.length > 0) {     return (       <main>         <ul> ... inner code omitted ...         </ul>       </main>     );   } else {     return (       <main>         <p style={{ marginTop: "2rem" }}>Your list is empty.</p>{" "}       </main>     );   } Disadvantage is repetition of code even if it is slightly ea...
Post a Comment
Read more

Procedure to build React tutorial project from its source files

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  . Option 1) Run npm install directly on (copy of) tutorial project source directory 1) In VSCode open project folder/directory 2) Run npm install (followed optionally, in case of issues shown, by running npm audit fix) 3) Run npm start which usually will give the error: “Error: error:0308010C:digital envelope routines::unsupported”. 4) To resolve above error, run npm i react-scripts@latest 5) Now run npm start again which should show the app in browser Related article (does not cover digital envelope error issue): How to Download a React Project from Github and Run in My PC ?, https://www.geeksforgeeks.org/how-to-download-a-react-project-from-github-and-run-in-my-pc/   Option 2) Run npx create-react-app and then copy tutorial project source files into cr...
Post a Comment
Read more

Notes on JSX

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  . To get quick idea of JSX (Java Script XML as per https://www.w3schools.com/react/react_jsx.asp , also described as JavaScript syntax Extension): Introducing JSX, https://legacy.reactjs.org/docs/introducing-jsx.html . Seems to be nice top-level view of JSX from the creator of JSX: https://facebook.github.io/jsx/ . Note that JSX is not limited to React. From the above link: “JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It’s NOT intended to be implemented by engines or browsers. It’s NOT a proposal to incorporate JSX into the ECMAScript spec itself. It’s intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.” Also, it seems that React can be used without JSX but it is...
Post a Comment
Read more

Vite, Console Ninja

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  . Official Vite site’s guide: https://vitejs.dev/guide/ [npx create-vite@latest react-website-yt-1-vite –template react react-website-yt-1-vite is the app-name which can be changed to suitable name. Above command on completion provides the three commands starting with cd that need to be run after that.] How can I view console messages in terminal when using Vite?, https://www.reddit.com/r/react/comments/zo6nay/how_can_i_view_console_messages_in_terminal_when/ CONSOLE NINJA, CONSOLE LOG OUTPUT RIGHT NEXT TO YOUR CODE, https://console-ninja.com/ Console Ninja, https://www.youtube.com/watch?v=XR6OaznDwl8 , 2 min. 19 secs. Installed free version of the above extension in VS Code. I was not able to get it to work initially. Then I restarted ‘npm run dev’ and opene...
Post a Comment
Read more