Embed Medium as a blog on your React Website — Part 2
Embed Medium on your Website using Material-UI gives better UI
Photo by Aron Visuals on Unsplash
I have already introduced React and Medium in my previous articles. If you’ve missed, click those links and read them. I like to show my active hours on my blog page with a green badge. I like to migrate my blog components from Shards-React to Material-UI. Because Material-UI Components are looking attractive and easy to handle. Then I thought, why can’t I implement that in my blog page. Now I finished that and have a repo in GitHub. In this article, I am going to say how to start from scratch.
Step1: Setup React Project ?
First, you 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-post
A new folder will be created, and it will be named as a medium-post. From this step, our application is bootstrapped with Create React App. For more information, click the link. Then open that project in your IDE. I am personally using the VS Code IDE.
Step2: Delete Unwanted Files ?️
Create React App file organization
You need to delete some files and organize the files for the development after you open the folder in your IDE. Therefore you need to go to the src folder and delete Logo.svg, App.css, index.css, and App.test.js files. And create the following folders inside the src folder named components, assets, helpers, and utils, then move your serviceWorker.js into the helper’s folder. App.js file into the Components folder.
Now open the index.js file and delete the following snippet in index.js file.
Then modify the App.js and serviceWorker.js files paths in index.js import like following.
import App from ‘./components/App’;
import * as serviceWorker from ‘./helpers/serviceWorker’;
Go to the Components folder and open the App.js. Delete the return part of the App function. Now your file organization will be like below.
Step 3: Install packages ?
Install Material-UI for Material Design form component.
npm install @material-ui/core --save
Install Axios to make HTTP requests to the API.
npm install axios --save
Install react-fontawesome to display icons.
npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome --save
Photo by Christina Morillo from Pexels
Step4: Fetch data from medium ?
Then create a new file named slider.js inside the components folder. Add the following code in the slider.js file.
Replace your Medium user name instead of @Sabesan96 on line 13.
Then create the utils folder and create the Totext.js file inside the utils folder. Add the following snippet in the Totext.js file.
Then create the ShortenText.js file inside the utils folder and add the following snippet in the ShortenText.js file
Create PostCard.js file inside the component folder and add the following snippet in the PostCard.js file.
Finally, Render the Slider component in App.js, as shown below
UI in sleeping hours
UI in Active hours
Here I have showcased four steps to embed Medium as a blog on your React Website. If you use this, you won’t spend money to embed medium. 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. If you are going to use this project then Don’t forget to give a star⭐️ for this repo.
Happy Coding ? !!!
Thank you for reading this far. If you enjoyed this post, please share, comment, and press that ? a few times (up to 50 times). . . Maybe it will help someone.
Follow me on Twitter and Medium if you’re interested in more in-depth and informative write-ups like these in the future!
Gain Access to Expert View — Subscribe to DDI Intel
Embed Medium as a blog on your React Website — Part 2 was originally published in DataDrivenInvestor on Medium, where people are continuing the conversation by highlighting and responding to this story.
By: Sabesan Sathananthan
Title: Embed Medium as a blog on your React Website — Part 2
Sourced From: medium.datadriveninvestor.com/embed-medium-as-a-blog-on-your-react-website-part-2-187db2b60a59?source=rss-b255948cc1f5------2
Published Date: Fri, 25 Sep 2020 15:21:21 GMT
Did you miss our previous article...