5 min Quick Start:

Prerequisites:

Before you use MDB React make sure you have installed Create React App package. This package contains development environment that will speed up the development process. Node 6 or higher is required.

To install Create React App, in your command line type:


          $ npm install -g create-react-app
      

          $ yarn global add create-react-app
      

New project:

Step 1: If you haven't downloaded MDB React package yet, go to Getting Started page and download it now.

Step 2: Unzip downloaded package and open your unpacked directory.

* Step for PRO version: If You want to install dependency from our GitLab repository, please open package.json file and copy the link to our repo from the commented line ("//": "git+https://oauth2:..."). Then replace the direct path to /.mdbreact.tgz in dependencies with the copied link. Don't forget to replace <YOUR_TOKEN_GOES_HERE> part with your private gitlab access token.

To install the dependencies, depending on your node module manager, run:


          $ npm install
      

          $ yarn
      

Step 3: When you've downloaded everything, it's time to run the second command wich will serve your app on localhost:


          $ npm start
      

          $ yarn start
      

Step 4: When you check what is served at your port 3000 you should see our demo app. Explore it and choose components you like. On every page you will find link to our official documentation of the component. Check it out!

Step 5: If You want to completely remove our demo from Your App, just run:


          $ npm run remove-demo
      

          $ yarn run remove-demo
      
It will remove demo directory from your project and generate a boilerplate for your app. Then run the app in development mode.

        $ npm start
    

        $ yarn start
    

Step 6: Copy our component's code to your project and compose your website. And yes, it's that simple!

Existing project:

Step 1:  Create new react project using the command:

create-react-app myApp

Step 2:  cd myApp

Step 3:  Install MDB React

npm install --save mdbreact
// OR
yarn add mdbreact

Step 4:  Import style files into the src/index.js before the App.js file:

import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';


Step 5: Run your app

npm run start
// OR
yarn start

Step 1:  Create new react project using the command:

create-react-app myApp

Step 2:  cd myApp

Step 3:  GitLab installation

  1. Visit https://git.mdbootstrap.com and log in, if you are PRO user and do not have an account yet, please request one contacting us: contact@mdbootstrap.com
  2. From top right corner click at your avatar and choose "Setting → Access Tokens"
  3. Provide a Name for your token and choose "api" from scopes. Then click "Create personal access token"
    add token
  4. Once your token will be generated make sure to copy it and store in safe place. You won't be able to access it again. In case of lose, you will have to generate new token again.
    token
  5. Navigate to given repository, switch GIT to HTTP and copy it's URL i.e.: https://git.mdbootstrap.com/mdb/react/re-pro.git
    repo
  6. Adjust the following link as per below
    "git+https://oauth2: + access_token + @ + repo address" 

    i.e. 

    git+https://oauth2:jFzMYzqSBUmGm3Z1ZA9s@git.mdbootstrap.com/mdb/react/re-pro.git
  7. Within existing React project run:
    yarn add git+https://oauth2:jFzMYzqSBUmGm3Z1ZA9s@git.mdbootstrap.com/mdb/react/re-pro.git or npm install git+https://oauth2:jFzMYzqSBUmGm3Z1ZA9s@git.mdbootstrap.com/mdb/react/re-pro.git --save

    if you don't have existing npm project you should create it first (yarn init / npm init)

    alternatively, you can update your dependencies in package.json like below:

    "dependencies": {
      "mdbreact": "git+https://oauth2:jFzMYzqSBUmGm3Z1ZA9s@git.mdbootstrap.com/mdb/react/re-pro.git"
    }

    Then run yarn or npm install to install the dependencies

Step 4:  Import style files in Your src/index.js

import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';


Step 5:  Run your app

npm run start
// OR
yarn start