The React Blog Series: Part Two This article is part two in a weekly series on building a blog with React and is an extension of the code created in part one. The React Blog Series Building a Blog with React and Contentful ( ) Writing Unit Test for a React Blog with Redux Sagas Building a website with React and Bulma Part One: Part Two: Import your Medium Feed into React Part Three: Adding a Redux to a React Blog Part Four: Replacing Redux Thunks with Redux Sagas Part Five: Part Six: In Progress This will go over the basics of setting up Contentful and displaying its data as a blog feed in our React application. This does include Redux… yet ;) not Contentful Sign up for Contentful Click here to Sign Up Here When you start poking around Contentful, you might get a strange failure feeling, daja vue perhaps, or is it just that it looks exactly like the Wordpress Admin? is very clean, easy to navigate, and it looks and feels like Wordpress. As much as hate to admit, I love it and thats an amazing thing because I . To be fair, I don’t hate Wordpress for its UX, I hate it because its slow and built on what looks like hacked together PHP, and lets face it, no one actually likes PHP. Not even the creator of PHP. Contentful a lot loth Wordpress The Concept is content management as a service (CaaS), this replaces the need to have to connect your site to that terrible MySQL database hosted on some crappy Apachy Server, where you have to install phpMyAdmin and spend hours trying to figure out cPanel. Contentful The Data There are two parts to your data, the structure and the data. It’s basically a really nice web form the converts to simple json. You have to first set up your form the in , then you can hop over to and fill out your forms, each form becomes an item in the models array of data sent via rest end points. Content Model Content Let start by making a Blog Model Add in three fields: Title, Path, and Content The JSON preview will look like this Now let’s create a Blog post for the app to pull and display on our Blog page. Go to Content, and Click Add Blog in the top corner and fill out the form. Now you have your first blog post! Get Api Token You will need a and access token to retrieve your data. Go to the tab and click Space Id APIs Add Api Key. Name it what ever you want and save. Set Up Contentful in React npm install contentful Let’s just see if we can connect and get our data. On let’s import Contentful, set up a simple client and then getEntries. Now let’s console log what we get, with any luck we should be see our test blog post. This is temporary. src/index.js import React from 'react';import ReactDOM from 'react-dom'import registerServiceWorker from './registerServiceWorker'import { BrowserRouter as Router } from 'react-router-dom' import App from './App'import './index.css' import * as contentful from 'contentful' var client = contentful.createClient({space: 'qu10m4oq2u62',accessToken: 'f4a9f68de290d53552b107eb503f3a073bc4c632f5bdd50efacc61498a0c592a' }) client.getEntries().then(entries => {entries.items.forEach(entry => {if(entry.fields) {console.log(entry.fields)}})}) ReactDOM.render((<Router><App /></Router>), document.getElementById('root'))registerServiceWorker() Run your app and open your console. You should see a little clean object full our data. Isn’t that amazing. It was like, the simplest thing to set up ever! But now let’s do it right… well, as much as we can without Redux :P Setting Up Your Blog Page Copy all of your Contentful stuff and delete it from your index. Head over to your and change it from a dumb component to a smart React.Component class. Blog.js Then, we will need to include state with an empty post array. Paste in your Contentful createClient object. Next, using the lifecycle hook , we need to call a function which will call a function React componentDidMount fetchPosts setPosts import React from 'react'import * as contentful from 'contentful' class Blog extends React.Component { state = {posts: []} client = contentful.createClient({space: 'qu10m4oq2u62',accessToken: 'f4a9f68de290d53552b107eb503f3a073bc4c632f5bdd50efacc61498a0c592a'}) componentDidMount() {this.fetchPosts().then(this.setPosts);} fetchPosts = () => this.client.getEntries() setPosts = response => {this.setState({posts: response.items})} render() {return (<p>This is the Blog Page</p>)}} export default Blog If you plug a console log in the function you will see we are getting our data back from . fetchPosts Contentful Now that we are getting data and we are doing it the React way (w/o Redux), let’s update the render function to display the data. We will move these to their own pretty component later, but for now let’s stick it in some pre tags. render() {return (<div><p>This is the Blog Page</p><br/>{ this.state.posts.map(({fields}, i) =><pre key={i}>{JSON.stringify(fields, null, 2)}</pre>)}</div>)} Yay!!! Adding New Blog Posts Head back over to and click , then fill out the information. You know the drill. Contentful Content > Add Blog Click and head get back over to your app, refresh the browser and !! There’s your second post. Publish BLAMMO Styling the Blog Feed We need to set up a Blog Item component. Our Blog page will contain a list of Blog Items which make up “ ”. the feed and will be a child of . Since is in the folder, we will create a folder called in the folder, then create our in our newly created folder. Remember we are using fractal file structures BlogItem.js Blog.js Blog.js app blog app BlogItem.js blog If you’re keeping score, and following correctly, our current file structure should look something like this. Fractal File Structures Create BlogItem Component In , create as simple component with box. We’ll pass in props which for now will be a spread of the fields from Contentful. BlogItem.js Bulma import React from 'react' const BlogItem = (props) => (<div className="box content"><h1>{props.title}</h1><p>{props.content}</p></div>) export default BlogItem Now, back in we need update our posts map in render to return our component and spread the fields as properties. Blog.js BlogItem render() {return (<div><p>This is the Blog Page</p><br/>{ this.state.posts.map(({fields}, i) => )}</div>)} <BlogItem key={i} {...fields} /> Refresh and there you go. But… that kind of looks . terrible Style Blog Page Let’s replace with a for our page header. Since we will probably do this on the top of most of our pages, lets create this as a global reusable component. <p>This is the Blog Page</p> Bulma Hero In our app folder, create a new folder named components. By our fractal logic this implies that these components will all exist as children of the App. : If you haven’t figured it out yet, and it’s folder of children ( ), will contain all our presentation logic. For now, every we do will be a child of . , will get a sibling named and its folder of children ( ) and it will contain all of our and . Spoiler alert App.js app App Later when we refactor to use Redux App Store.js store data services state In the folder create two files, and components PageHeader.js PageContent.js will be a component for our Bulma Hero. We will not be including the subtitle content. This way we can do css styling or include links and pass it as a children prop. PageHeader import React from 'react' const PageHeader = (props) => (<section className={`hero ${props.color}`}><div className="hero-body"><div className="container"><h1 className="title">{props.title}</h1><h2 className="subtitle">{props.children}</h2></div></div></section>) export default PageHeader And in our replace with Blog.js <p>This is the Blog Page</p> <PageHeader color="is-info" title="Code Blog">Your standard <strong>JavaScript</strong> programming blog, albeit, probably not very good, but I will at least try to keep it entertaining. This blog is a chronological mix of random posts on Angular, React, Functional Programming, and my <strong>project walkthroughs</strong>.</PageHeader> will be a styled component to confine our page to a max width and add padding and what have you. PageContent import styled from 'styled-components' const PageContent = styled.div`margin: 0 auto;max-width: 960px;padding: 1.5rem;`export default PageContent Ahh… now that’s much better. Better More Realistic Blog Posts Back in Contentful, let’s add some fields to our Blog Content Model We are going to add three new fields: Set appearance as icon: single line : Valid as only values “IN_PROGRESS” and not required. Set appearance as status Dropdown : Set appearance as date date only Now hop over to your First and Second blog post and fill in some data. Icon can be a url link to an icon or base64 as long is it can normally go into a attribute. src Content should set as Markdown so when you fill your page content it can be styled with Markdown ! Do something like this for both posts, , then refresh your. It probably going to look terrible… save YUP! Rendering Markdown So lets start by addressing the elephant in the room. We need make react render the markdown as html and it needs to look… pretty. npm install react-markdown In the , replace content <p> with the react-markdown. BlogItem.js import React from 'react' import * as Markdown from 'react-markdown' const BlogItem = (props) => (<div className="box content"><h1>{props.title}</h1> </div>) <Markdown source={props.content} /> export default BlogItem BOOM! Much better, but I would remove the H1 titles from the in and rename your blog posts with what the H1 title was. You will see why when we add the Icon and stuff in next. Markdown Contentful Contentful Adding the Icon This is just simple . Open your and we are going to steal the example from website. Bulma BlogItem.js box media Bulma’s import React from 'react'import { Link } from 'react-router-dom'import * as Markdown from 'react-markdown'import moment from 'moment' const BlogItem = (props) => (<div className="box"><article className="media"><div className="media-left"><figure className="image is-64x64"><img src={props.icon} alt="Image" /></figure></div><div className="media-content"><div className="content"> <h1>{props.title}</h1> <Markdown source={props.content.split(" ").splice(0,150).join(" ").concat('...')} /> </div> <div className="level"> <div className="level-left"> <Link className="level-item button is-small is-link is-outlined" to={props.path}>Read More</Link> </div> <div className="level-right"> <p className="level-item has-text-link is-size-7"> {moment(props.date).calendar(null, { sameDay: '\[Today\]', lastDay: '\[Yesterday\]', lastWeek: '\[Last\] dddd', sameElse: 'MMM Do YYYY' })} </p> </div> </div> </div> </article></div>) export default BlogItem Yeah, so thats it but it’s kind of busy, and to be fair I think there is some overlap with the full page blog post Create A BlogPost page and clean up BlogItem Hmm… If you remember correctly in our last article, Routing works off a static component. But we don’t want to have to hard code our every single blog post, that kind of defeats the purpose of using Contentful as CMS. <Switch> Luckily for us, has planned ahead and allows us to have path params. In add new route react-router-dom Router.js <Switch><Route exact path='/' component={Home}/><Route path='/blog' component={Blog}/> </Switch> exact <Route path='/blog/:blogPost' component={BlogPost}/> Important: This one took me a hot minute to figure our but you CAN NOT include a dash (-) in the parameter name. I originally had _:blog-post_ and couldn’t figure out why it looked like it was working but it wasn’t . It’s also important to note that you need to add exact in the Blog path , otherwise it will match the _/blog_ route first. Update the in our to put the /blog/ in front of our path <Link …> BlogItem.js <Link className="level-item button is-small is-link is-outlined" >Read More</Link> to={{pathname: `/blog/${props.path}`,state: { props }}} But before we can test this, we need to create a BlogPost page. For now lets just do some simple <pre> displaying so we can make sure we are sending the data to the blog post as state import React from 'react' const BlogPost = (props) => (<h1>Blog Post</h1><pre>{JSON.stringify(props, null, 2)}</pre>) export default BlogPost Now when we navigate to our blog post from the blog page we should see a huge object in our and the history object contains our state which is our blog post. <pre> Set Up the Blog Page Okay, before you read this and roar with rage that i clearly have no clue what I’m doing, this is not the best way to do this and object de-structuring this way can not be a best practice. This will all move to Redux in my next tutorial and which will be a WAY cleaner solution. import React from 'react'import { Link } from 'react-router-dom'import moment from 'moment'import * as Markdown from 'react-markdown'import PageContent from './../components/PageContent' const BlogPost = ({ location: { state: { props } }}) => { return (<PageContent><nav className="level"><div className="level-left"><Link className="level-item button is-small is-link is-outlined" to="/blog">Back to Blog</Link></div><div className="level-right"><p className="level-item has-text-link is-size-7"> {moment(props.date).calendar(null, {sameDay: '[Today]',lastDay: '[Yesterday]',lastWeek: '[Last] dddd',sameElse: 'MMM Do YYYY'})}</p></div></nav><article className="media"><div className="media-left"><figure className="image is-64x64"><img src={props.icon} alt="Image" /></figure></div><div className="media-content"><div className="content"><h1>{props.title}</h1><Markdown source={props.content} /></div></div></article></PageContent>)} export default BlogPost Clean Up the Overlap Now we can look at our and and find out overlapping code and make them nice pretty little components. BlogItem.js BlogPost.js Both our pages contain a content sections with the icon and and bottom and date sections, however, the button and date sections are in different places on the two pages. Let’s first create a folder for our new components. These are share components of the so in the blog folder create a folder, then create two files and Blog shared BlogContent.js BlogNav.js import React from 'react'import { Link } from 'react-router-dom'import moment from 'moment' const BlogNav = ({ to, date }) => (<nav className="level"><div className="level-left"><Link className="level-item button is-small is-link is-outlined" to={to}>Back to Blog</Link></div><div className="level-right"><p className="level-item has-text-link is-size-7">{moment(date).calendar(null, {sameDay: '[Today]',lastDay: '[Yesterday]',lastWeek: '[Last] dddd',sameElse: 'MMM Do YYYY'})}</p></div></nav>) export default BlogNav and import React from 'react'import * as Markdown from 'react-markdown' const BlogContent = (props) => (<article className="media"><div className="media-left"><figure className="image is-64x64"><img src={props.icon} alt="Image" /></figure></div><div className="media-content"><div className="content"><h1>{props.title}</h1><Markdownsource={props.limit? props.content.split(" ").splice(0,props.limit).join(" ").concat('...'): props.content}/></div>{ props.children }</div></article>) export default BlogContent In , we won’t always use but we want to put it there so we can place the nav in the that location on . You’ll see… BlogContent.js **props.children** BlogItems.js Now, lets update our and . This is gonna blow your mind. BlogItem.js BlogPost.js import React from 'react'import BlogNav from './shared/BlogNav'import BlogContent from './shared/BlogContent' const BlogItem = (props) => (<div className="box"><BlogContent limit={150} {...props }><BlogNav date={props.date} to={{pathname: `/blog/${props.path}`,state: { props }}} /></BlogContent></div>) export default BlogItem Notice how we are wrapping the BlogNav in this snippet, but not in the next one. This is what the props.children is used for. and import React from 'react'import PageContent from './../components/PageContent'import BlogNav from './shared/BlogNav'import BlogContent from './shared/BlogContent' const BlogPost = ({ location: { state: { props } }}) => (<PageContent><BlogNav date={props.date} to="/blog" /><BlogContent {...props } /></PageContent>) export default BlogPost That’s much better! SO The Status Tag In my examples I am including a tag for Status, this way I can tag my posts as in progress or archived or whatever You don’t know this yet but I do plan to use this in other places so we are going to add this in the folder. Create a file called . src/components StatusTag.js import React from 'react' const StatusTag = ({status}) => {switch(status) {case 'IN_PROGRESS':return (<span className="tag is-small is-warning" style={{ marginRight: 20 }}>In Progress</span>)case 'ARCHIVED':return (<span className="tag is-small is-danger" style={{ marginRight: 20 }}>Archived</span>)default:return (<span></span>)}} export default StatusTag And back in our let’s add the StatusTag next to the date. And don’t forget to import it. BlogNav.js import StatusTag from './../../components/StatusTag' const BlogNav = ({ to, date, }) => (<nav className="level"><div className="level-left"><Link className="level-item button is-small is-link is-outlined" to={to}>Back to Blog</Link></div><div className="level-right"> <p className="level-item has-text-link is-size-7">{moment(date).calendar(null, {sameDay: '[Today]',lastDay: '[Yesterday]',lastWeek: '[Last] dddd',sameElse: 'MMM Do YYYY'})}</p></div></nav>) status <StatusTag status={status} /> And we need to update places we use the component. <BlogNav … > <BlogNav date={props.date} to="/blog" /> status={props.status} Now we have a nice little tag so we can let our readers know that we are still working on this article. Let’s Review We learned about Contentful and signed up for an account Created Contentful content Connect Contentful to our app Created a blog feed page Created a blog feed items Created a blog post page Updated our Contentful content to realistic content Set up React to render Markdown as Html Refacted our code to make it cleaner Added a blog Status tag Now, we have the basic blog that you can start using today if you wanted — Next Import your Medium Feed into React
