When i want to create an element without JSX it shows me this error 'React' is not defined no-undef. I am a beginner. I don't know what is the problem. Can anyone help

import logo from './logo.svg';
import './App.css';

const app = React.createElement("h1", null, "Without JSX");  // Showing an error

function App() {
  return (
    <div className="App">
      {app};
    </div>
  );
}

export default App;

These messages are shown in VS code Terminal.

Failed to compile.

./src/index.js
SyntaxError: E:\react_js_course\src\index.js: Unexpected token, expected "," (11:2)
Failed to compile.

src\App.js
  Line 4:13:  'React' is not defined  no-undef

Search for the keywords to learn more about each error.

When i want to create an element without JSX it shows me this error 'React' is not defined no-undef. I am a beginner. I don't know what is the problem. Can anyone help

import logo from './logo.svg';
import './App.css';

const app = React.createElement("h1", null, "Without JSX");  // Showing an error

function App() {
  return (
    <div className="App">
      {app};
    </div>
  );
}

export default App;

These messages are shown in VS code Terminal.

Failed to compile.

./src/index.js
SyntaxError: E:\react_js_course\src\index.js: Unexpected token, expected "," (11:2)
Failed to compile.

src\App.js
  Line 4:13:  'React' is not defined  no-undef

Search for the keywords to learn more about each error.

• javascript
• reactjs
• redux
• react-redux

• import React from 'react' – JLRishe Commented Jun 2, 2021 at 3:03
• 2 well it's literally what it says, React isn't defined (cos you haven't imported it). import React from 'react'; – Jayce444 Commented Jun 2, 2021 at 3:03
• Why don't you use JSX syntax? – Tai Ly Commented Jun 2, 2021 at 3:07

3 Answers 3

A couple points just based on the code you provided:

1. You are using JSX in your example: your App component returns JSX, so React should be in scope to do that.

2. You are explicitly using the React method createElement so React should be available in this file.

To fix both issues add import React from 'react'; at the top of this file.

This answer might not address the original question (might under v17), but it is worth mentioning.

Reason For React v17+

In the config of ESLint:

"extends": [ "eslint:recommended" ],

This recommended setting helps prevent undefined functions/fields, and some other rule that pops this as an error.

Fix

Add the following to .eslintrc or eslint.config.js:

globals: { React: true },

Reference: ESLint manual. This answer is inspired by the post. Check those links for more info.

import React from 'react' is required for writing code in JSX and alternative you use ES7 snippet which help to auto populate the code

Img-extension ss