I have already implemented Medium as a blog on my website. In the beginning, I used jQuery to fetch JSON objects. I have mentioned that method in my medium article. But I am not satisfied with that method. I don’t like that user interface. So I thought about using React for better user experience. Then I avoided jQuery and implemented it in pure JavaScript and React Js. Here you could see the live demo of this react application. This is my 2nd dev.to article.

I downloaded the shards dashboard lite and was impressed by its blog page. Then I thought, why can’t I implement that in my blog page. After that, I come up with a solution. But that didn’t work. Then I tried a new method that worked. 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 dev.to-post

A new folder will be created, and it will be named as a dev.to-post. From this step, our application is bootstrapped with Create React App. Then open that project in your IDE. I am personally using the VS Code IDE.

Step2: Delete Unwanted Files

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.

 JavaScript
import ‘./index.css’;

Then modify the App.js and serviceWorker.js files paths in index.js import like following.

 JavaScript
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 Shards React package

You can install Shards React via NPM.

npm i shards-react

Once the package is installed, open the index.js and add the following snippet to the top of the code.

 JavaScript
import ‘bootstrap/dist/css/bootstrap.min.css’;
import ‘shards-ui/dist/css/shards.min.css’;

Then you need to add this CSS file into the assets folder. Once you add the file inside the assets folder, import the CSS file in index.js.

 JavaScript
import ‘./assets/shards-dashboards.1.1.0.min.css’;

Step4: Fetch data from Dev.to

Then create a new file named slider.js inside the components folder. Add the following code in the slider.js file.

replace the thepracticaldev with your dev.to username. 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 BlogCard.js file inside the Component folder and add the following snippet in the BlogCard.js file.

Finally, Render the Slider component in App.js, as shown below.

Conclusion

Here I have showcased four steps to embed dev.to as a blog on your React Website. If you use this, you won’t spend money to embed dev.to. However, when you follow these methods, you will be unable to show your related dev.to posts section in your blog. You can clone the Repo from this link. If this repo is useful for you don't forget to give a star ⭐️.

Happy Coding 😊 !!!