As a newcomer to ReactJS, I welcome any advice that can be provided
- I've developed and deployed my ReactJS app on Heroku
- It's working perfectly on desktop browsers (Chrome, Firefox, Safari) but not displaying correctly on mobile (iPhone 7) and tablet devices.
I humbly ask for assistance in identifying the possible reason for this issue. The console does not show any errors.
https://i.sstatic.net/wa2rM.jpg
app/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXXX-X');
</script>
<title>App | REACT App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
app/scr/App.js
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Layout from './components/Layout/Layout'
import Footer from './components/Footer/Footer';
import Home from './components/Pages/Home';
import BlogIndex from './containers/BlogBuilder/BlogIndexBuilder';
import BlogShow from './containers/BlogBuilder/BlogShowBuilder';
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Layout>
<Switch>
<Route exact path="/blogs" component={BlogIndex} />
<Route path="/blogs/:id" component={BlogShow} />
<Route path="/" component={Home} />
</Switch>
<Footer />
</Layout>
</div>
</BrowserRouter>
);
}
}
export default App;
app/src/containers/BlogBuilder/BlogIndexBuilder.jsimport React, { Component } from 'react';
import BlogIndex from '../../components/Blog/Index';
import axios from 'axios';
class BlogIndexBuilder extends Component {
state = {
posts: []
};
componentDidMount() {
axios
.get(
"http://public-api.wordpress.com/rest/v1/sites/xxxxx.wordpress.com/posts"
)
.then(res => {
this.setState({ posts: res.data.posts });
console.log(this.state.posts);
})
.catch(error => console.log(error));
}
parseOutScripts(content) {}
render() {
return (
<div>
<BlogIndex
posts={this.state.posts}
/>
</div>
);
}
}
export default BlogIndexBuilder;
app/src/components/Blog/Index.js
import Layout from '../../components/Layout/Layout';
import Header from '../../components/Header/Header';
import { Link } from 'react-router-dom';
import './Index.css';
import BlogBanner from '../../images/img-blog-banner.png';
import Moment from 'moment';
class Index extends Component {
removeUnicode(string) {
if (string.indexOf("–") >= 0) {
return this.removeUnicode(string.replace("–", "'"));
} else {
return string.replace("<p>", "").replace("[…]</p>", "...");
}
}
render() {
return(
<Layout>
<div className="blog_index_section">
<Header />
<div>
<ul>
{this.props.posts.map((post) => {
if (post) {
return(
<li key={post.ID} className="card">
<Link to={`/blogs/${post.ID}`}>
{post.featured_image ? (
<img alt="blog header" src={post.featured_image} />
) : (
<img src={BlogBanner} alt="BlogBanner"/>
)}
<div>
<div>{post.title}</div>
<div>{this.removeUnicode(post.excerpt)}</div>
</div>
</Link>
</li>
);
} else {
return null;
}
})}
</ul>
</div>
</div>
</Layout>
);
}
}
export default Index;