React 101 — Basic JSON Blog from 0 to deployment

Our Goal

1 — Generate our App

2 — Create JSON blog data

[
{
"title": "Blog Post 1",
"date": "1-7-2021",
"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis pharetra luctus lacus ut vestibulum. Maecenas ipsum lacus, lacinia quis posuere ut, pulvinar vitae dolor. Integer eu nibh at nisi ullamcorper sagittis id vel leo. Integer feugiat faucibus libero, at maximus nisl suscipit posuere. Morbi nec enim nunc. Phasellus bibendum turpis ut ipsum egestas, sed sollicitudin elit convallis. Cras pharetra mi tristique sapien vestibulum lobortis. Nam eget bibendum metus, non dictum mauris. Nulla at tellus sagittis, viverra est a, bibendum metus."
},
{
"title": "Blog Post 2",
"date": "1-7-2021",
"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis pharetra luctus lacus ut vestibulum. Maecenas ipsum lacus, lacinia quis posuere ut, pulvinar vitae dolor. Integer eu nibh at nisi ullamcorper sagittis id vel leo. Integer feugiat faucibus libero, at maximus nisl suscipit posuere. Morbi nec enim nunc. Phasellus bibendum turpis ut ipsum egestas, sed sollicitudin elit convallis. Cras pharetra mi tristique sapien vestibulum lobortis. Nam eget bibendum metus, non dictum mauris. Nulla at tellus sagittis, viverra est a, bibendum metus."
},
{
"title": "Blog Post 3",
"date": "1-7-2021",
"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis pharetra luctus lacus ut vestibulum. Maecenas ipsum lacus, lacinia quis posuere ut, pulvinar vitae dolor. Integer eu nibh at nisi ullamcorper sagittis id vel leo. Integer feugiat faucibus libero, at maximus nisl suscipit posuere. Morbi nec enim nunc. Phasellus bibendum turpis ut ipsum egestas, sed sollicitudin elit convallis. Cras pharetra mi tristique sapien vestibulum lobortis. Nam eget bibendum metus, non dictum mauris. Nulla at tellus sagittis, viverra est a, bibendum metus."
}
]

3 — Our Components

import React from "react"const Post = (props) => {
return <h1>Post Component</h1>
}
export default Post
import React from "react"const Posts = (props) => {
return <h1>Posts Component</h1>
}
export default Posts
import Post from "./components/Post";
import Posts from "./components/Posts";
import Blog from "./posts.json"
import "./App.css";
function App() { //See Our Blog Posts in Console
console.log(Blog)
return (
<div className="App">
<h1>My Blog</h1>
<Posts />
<Post />
</div>
);
}
export default App;

4 — Building Out Posts

import Post from "./components/Post";
import Posts from "./components/Posts";
import Blog from "./posts.json"
import "./App.css";
function App() { //See Our Blog Posts in Console
console.log(Blog)
return (
<div className="App">
<h1>My Blog</h1>
<Posts posts={Blog}/>
<Post />
</div>
);
}
export default App;
import React from "react";const Posts = (props) => {
//creating an array of JSX for each post, using the map array method
const postsJSX = props.posts.map((post, index) => (
<div className="summary">
<h1>{post.title}</h1>
<p>{post.date}</p>
</div>
));
return <div className="posts">{postsJSX}</div>;
};
export default Posts;
import Post from "./components/Post";
import Posts from "./components/Posts";
import Blog from "./posts.json"
import "./App.css";
import React from "react"
function App() { //Post to track the post displayed by Post
const [post, setPost] = React.useState(Blog[0])
//Function to change the displayed post
const selectPost = (selected) => {
setPost(selected)
}
return (
<div className="App">
<h1>My Blog</h1>
<Posts posts={Blog} select={selectPost}/>
<Post post={post}/>
</div>
);
}
export default App;
import React from "react";const Posts = (props) => {
//creating an array of JSX for each post, using the map array method
const postsJSX = props.posts.map((post, index) => (
<div className="summary" onClick={() => props.select(post)}>
<h1>{post.title}</h1>
<p>{post.date}</p>
</div>
));
return <div className="posts">{postsJSX}</div>;
};
export default Posts;

5 — Building out Post

import React from "react";const Post = (props) => {
return (
<div className="post">
<h1>{props.post.body}</h1>
<h3>{props.post.date}</h3>
<p>{props.post.body}</p>
</div>
);
};
export default Post;

Some basic styling

.App {
display: grid;
grid-template-areas:
"title title title title"
"posts post post post"
"posts post post post"
"posts post post post";
width: 90%;
margin: 10px auto;
}
.App > h1 {
grid-area: title;
background-color: navy;
color: white;
padding: 5px;
margin: 10px auto;
width: 100%;
}.posts {
grid-area: posts;
border: 2px solid navy;
padding: 5px;
}
.posts > div {
background-color: crimson;
color: white;
padding: 5px;
margin: 2px;
}
.post {
grid-area: post;
padding: 10px;
}

Deployment

Alex Merced is a Full Stack Developer, learn more about his work at AlexMercedCoder.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store