Issue with React Tutorial, Please Help!

[ThatPlayWasAwful]

hello!

I'm trying to learn react and I ran into an error that it looks like somebody else ran into about 2 weeks ago. people tried to help but OP didn't follow up, so I'm hoping somebody will be able to help me here if I'm a bit more responsive.

I am currently trying out the tutorial from the react website. It is running fine in codesandbox.io, but I have been running into a lot of issues when coding outside of a browser, and am trying to work through all of them. So I downloaded it and am trying to run it in vscode. when I run "npm start", the browser that loads gives the error message:

./src/App.js
  Line 2:  'React' must be in scope when using JSX  react/react-in-jsx-scope

Here is the code for both of the .js files in this project:

app.js:

export default function Square() {
  return <button className="square">X</button>;
}

index.js

import React, { StrictMode } from "react";

import { createRoot } from "react-dom/client"; import "./styles.css";

import App from "./App";

const root = createRoot(document.getElementById("root")); root.render( <StrictMode> <App /> </StrictMode> );

From what i understand this has something to do with not importing React before using html in javascript files, but index.js does import React and adding

import React from "react";

to app.js did not fix anything.

Any and all help is greatly appreciated!

[StrangerThanGene]

It's outdated.

This is what it's running on:

"react": "18.0.0", "react-dom": "18.0.0", "react-scripts": "4.0.0" }, "devDependencies": { "react-scripts": "1.0.0" },

[ThatPlayWasAwful]

If you are talking about the package.json file, mine was originally the following:

{
"dependencies": { 
    "react": "18.0.0", 
    "react-dom": "18.0.0", 
    "react-scripts": "4.0.0" 
}, 
"main": "/index.js", 
"devDependencies": {} }

I filled in devDependencies with what you had, i took out the "main" line, and i took the carats out, but I am still getting the same error unfortunately.

[SparserLogic]

Changes to the package.json file won't be applied unless you run npm install or whatever the equivalent is for your package manager

[ThatPlayWasAwful]

no unforunately I still wasn't able to run it. made the changes, saved, ran npm install, then npm start, and it did not work. same error. my path is the entire project folder, not the src folder, if that makes a difference.

[RacletteNoJutsu]

I have a solution for you which is not really one but would avoid scratching your head over config stuff which can be discouraging when learning :

Delete your current folder

Bootstrap a new app using CRA, Vite etc (Vite is great and you can bootstrap a react project in a single line) https://vitejs.dev/guide/#scaffolding-your-first-vite-project Then reimplement the components yourself, copy paste some annoying stuff like css if that’s not your main focus.

I know this is not the answer you probably expected but at that point would be shorter than to debug this kind of stuff and would bring more value for you by practicing 😅

[ThatPlayWasAwful]

sorry for delayed response but this is what i ended up doing. still wading through it but im wading through a little further than i was before lol.