```
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.