How to Add Medium Blogs on your React App
How to embed Medium blogs on your React app and other websites
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.
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
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
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
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