Run first react app


Topic: Run first react app

BSTeam asked 5 years ago

I did installation as below steps: 1) npm create-react-app fo

2) cd fo

3) edit package.json to add "mdbreact": "git+https://oauth2:@git.mdbootstrap.com/mdb/react/re-pro.git"

4) npm install

5) npm start

I see default react page fine.

6) Then I added a navbar sample code into project as below:

======== file ./components/navbars/topbar.js =======

import React, { Component } from "react"; import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBFormInline, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdbreact";

class Topbar extends Component { state = { isOpen: false };

toggleCollapse = () => { this.setState({ isOpen: !this.state.isOpen }); };

render() { return ( Navbar Home Features Pricing Dropdown Action Another Action Something else here Something else here ); } }

export default Topbar;

======= end of topbar.js =============

7) edit App.js as below === App.js ======

import React from "react"; import logo from "./logo.svg"; import "./App.css"; import Topbar from "./components/navbars/topbar";

function App() { return ( { } ); }

export default App;

==== end of App.js ======

Expected behavior Browser should display something

Actual behavior : error as below

./node_modules/mdbreact/dist/mdbreact.esm.js

Module not found: Can't resolve 'react-router-dom' in '/Users/albertwang/working/fo/node_modules/mdbreact/dist'

Resources (screenshots, code snippets etc.)

if I manually install react-router-dom, I will get error as "using Navlink outside ".

please advice. Thank you.


Aliaksandr Andrasiuk staff answered 5 years ago

Hi,

After v.4.15.0 release we moved react-router-dom package to peerDependencies, so it should be installed manually. But we will move it back in our upcoming release.

The second error you get:

Router is a part of react-react-dom package. NavLink use Link components which are also a part of react-router-dom package and they should be wrapped into Router (we will update our documentation examples).

It's easy to configure:

1) Import Router from react-router-dom package in index.js file:

import { BrowserRouter as Router } from 'react-router-dom';

2) Wrap your App component with imported Router:

ReactDom.render( <Router> <App /></Router>,  document.getElementById("root"));

And that's all. Now you can start your application.

Hope I could help.

Best regards.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.18.0
  • Device: macbook pro
  • Browser: chrome
  • OS: OS
  • Provided sample code: No
  • Provided link: Yes