Need help for basic reactmdb setup with create-react-app.

Topic: Need help for basic reactmdb setup with create-react-app.

nikroomancer free asked 6 years ago

Hi, cannot get reactmdb to work correctly. I’ve tried to do a simple navbar (or any other example) and I’m having some difficulties. These are the steps I’ve taken: create-react-app <APP_NAME>, npm install mdbreact, Got some dependency issues: npm WARN bootstrap@4.0.0-beta.2 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself. npm WARN react-motion-ui-pack@0.10.3 requires a peer of react@0.14.x || ^15.0.0 but none is installed. You must install peer dependencies yourself. npm WARN react-motion-ui-pack@0.10.3 requires a peer of react-dom@0.14.x || ^15.0.0 but none is installed. You must install peer dependencies yourself. This is confusing. It is supposed to be Jquery free and I have react 16...Anyway, I kept going. I copy pasted one of the react examples and end up with \\\"multiple copies of react\\\" problem. Found the solution on the support forum. This was solved using “mdbreact”:”git+https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design.git#react-upgrade” in package.json and npm installing again. It worked! Then came the styling. It had no styling so i imported some stuff in index.js: import \\\'mdbreact/dist/mdbreact.js\\\'; import \\\'mdbreact/docs/css/mdb.css’; in index.js and got some colors and hover effects but it still looked pretty bad. The navbar still had list style and other things were missing, it was clearly not the way it supposed to look. I tried npm installing bootstrap just in case and including its styles in index.js like this: import \\\'bootstrap/dist/css/bootstrap.css’; however, i quickly ran into multiple copies of react problem again so that didn’t work. I would appreciate a quick “For dummies mdbreact with create-react-app” as I clearly am missing something. The solution should be Jquery free and I do not want to eject web pack either since I want the updates for create-react-app in the future. Any help would be appreciated. Thank you!

Add comment

Jakub Strebeyko staff answered 6 years ago

1 0 Best answer

Hi there nikroomancer,
Thanks for submitting the question to our forum! The steps you have taken were mostly correct. Let's walk through it together, from the beginning:
1. <code>create-react-app yourappnamehere</code> 
2. <code>cd yourappnamehere</code> 
3. Add <code>mdbreact</code> as a dependency to the package.json (the <code>#react-upgrade</code> one) 
4. <code>yarn</code> / <code>npm</code> shall install all the dependencies. Note, that <code>mdbreact</code> itself includes Bootstrap (<code>4.0.0-beta.2</code>) as its dependency. Once all of it is out of the way, 
5. time to modify your <code>App.js</code> file. To utilize full power of <code>MBD React</code> there, you need to import components you would like to use, for example
<code>import {Button, NavbarBrand, Navbar, NavbarNav, NavItem} from 'mdbreact';</code>
and secondly, you need proper CSS files. As MDB partially builds upon Bootstrap, it's safest to include both:
<code>import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import '../node_modules/mdbreact/docs/css/mdb.min.css';</code>
As you can see, there is no jQuery involved. The warning popping out during <code>npm install</code> / <code>yarn</code> stems out of Bootstrap itself and the fact it requires jQuery by default - nothing to worry here - no ejecting either. Hope it helps.
With Best Regards, 
Kuba

Please insert min. 20 characters.

Hi there nikroomancer,

Thanks for submitting the question to our forum! The steps you have taken were mostly correct. Let's walk through it together, from the beginning:

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 / yarn stems out of Bootstrap itself and the fact it requires jQuery by default - nothing to worry here - no ejecting either. Hope it helps.

With Best Regards,
Kuba

nikroomancer free commented 6 years ago

Thank you! This seems to have done the trick. I did notice that the navbar doesn't seem to have the ripple highlight effect as in the example and the dropdown doesn't fade in, it just appears. Is this because it needs to be mdb react pro? I used the first basic react navbar example with the code provided on from your webpage. On the example it has the effects but they seem to be missing on the sample code implementation.

Jakub Strebeyko staff commented 6 years ago

Hi there, Happy it helped. :) When it comes to a particular component's effects, they might be optional or even added up in PRO version, but copying code should suffice to get the presented appearance. Thanks for you noticing now we know the snippets on the docs page are somehow flawed. Fixing it has been added to our development list and should be fixed soon enough. With Best Regards, Kuba

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

nikroomancer

0Support score
1Questions 0Answers 0Snippets