Im having trouble rendering in localhost, I was working on an old tutorial which had to make some changes and currently stuck on modifying my app.js and index.js to render in localhost, in the console.log it won't show me any errors besides to edit my combine reducers unless that's the problem I want to be able to see my app.js in. localhost and not a white screen.
app.js
import React, { useEffect } from 'react';
import {Container, AppBar, Typography, Grow, Grid} from '@material-ui/core';
import { useDispatch } from 'react-redux';
import { getPosts } from './actions/posts';
import Posts from './components/Posts/Posts';
import Form from './components/Form/Form';
import memories from './images/memories.png';
import useStyles from './styles';
const App = () => {
const classes = useStyles();
const dispatch = useDispatch();
useEffect(() => {
dispatch(getPosts());
}, [dispatch]);
return (
<Container maxidth="lg">
<AppBar className={classes.AppBar} color="inherit">
<Typography className={classes.heading} variant="h2" align='center'>Memories</Typography>
<img className={classes.image} src={memories} alt="memories" height="1460" />
<h1>hello</h1>
</AppBar>
<Grow in>
<Container>
<Grid container justify="space-between" alignitems="stretch" spacing={3}>
<Grid item xs={12} sm={7}>
<Posts />
</Grid>
<Grid item xs={12} sm={4}>
<Form />
</Grid>
</Grid>
</Container>
</Grow>
</Container>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { applyMiddleware, compose } from 'redux';
import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import reducers from './reducers';
import App from './App';
const store = configureStore(reducers, compose(applyMiddleware(thunk)));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'),
);