или не умею передавать данные между родителем и дочерним или не знаю useConext
 

или не умею передавать данные между родителем и дочерним или не знаю useConext

index.js:

import React, {createContext} from 'react';
import App from './App';
import ReactDOM from 'react-dom';

export const Context = createContext(null)

ReactDOM.render(
    <Context.Provider value={{
        device: [
			{id:1,name:'hello'},
		],
    }}>
        <App />
    </Context.Provider>,
  document.getElementById('root')
);

App.js

import React, {useContext, useEffect, useState} from 'react';

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

function App() {
  return (
    <Shop/>
  );
}

export default App;

Shop.js:

import React, {useContext, useEffect} from 'react';
import {Context} from "../index";

import Phone from './Phone';

function Shop() {
	    const {device} = useContext(Context)

  return (
	<div>
	 {device.devices.map(device =>
                <Phone key={device.id} device={device}/>
            )}   
	</div>
  );
}

export default Shop;

Phone.js:

import React from 'react';


function Phone({device}) {
  return (
  <div>
  <h1>{device.name}</h1>
	
  </div>
  );
}

export default Phone;

в чем проблема?

В чём проблема тебе должно быть написано в консоли.

в браузере ничего не показывает а консоль пишет webpack compiled successfully

Проверять лень, но у тебя тут как минимум циклический импорт:
index.js -> App.js -> Shop.js -> index.js
Вебпак в таких случаях может глючить(правда в теории при этом должна быть какая-нить ошибка в консоли).
Попробуй вынеси контекст в отдельный файл.