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

Browse our Teachable courses.

We’ll build this webpage out of 6 components.

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

BlogPage.js

Our container for our blog posts.

  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.

<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.

<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.

.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).

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.

<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.

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

--

--

--

Learning to code…

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

RxJS Pitfalls and how to Avoid Them

Generate HTML report in Protractor

protractor beautiful reporter

JWT (JSON Web Tokens) User Authentication in Next.js Web Application

https://nextjs-jwt.vercel.app/ homepage after user login

Storybook with Next JS

StoryBook In Next JS

Basic Introduction to Vuex

https://readbooks.ai Tech 정리

How to Create a Tab Component In Vue.js

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
An Object Is A

An Object Is A

Learning to code…

More from Medium

React Js — Create column-level Filter

How make SVG files more usable for ReactJs

Usage of CSS modules in React

How to add React to a project with Tailwind CSS