Create a React Blog Site | Beginner Project for Jr. Devs

Browse our Teachable courses.

We’ll build this webpage out of 6 components.

1. BlogPage.js — the main container for our posts

[  {    title: ``,    subtitle: ``,    images: [``],    primary_asset: ``,    copywrite: [``, ``]  },  {    title: ``,    subtitle: ``,    images: [ ],    primary_asset: ``,    copywrite: [ ]  }]

BlogPage.js

Our container for our blog posts.

Our main component, the BlogPage will be broken up into 4 sections.

  1. A site header.
<div className=”blog_page”>  <div className=”site_header”>  </div>  <div className=”page_name”>  </div>  <div className=”container”>    <div className=”left_side”>      <div className=”blog_posts”>      </div>    </div>    <div className=”right_side”>      <div className=”blog_index”>      </div>    </div>  </div></div>

Post.js

Each post we make is contained within this component.

In here, we can design any type of post we want.

<div className=”blog_post”>  <div className=”section section1">    // TITLE  </div>  <div className=”section section2">    // COPYWRITE  </div>  <div className=”section section3">    // GALLERY  </div>  <div className=”section section4">    // COPYWRITE  </div>  <div className=”section section5">    // MAIN ASSET (VIDEO OR IMAGE)  </div></div>

WriteUp.js

We’re going to take a piece of copy-write and add two visual flairs.

We need to find a way to hide part of the post.

<div ref={CopyWriteRef} dangerouslySetInnerHTML={{__html: 
props.copywrite}}>
</div>
useEffect(() => {  const copywrite = CopyWriteRef.current;  if (copywrite.getBoundingClientRect().height > text_threshold) {    copywrite.style.height = `${text_threshold}px`;    copywrite.nextSibling.style.display = ‘block’;    copywrite.nextSibling.nextSibling.style.display = ‘block’;  }});

Gallery.js

A simple CSS grid-styled DIV will create our image gallery.

We’ll define our gallery in 1 row by 2 columns for Desktop and 1 x 1 for Mobile.

.post_image_gallery {  width: fit-content;  height: fit-content;  max-height: calc((270px * 2) + 20px);  display: grid;  gap: 10px;  grid-template-rows: 270px;  grid-template-columns: repeat(2, 270px);  grid-auto-rows: 270px;  justify-content: center;  overflow-x: hidden;}

PrimaryAsset.js

A simple DIV where we show an image or video (iframe embed).

Just like the WriteUp.js component, we’ll insert our image or iframe embed in the ‘dangerouslySetInnerHTML’ prop of our DIV.

primary_asset: `<iframe 
src=”https://www.youtube.com/embed/cAC4s5GuUb8" \
title=”YouTube video player” frameborder=”0"
allow=”accelerometer; \
autoplay; clipboard-write; encrypted-media; gyroscope; picture-
in-picture” \
allowfullscreen></iframe>`<div dangerouslySetInnerHTML={{__html: props.primary_asset}}></div>

Separator.js

The final component. Just a few lines to separate one post from another.

We’ll just place three square icons from Font Awesome into a DIV and space them apart.

<div className=”separator”>  <i className=”fas fa-square-full”></i>  <i className=”fas fa-square-full”></i>  <i className=”fas fa-square-full”></i></div>

There is much more nuance to this project.

You can view our video tutorial down below.

Create a React Blog Site | Beginner Project for Jr. Devs

--

--

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