How to Add Medium Blogs on your React App

How to embed Medium blogs on your React app and other websites

Mehul Kothari
Aug 30 · 3 min read

Medium is becoming the popular platform for writing blogs, writing about your projects, and a lot more. On the other hand, React is also becoming very popular among the developers to create dynamic responsive web applications. In this article, I am going to show how you can embed medium blogs on your react app using API. Using the same API you can embed medium blogs on any frontend web applications. In this article, I am going to say how to start from scratch.

Image for post
Image for post

Step 1: Setting Up React Project

First, we need to create a react application. For that run the following command in your shell/terminal in a specific folder (e.g., desktop )

npx create-react-app medium-blogs-on-react

A new folder will be created with the name you have given in your command. So for me, it is medium-blogs-on-react. Then you can go to the choice of your IDE to work on it. I personally use the VS Code

Step 2: Manage your folder Structure

So you can choose your folder structure according to your choice. I personally prefer to move all components inside components folder like as shown below

Image for post
Image for post

Inside the Component folder, I have made two components. Blog and Show Blog. The purpose of the Blog component is to use an API and get all the post and pass it down as props to Show Blog Component

Step3: Writing Down Logic to Fetch Our Blogs

To get our Blogs from Medium we will need one API endpoint. So the API endpoint provided by a medium is given below

mediumURL ="https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@your-medium-username";

In the API endpoint replace your Medium user name at the end of the URL. The first portion of the URL is used to convert our XML RSS feed to JSON format. With that , we can write our logic for fetching our blogs from Medium.

So in the above code first we are initializing state where the profile will maintain profile data and item array will hold our blogs. Next, we are making an API call in the life cycle method and storing our data. Then we are separating our profile data and updating the state. After updating the state in render method we are looping through all the blog items stored in our items array and passing down all the data as props to ShowBlog Component. In the next step, we will write our code for Show component to display our Blogs.

Step 4: Writing down code to display Blogs in ShowBlog Component

In this step, we will write our code to display all the blogs we fetched from API and display it.

Step 5: Finally Add ShowBlog to our App component

Demo Images

Image for post
Image for post

Conclusion

Here in this article, I have described how you can add Medium Blogs to any front end website using API provided by Medium. If you use this, you won’t spend money to embed Medium, and also it will the same time. However, when you follow these methods, you will be unable to show your related medium posts section in your blog. You can clone the Repo from this Link

Happy Coding 😊

Github Link: https://github.com/mehulk05/Medium-Blog-On-React-App

Live Url:https://mehulk05.github.io/Medium-Blog-On-React-App#/

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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