Develop Reference

Updating Node.js doesn't seem to work, I still get the old version

I want to run create react app. I run the command:
npx create-react-app client
but I get this error:
You are running Node 10.9.0.
Create React App requires Node 14 or higher.
Please update your version of Node.
I updated it with latest version and using node -v it is showing version v18.13.0. But after that I'm still getting same error.
How do I solve the problem?

Things to try when this sort of thing happens:
If you haven't already, close the command prompt / terminal window where you're running this and open a new one.
If that doesn't work, completely reboot (mostly a Windows thing).
If that doesn't work, completely uninstall Node.js, reboot (mostly a Windows thing), and then install the latest.
Usually if the first two don't solve the problem, the last will.

You can manually define which Node engine to use for your project in package.json file.
{
"name": "client",
"version": "0.1.0",
"private": true,
"engines": {
"node": ">=18"
},
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^1.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

I got answer for this from other site which you can use
npm uninstall -g create-react-app
npm install -g create-react-app#3.4.1
create-react-app my-app --scripts-version 3.1.1

Having trouble updating GitHub pages with React App

I have a deployed active react app through GitHub pages and I'm looking to update it with newer code, i.e. color changes, update text, etc. The code has already been pushed to my GitHub repo, on my main branch but it's not updating the live GitHub page. I'm obviously missing something but couldn't find anything reading documentation or other stackoverflow questions. Can anyone help? Also I've seen a lot of people posting their package.json so here's mine
Edit: I already have the github pages live with prior code, but pushing the newer code to live is what I need help with.
{
"name": "react-portfolio",
"version": "1.0.0",
"private": "true",
"homepage": "N/A",
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^3.2.3"
}
}

I think you should to consider to add gh-pages-deploy in your script list.
Because of it will enable you to deploy straight to your github pages with one simple command.
But first, you neet to do npm install gh-pages-deploy -g to install the package globally in your environtment.
Here was the docs for gh-pages-deploy.
Thank you

You can use GH-pages-deploy to deploy your project to GitHub Pages
# install it from npm and symlink it into your PATH
npm install gh-pages-deploy -g
# now run it!
gh-pages-deploy
Or you can do several options to be able to run GH-pages-deploy by looking at the following documentation

eslint Failed to load config "react-app" to extend from. when making changes in project

I created a react app using yarn create react-app. Then I run yarn start and the project run properly on localhost. However, when I make an edit to a file (add a new tag, rename contents of a div..) the app throws an error and fails to compile with the error
[eslint] Failed to load config "react-app" to extend from.
Eslint is already installed. The crazy thing is, opening the package.json file and saving it solves the issue and the project compiles with the new changes. However I'd have to do this every time I make a change.
I am using Ubuntu on WSL .
Here is my package.json file
{
"name": "gmail-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.0.1",
"#testing-library/user-event": "^14.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

A few ways to solve the issues:
Add the eslint-config-react-app
yarn add eslint-config-react-app -D OR yarn add eslint-config-react -D
Remove this code from package.json
"extends": [
"react-app"
]
},
Remove yarn.lock and reinstall node modules.

I had a similar problem, and I resolved it by installing eslint-config-react-app:
yarn add eslint-config-react-app -D

How do I publish my React site on Github Pages?

I'm trying to publish a React app to Github Pages but all that pops up is a blank page when I attempt it. I'm new to React and not very bright.
Here is what my package.json looks like:
"homepage": "[myusername].github.io",
"version": "1.0.0",
"description": "Personal website simulating Google Search interface, developed with React",
"keywords": [
"react",
"personal website",
"google",
"portfolio"
],
"main":"index.html",
"dependencies": {
"#fortawesome/fontawesome-svg-core": "1.2.36",
"#fortawesome/free-regular-svg-icons": "5.15.4",
"#fortawesome/free-solid-svg-icons": "5.15.4",
"#fortawesome/react-fontawesome": "0.1.15",
"#material-ui/core": "4.12.3",
"#material-ui/icons": "4.11.2",
"prop-types": "15.7.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.0",
"react-scripts": "^5.0.1",
"react-select": "4.3.1"
},
"devDependencies": {
"#babel/runtime": "7.13.8",
"gh-pages": "^3.2.3"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"build-localhost": "PUBLIC_URL=/ react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
I'm not sure what other info to provide, so I apologize in advance
Also, I didn't want to put my real name so that's why the homepage line looks like that here.
Please help?

I'm not sure if I get what you exactly mean.
But if you want to push your existing project to github here is the steps:
1- create a new repository on github
In Terminal, change the current working directory to your local project
2- then in your terminal write :
git init
Initialize the local directory as a Git repository.
3- git add . OR git add --all
Commit the files that you've staged in your local repository.
4- git commit -m 'First commit'
Commit the files that you've staged in your local repository.
5-git remote add origin <remote repository URL>
Copy remote repository URL field from your GitHub repository, in the right sidebar, copy the remote repository URL.
In Terminal, add the URL for the remote repository where your local repostory will be pushed
6- git remote -v
Sets the new remote.
7- git push origin master
Push the changes in your local repository to GitHub
And if you mean by publish your project is deploying it you can follow these two links:
1- https://github.com/gitname/react-gh-pages
2- https://www.c-sharpcorner.com/article/how-to-deploy-react-application-on-github-pages/
the second one is a bit old but you can check the comments in bottom of the page.

React Js : Failed to Compile

I moved to windows 11 from Linux , so i imported all my code from Linux..to windows .
So whenever i try to run a react project , I get a compile error stating :
Failed to compile
./src/index.js
Module not found: Can't resolve 'react/jsx-dev-runtime' in 'D:\code\react-workspace\react-advanced-2020-master\src'
This error occurred during the build time and cannot be dismissed.
React. js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components, Had to write something as it was displaying error :)
I tried npm i -g react-scripts and npm clean install
package.json
{
"name": "tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}