ReferenceError: React is not defined for context

Question

import './App.css';
import ComponentC from './components/ComponentC';

export const UserContext = React.createContext()
function App() {
  return (
    <div className="App">
      
      <UserContext.Provider value={"deneme"}>
        <ComponentC />
      </UserContext.Provider>

    </div>
  );
}

export default App;


import React from 'react'
import ComponentE from './ComponentE'

function ComponentC() {
    return (
        <div>
            <ComponentE />
        </div>
    )
}

export default ComponentC

import React from 'react'
import ComponentF from './ComponentF'


function ComponentE() {
    return (
        <div>
            <ComponentF />
        </div>
    )
}

export default ComponentE

import React from 'react'
import { UserContext } from "../App"


function ComponentF() {
    return (
        <div>
            <UserContext.Consumer>
                {
                    user => {
                        return <div>User Context value {user}</div>
                    }
                }
            </UserContext.Consumer>

        </div>
    )
}

export default ComponentF

I have error ReferenceError: React is not defined, I don't understand why I am so new in react.js so i need some help. Thanks.

you are rigth. i added my App.js file import React from "react"; and it works. — halilibrahimtosun, Nov 18 '20 at 02:55
Does this answer your question? [Uncaught ReferenceError: React is not defined](https://stackoverflow.com/questions/32070303/uncaught-referenceerror-react-is-not-defined) — Rikin, Feb 09 '21 at 13:10

score 0 · Answer 1 · answered Nov 18 '20 at 02:55

You need to actually pull in the React library somehow, with script tags in your HTML page, such as

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

I'd suggest reviewing the doc's here: https://reactjs.org/docs/getting-started.html#try-react, for suggestions getting started & getting going.

Nooruddin Lakhani · Answer 2 · 2020-11-18T06:16:32.340

0

Please import React element from react like

import './App.css';
import React from 'react'; // add line here

export const UserContext = React.createContext();
function App() {
  return (
    .....
  );
}

export default App;

edited Nov 18 '20 at 06:16

answered Nov 18 '20 at 04:26

Nooruddin Lakhani

7,507
2
19
39

score -1 · Answer 3 · answered Nov 18 '20 at 02:56

-1

You forgot to add import React from 'react'; at the top thus the error.

answered Nov 18 '20 at 02:56

Rikin

5,351
2
15
22

ReferenceError: React is not defined for context

3 Answers3