Here's a very basic business blog need: you want to make a blog and you'd rather not pay a monthly fee, or very much at all. At the same time, you want it to be as extensible and open-ended as possible.

Maybe (hopefully) you'll learn web development over time, and you'll be able to make it better; but if not, it should be presentable, as is. It should look good enough to appear on a business card.

The design should be pleasing, but doesn't need to be at the A+ pro level. If it looks crisp and modern, and you or someone you know can adjust the design, that's enough.

Here's how to do that, with all the code you write contained in only one short file, App.js, using React.

Process

My process here will be to do the minimum for each step, adding a feature per step. If you don't like the way I'm doing it in one step or another, you can skip it.

This tutorial is meant to pack in a high amount of functionality, while avoiding certain topics that would overwhelm it. There isn't any routing, because there's enough to explain in this post. Other material may come in follow-up posts.

I tried to be strategic about the amount of complexity I aimed for here. I could've made it a lot more complicated - for example, by including a submit form, with a database - but that would've pushed the amount of material crammed into one blog post too high.

If you wanted to use the code for a blog, you absolutely can; just clone it, look at how the blog posts and routes are implemented, and copy and edit to extend the pieces you like.

Creating The Most Basic App

First we're going to do create-react-app, to create our app's directory structure.

This is as simple as it sounds. While you can google how to install create-react-app (which comes with npm, these days), it's basically as simple as running this command:

npx create-react-app blog

Then we're going to edit the default App.js page to have a title and show some text.

So after you enter your blog directory, you can delete App.js - we don't need anything in there, it's okay.

Because we need a topic for this blog, it's going to be about famous tech companies. Each blog post will have a description of a famous company.

Let's do the big four: Amazon, Google, Apple, FaceBook.

To start, to keep it as dead simple as possible, I'm going to make each company its own component.

I'm also going to put it all in one file, in App.js, so you can digest it all in a single reading.

There's just five components: one for each company, and one more to space them so they're not quite flush with the left side of the page. They are Google, Amazon, Facebook, Apple, and Spacer.

This last one, Spacer, is known as a styled component. This means I need a dependency, styled-components. You'll want to do 'yarn add styled-components' from your project directory before going any further. (You could use npm, but I like yarn).

You can think of styled-components as that piece that gives you a nice way to mix CSS with your components.

Here's the code, with only one tech company component shown.

The rest are basically identical, with only the text changing. I.e., instead of "Google", it's called "FaceBook," and instead of having p content like '-p-This is Google...', it says '-p-This is FaceBook...' Repeat for every other company component.

import React from 'react';
import styled from 'styled-components';


const Spacer=styled.div`
  padding-left: 2vw;
`

const Google = () => (
  <p>This is Google. It's a search engine started by Sergey Brin and Larry Page.</p>
  <p>PageRank is the search algorithm that started it all. Today's it's a 100 trillion dollar company.</p>
)

//then a bunch of other components like the Google one, just with different text...

function App(){
  return (
    <Spacer>
    <Google/>
    <Amazon/>
    <FaceBook/>
    <Apple/>
    </Spacer>
  );
}

export default App;

Here's what it looks like. It's a little too basic, in my opinion: truly, the bare minimum.

The Single Column Look

Next, we want to get the slick single column look, so our blog doesn't look quite so basic.

For now, I'm going to roll up my shirtsleeves and do the CSS directly, instead of using a library for it (which I would normally do, but which would complicate this post considerably).

Basically I used styled components again, and borrowed the CSS from this excellent guide to get the single text column look.

https://themefoundation.com/single-column-css-layout/

const Wrap=styled.div`
  max-width: 1200px;
  margin: 0 auto;
  padding: 1em;
`

const Primary=styled.div`
  max-width: 650px;
  margin: 0 auto;
  font-family: 'Sen', sans-serif;
`

In short, it sets up a fixed width column in the middle of the page.

I use it like this:

<div>
  <Wrap>
    <Primary>
      <MyComponent a.k.a. CompanyName here/>
    </Primary>
  </Wrap>
</div>

Hover Effect

This was so plain that I thought a hover effect would add some pizzazz, though you don't have to use it if that's too much pizzazz for you.

It's based on the CSS shown in this article.

https://www.robinwieruch.de/react-styled-components

const Block = styled.div`
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  border-radius: 3px;
  border: 2px solid darkgray;
  margin: 0 1em;
  padding: 0.25em 1em;
  margin-bottom: 3vh;
  margin-top: 1vh;
  transition: 0.5s all ease-out;
&:hover {
  background-color: darkgray;
  color: white;
  }
`;

It's used like this:

<Block>
  <CompanyName>
</Block>

Now, when you hover over a company name, it lights up.

You can see how it looks in the screenshot below, shown as it looks when I hover over the FaceBook text.

On the website itself, there's a better-looking animation.

https://blog-basic.s3.amazonaws.com/index.html

How to Add New Blog Posts

In this example, each company is a stand-in for a blog post.

While my components are super short, two lines each, yours can be long, and include images, multiple styled divs, even a form or something using state (not covered in this article).

You can just keep adding them to App.js to keep this to a single file, or you can copy the components shown as company names into their own files then import them.

Live

You can see the website in action at the link below.

https://blog-basic.s3.amazonaws.com/index.html

Incidentally, that blog is really being hosted on AWS, on S3, which means the hosting cost is as low as it can possibly be: somewhere on the order of a dollar a month, probably much less. Because it's a static site, it will also basically never, ever crash.

If you can host your website as a static site, the price and uptime will be unbeatable. This isn't always an option, but it's nice when you can use it.

You can copy the code from GitHub here:

https://github.com/julianeon/blog-basic-react

Conclusion

I'm reading a history of post-punk bands in the 80's. One idea they held strongly to is DIY - do it yourself.

They might not have had access to huge resources or the latest and greatest equipment, but they were smart, they knew how to play an instrument (basically), and they could figure out the rest themselves.

This tutorial has a similar philosophy. It shows you just enough to get started with React, hopefully without being overwhelming.

It's not a very fancy or award-winning way to set up a website, but if you have a straightforward need, it may be enough. Since you're directly controlling the website and the React code, you can expand it as you learn and improve. You can always build up from a simple core that's solid.

If you have any questions or comments, you can email me at julian@reactever.com, and I'll be happy to respond.

Good luck, and thanks for reading!

You can also read this tutorial on the reactever website. If you'd like to discuss a project, see my website & contact form.

For more content like this, follow me on Twitter.