How to use MDBReact.
Want a better way to design your website that you’re working on, and want to make it modern? In this blog I will be assisting you on how to use MDBoostrap with React. There are multiple docs that have different with designing your website the way you’d like to, such as custom CSS, importing buttons, and customizing our gridbox. Let’s get started. First off, make sure you have react, the way you want to get react is by typing this into your terminal:
npm install react
If you have react, then you can just proceed to the second step which is:
npm install mdbreact
After you’ve done so, you want to import style files into the src/index.js before the App.js file:
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';We then want to start our server with:
npm startLet’s say, you want to change your traditional button to looking more stylish, you can do that with MBDReact. If your button looks like:
You can change your button to this:
How I did this is I imported these:
import React, { Fragment } from "react";
import { MDBBtn } from "mdbreact"
After you’ve imported those two, you want to place it where you would want your button on your website, in your JSX file, such as so:
You can also use MDBReact to import buttons to use for social media websites, such as stackoverflow:
Instead of only importing the MDBBtn from MDBReact instead we can also import MDBIcon, MDBContainer and then we can put this in our JSX file:
To have all of these custom buttons, and social media icons, you will need to locate the imports on MDBReact Docs
I hope this blog has helped you understand how to incorporate MDBReact with React, and getting a much more sleeker, and stylish website. Below I will list some docs and references. Thanks for reading!
