Embed Medium in your Web site utilizing Materials-UI offers higher UI
I’ve already launchedand Medium in my earlier articles. Should you’ve missed, click on these hyperlinks and skim them. I like to indicate my lively hours on my weblog web page with a inexperienced badge. I prefer to migrate my weblog elements from to . As a result of Materials-UI Elements are trying enticing and straightforward to deal with. Then I assumed, why can’t I implement that in my weblog web page. Now I completed that and have a repo in GitHub. On this article, I’m going to say find out how to begin from scratch.
First, it is advisable create a react utility. For that run the next command in your shell/terminal in a particular folder (e.g., desktop )
npx create-react-app medium-post
A brand new folder will likely be created, and will probably be named as a medium-post. From this step, our utility is bootstrapped with. For extra info, click on the . Then open that challenge in your IDE. I’m personally utilizing the VS Code IDE.
It’s good to delete some recordsdata and manage the recordsdata for the event after you open the folder in your IDE. Due to this fact it is advisable go to the src folder and delete Brand.svg, App.css, index.css, and App.take a look at.js recordsdata. And create the next folders contained in the src folder named elements, belongings, helpers, and utils, then transfer your serviceWorker.js into the helper’s folder. App.js file into the Elements folder.
Now open the index.js file and delete the next snippet in index.js file.
Then modify the App.js and serviceWorker.js recordsdata paths in index.js import like following.
import App from ‘./elements/App’;
import * as serviceWorker from ‘./helpers/serviceWorker’;
Go to the Elements folder and open the App.js. Delete the return a part of the App operate. Now your file group will likely be like under.
Set up Materials-UI for Materials Design kind element.
npm set up @material-ui/core --save
Set up Axios to make HTTP requests to the API.
npm set up axios --save
Fetch(), alternatively, solely helps Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+ (you possibly can see the total compatibly desk on …)
Set up react-fontawesome to show icons.
npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome --save
Then create a brand new file named slider.js contained in the elements folder. Add the next code within the slider.js file.
Change your Medium person title as an alternative of @Sabesan96 on line 13.
Then create the utils folder and create the Totext.js file contained in the utils folder. Add the next snippet within the Totext.js file.
Then create the ShortenText.js file contained in the utils folder and add the next snippet within the ShortenText.js file
Create PostCard.js file contained in the element folder and add the next snippet within the PostCard.js file.
Lastly, Render the Slider element in App.js, as proven under
Right here I’ve showcased 4 steps to embed Medium as a weblog in your React Web site. Should you use this, you received’t spend cash to embed medium. Nevertheless, while you comply with these strategies, you’ll be unable to indicate your associated medium posts part in your weblog. You’ll be able to clone the Repo from this. If you’re going to use this challenge then Don’t overlook to present a star⭐️ for this repo.
Comfortable Coding 😊 !!!
Thanks for studying this far. Should you loved this put up, please share, remark, and press that 👏 a number of occasions (as much as 50 occasions). . . Possibly it can assist somebody.
Observe me onand Medium should you’re all in favour of extra in-depth and informative write-ups like these sooner or later!