Es un proyecto realmente simple para la escuela, y pasé horas tratando de resolver el problema (reinstalando módulos de nodo, actualizando la versión de nodeJs, etc., etc.). Gracias de antemano.

Aquí está mi código:

 import './App.css'; import Products from "./components/Products/Products" function App() { return ( <div className="App"> <Products/> </div> ); } export default App;

Productos.jsx:

 import React from "react"; import {Grid, MuiThemeProvider} from '@material-ui/core'; import Product from "./Product/Product"; const products = \[ {id: 1, name: 'Shoes', description: 'Running shoes.', price: '$5'}, {id: 2, name: 'Macbook', description: 'Apple Macbook.', price: '$100'}, \]; const Products = () =\> { return ( \<main\> \<Grid container justifyContent="center" spacing={4}\> {products.map( (product) =\> { \<Grid item key={product.id} xs={12} sm={6} md={4} lg={3}\> \<Product product={product} /\> \</Grid\> } ) } \</Grid\> \</main\> ); }

exportar productos predeterminados;

Producto.jsx:

 import React from 'react'; import { Card, CardMedia, CardContent, CardActions, Typography, IconButton, MuiThemeProvider } from '@material-ui/core'; import { AddShoppingCart } from '@material-ui/icons'; import useStyles from './styles'; const Product = ({ product, onAddToCart }) => { const classes = useStyles(); const handleAddToCart = () => onAddToCart(product.id, 1); return ( <Card className={classes.root}> <CardMedia className={classes.media} image='' title={product.name}/> </Card> ); }; export default Product;

índice.js

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <App />, document.getElementById("root") );