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 created directory 

Tried out downloading source code of chapter 4, https://github.com/gitdagray/react_styling_components, copying it into a directory and then running npm install. While npm install completed, it gave lot of warnings. Subsequently running npm start gave the error: “Error: error:0308010C:digital envelope routines::unsupported”. I have seen this issue in the past with other older React applications software that I tried to build, and have noted down how I fixed it in one or two cases (see above option).

I chose a different solution which is to run npx create-react-app which will provide latest version stuff and then copy-paste required source files (excluding files like package.json as create-react-app would create it appropriate for the application setup it creates). Tried the solution and confirmed that the app works as expected. Also made a trivial change and confirmed that the change is reflected in the app (when run). So this is an easy way to set up the source code and compile and run the tutorial React apps.

About “ReactDOM.render is no longer supported ” error, see https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis . The detailed error message is: “ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot”. The page shows how to change it but I am concerned that making the change may break something else. It is OK if we run React 17 as the tutorial seems to have been done on that (or earlier). So I am ignoring this error, as of now.

Logs

To try out running Axios chapter source code which uses React Router v5, I am trying the following:
1) Created new folder chapy
2) Copied all files and folders from folder react_axios_requests-main (unzipped from chapter source code zip: folders data, public, src and files at top-level including package.json) into chapy
3) Ran npm install (hopefully this will install React 17 and react-router 5 and the source code will compile successfully with these older version packages).
npm install took long but seems to have completed successfully. The relevant package.json entries are:

“dependencies”: {

“@testing-library/jest-dom”: “^5.14.1”,
“@testing-library/react”: “^11.2.7”,
“@testing-library/user-event”: “^12.8.3”,
“axios”: “^0.21.1”,
“date-fns”: “^2.22.1”,
“react”: “^17.0.2”,
“react-dom”: “^17.0.2”,
“react-router-dom”: “^5.2.0”,
“react-scripts”: “4.0.3”,
“web-vitals”: “^1.1.2”

“npm list react” gave following output:
16tut@0.1.0 D:\Users\Ravi-user\vsc-source\ReactProg\DaveGray\chapy
├─┬ @testing-library/react@11.2.7
│ └── react@17.0.2 deduped
├─┬ react-dom@17.0.2
│ └── react@17.0.2 deduped
├─┬ react-router-dom@5.2.0
│ ├─┬ react-router@5.2.0
│ │ ├─┬ mini-create-react-context@0.4.1
│ │ │ └── react@17.0.2 deduped
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2 deduped
├─┬ react-scripts@4.0.3
│ └── react@17.0.2 deduped
└── react@17.0.2

So react v17 and react-routerv5.2 have been installed.
4) Ran npm start
Got the error:
Error: error:0308010C:digital envelope routines::unsupported

…

Had faced the above error in the past and logged solution to it. Trying out that solution
4a) Ran npm i react-scripts@latest
It completed successfully.
4b) Ran npm start
It compiled successfully and showed the app in the browser window but with no posts displayed.
4c) Ran npx json-server -p 3500 -w data/db.json
Then on refreshing the app in browser, it showed the expected posts data.

So that’s the way to get the older version app running. Perhaps there are other ways too but this seems to be a well known way (including using npm i react-scripts@latest to fix the digital envelope routines error).

Now I wonder if other chapter versions code will also run if only the src directory is replaced (and data if required, perhaps package.json can be left unchanged with any additional package chapter needs, being installed separately with npm install pkg command). Let me try replacing src directory with src of react_custom_hooks-main. Did that and then ran npm start.
It gave the error:
Module not found: Error: Can’t resolve ‘react-icons/fa’ in ‘D:\Users\Ravi-user\vsc-source\ReactProg\DaveGray\chapy\src’

I think that’s related to react-icons package which needs to be installed. But rather than installing separately, let me try replacing package.json of react_custom_hooks-main in chapy and then simply running npm install. Hopefully that will pick up that only react-icons package has to be installed (and all other packages are already installed) and so install that.
npm install took quite some time (I think not as much as when I ran it immediately after folders copy as then there were no packages installed) but completed successfully.
npm start gave the same digital envelope routines error!:
Error: error:0308010C:digital envelope routines::unsupported

[So this approach seems to be inferior to simply doing npm i react-icons (or any other package).]
So ran npm i react-scripts@latest again.
Then ran npm start
The program compiled successfully and the app was shown in the browser (with the icons from react-icons package).