React: Material Design for Bootstrap 4

https://mdbootstrap.com

1. create-react-app yourappnamehere
2. cd yourappnamehere
3. Add mdbreact as a dependency to the package.json (the #react-upgrade one)
4. yarn / npm shall install all the dependencies. Note, that mdbreact itself includes Bootstrap (4.0.0-beta.2) as its dependency. Once all of it is out of the way,
5. time to modify your App.js file. To utilize full power of MBD React there, you need to import components you would like to use, for example

import {Button, NavbarBrand, Navbar, NavbarNav, NavItem} from 'mdbreact';

and secondly, you need proper CSS files. As MDB partially builds upon Bootstrap, it's safest to include both:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/mdbreact/docs/css/mdb.min.css';

As you can see, there is no jQuery involved. The warning popping out during npm install / yarnstems out of Bootstrap itself and the fact it requires jQuery by default - nothing to worry here - no ejecting either. Hope it helps.

source: https://mdbootstrap.com/support/react/need-help-for-basic-reactmdb-setup-with-create-react-app/

Rezultatas:

package.json:

{
  "name": "test3",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5",
    "mdbreact": ""
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

npm install

App.css:

....

@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

@import '../node_modules/mdbreact/dist/css/mdb.css';

App.js:

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import {Button, NavbarBrand, Navbar, NavbarNav, NavItem, Card, CardHeader,CardBody, CardTitle,CardText } from 'mdbreact';

class App extends Component {

  render() {

    return (

      <div className="App">

        <header className="App-header">

          <img src={logo} className="App-logo" alt="logo" />

          <h1 className="App-title">Welcome to React</h1>

        </header>

        <p className="App-intro">

          To get started, edit <code>src/App.js</code> and save to reload.

        </p>

        <div className="container">

          <Button color="elegant">Elegant</Button>

<Button color="unique">Unique</Button>

<Button color="pink">Pink</Button>

<Button color="purple">Purple</Button>

<Button color="deep-purple">Deep-purple</Button>

<Button color="indigo">Indigo</Button>

<Button color="light-blue">Light blue</Button>

<Button color="cyan">Cyan</Button>

<Button color="dark-green">Dark-green</Button>

<Button color="light-green">Light-green</Button>

<Button color="yellow">Yellow</Button>

<Button color="amber">Amber</Button>

<Button color="deep-orange">Deep-orange</Button>

<Button color="brown">Brown</Button>

<Button color="blue-grey">Blue-grey</Button>

<Button color="mdb-color">MDB</Button>

<Card style={{width: '22rem', marginTop: '1rem'}}>

  <CardHeader color="deep-orange lighten-1">Featured</CardHeader>

  <CardBody>

    <CardTitle>Special title treatment</CardTitle>

    <CardText>With supporting text below as a natural lead-in to additional content.</CardText>

    <Button color="deep-orange">go somewhere</Button>

  </CardBody>

</Card>

        </div>

      </div>

    );

  }

}

export default App;

Veikia: