React 101 - Basic JSON Blog from 0 to deployment

Alex Merced - Jan 8 '21 - - Dev Community

Our Goal

In this tutorial, you will create a simple blog from a JSON file using React. In doing so we will use state and props to create a simple 3 component application.

1 - Generate our App

  • In a folder that is not a git repo run the command npx create-react-app blogjson

  • cd in into the blogjson folder and run npm start to get the dev server running

2 - Create JSON blog data

There is a lot of ways to serve this information, but using JSON would probably be the simplest way.

  • In the src folder create a file called posts.json with the following content: 
[
    {
        "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."
    }
]
Enter fullscreen mode Exit fullscreen mode

NOTE While it looks like an array of javascript objects, notice the JSON file extension and that all the keys are also in quotations, this is JSON syntax.

3 - Our Components

We will have two components, posts, and post. Posts will list all the posts and can be clicked to help generate which post will be displayed by the post component.

  • in the src folder create a folder called components

  • create two files called Posts.js and Post.js

Post.js

import React from "react"

const Post = (props) => {
    return <h1>Post Component</h1>
}

export default Post
Enter fullscreen mode Exit fullscreen mode

Posts.js

import React from "react"

const Posts = (props) => {
    return <h1>Posts Component</h1>
}

export default Posts
Enter fullscreen mode Exit fullscreen mode

Now let's import them into src/App.js


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;
Enter fullscreen mode Exit fullscreen mode

You currently should see:

  • You post and posts component
  • The Blog json data in the console

4 - Building Out Posts

Our post App will list all the different posts by title and date. The data for all the posts exists in App.js, so App should pass the data as a prop (props are data passed to a component from its parent, syntactically passed as an HTML attribute).

App.js

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;
Enter fullscreen mode Exit fullscreen mode

Now that we passed down the Blog data from app to Posts as a prop called posts, let's use that data in the Posts component. We will use the map array method to loop over the data and generate JSX for each post then inject the array of JSX into the JSX that is returned by the Posts component.

Posts.js

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;
Enter fullscreen mode Exit fullscreen mode

You should now see the blog posts being rendered to the screen. We'd like the user to be able to select which posts are highlighted by the Post component. Only App can pass this data to Posts since App is the parent of Posts, so the state that tracks the post to be displayed should exist in App.

  • We will create a "post" state
  • We will give it an initial value of the first post
  • We will create a function that can be passed a different post and change the state
  • We Will pass that function to Post so it can use it

App.js


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;
Enter fullscreen mode Exit fullscreen mode

So now if you examine using the React DevTools Chrome Extension you should be able to view the following:

  • The state exists in the App component
  • The two props being passed to the Posts component
  • The single prop being passed to the Post component

Now we will revisit the Posts component to use the selectPost function which was passed down as a prop called select. We will use it in our map logic so when you click on that post's div it passes that post to the function.

Posts.js

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;
Enter fullscreen mode Exit fullscreen mode

Now click on the different posts and you should see the state change in the app component which will also change the prop in the Post component (when the state that exists in App is changed, App is rebuilt along with its children passing them the updated props).

5 - Building out Post

So we can see in the React DevTools that Post is receiving a single post, so let's render that post.

Post.js

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;
Enter fullscreen mode Exit fullscreen mode

So now you should be able to see the three posts and one of them in full detail. You should be able to click on the other post summaries and see the detailed post-change!

Some basic styling

Let's add some basic styling to the index.css to make this more presentable!

index.css

.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;
}
Enter fullscreen mode Exit fullscreen mode

While not very pretty, you probably can see more clearly what is going on. Feel free to make it as pretty as you want and update the JSON file with real blog posts.

Deployment

If you'd like to deploy this on the web this can be done very easily with netlify by creating a free netlify account and following these steps.

  • commit your code and push to either github, bitbucket or gitlab

  • logon to netlify and click create new site from git

  • connect your github, gitlab or bitbucket account

  • select the repository with your react app

  • it should automatically detect the build command and publish director but if not for create-react-app its...

build command: npm run build

publish director: build

  • submit and your website will be live and ready in a moment and automatically update whenever you update your github repo!
Image
Awareness and Understanding of Medical Suppliers about Proxies Concur within Crucial Attention Study.
Image
Three brand-new type of Smithiomyces via exotic Asia help an amphi-Pacific disjunct submission from the genus.
Image
Editors' Review of Duties, Instruments, and methods.
Image
Your Growing Function from the COX Inhibitor/Opioid Receptor Agonist Blend within the Treatments for Ache.
Image
Test post
Image
May Decisions Study Supply a Far better Idea of Chemical and also Conduct Harmful addictions?
Image
[Crystalloids and also colloids: liquid homeostasis as well as toxicity].
Image
Heterogeneity of Prescription antibiotics Multidrug-Resistance Report regarding Uropathogens within Romanian Population.
Image
68Ga-FAPI-04 versus. 18F-FDG in a longitudinal preclinical Family pet photo involving advanced breast cancer.
Image
COVID-19 within Liver Implant Recipients: A Systematic Review.
Image
Reliability of knee extensor neuromuscular structure overall performance along with practical tests' efficiency.
Image
Varicella An infection within an Immunized Pediatric Dwelling Donor Liver-Transplant Receiver.
Image
A systematic writeup on outcomes of Deflux® strategy to vesicoureteral reflux pursuing child kidney transplantation.
Image
Glioma-Targeted Therapeutics: Computer-Aided Medication Style Prospective.
Image
A Difficult Case of Recurrent Abscess-Like Wounds: Information Into Main Cutaneous Dissipate Big B-Cell Lymphoma, Leg Variety.
Image
Understanding the reasons with regard to milky-white body contributor plasma tv's.
Image
Setup a Docker Swarm cluster using Vagrant

docker, swarn, vagrant
Image
Serious thrombocytopenia is enough for baby as well as neonatal intra-cerebral lose blood to take place.
Image
Unlocking Financial Freedom: The Rise of Fast Online Loans
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .