Instantly share code, notes, and snippets.

@eddywashere /App.js forked from gaearon/App.js
Last active Sep 4, 2018

What would you like to do?
Reactstrap App.js Example for create-react-app
import React, { Component } from 'react';
import {
} from 'reactstrap';
class App extends Component {
constructor(props) {
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
toggle() {
isOpen: !this.state.isOpen
render() {
return (
<Navbar color="inverse" inverse toggleable>
<NavbarToggler right onClick={this.toggle} />
<NavbarBrand href="/">reactstrap</NavbarBrand>
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavLink href="/components/">Components</NavLink>
<NavLink href="">Github</NavLink>
<h1>Welcome to React</h1>
View Reactstrap Docs
export default App;

This comment has been minimized.

wrunk commented Oct 21, 2017

Maybe worth noting this example didn't work for me with latest reactstrap. I did have luck using the example from components/navbar:

This had issues with the nav props and other errors that caused the page to not render properly.


This comment has been minimized.

krystofbe commented Nov 18, 2017

Working Typescript example for reactstrap-5.0.0-alpha.4


This comment has been minimized.

rafaellehmkuhl commented Dec 14, 2017

I wasn't luck with neither the docs example nor the components/navbar. Here is an screenshot from the rendering of the navbar example:



This comment has been minimized.

zaffkea commented Jan 3, 2018

@eddywashere, @rafaellehmkuhl, and @wrunk I think it isn't working because it's missing the .css. I added this line, and it works for me now.
import 'bootstrap/dist/css/bootstrap.css';


This comment has been minimized.

JonathanSum commented Jan 6, 2018

Awsome! :D:D zaffkea . It is freaking working now. Thank YOU!!!


This comment has been minimized.

flexjames commented Feb 13, 2018

I was unable to load the boostrapp.css file without adding some code to my webpack.config.js file. Perhaps it was because I was using webpack. The following link was helpful:


This comment has been minimized.

RodolfoSilva commented Mar 20, 2018

@eddywashere The navbar color is wrong use <Navbar color="dark" inverse toggleable> instead <Navbar color="inverse" inverse toggleable>


This comment has been minimized.

lizzymendivil commented Mar 28, 2018

Hi! Please, help me... I used to use bootstrap via CDN, you know, <link rel="stylesheet" href ... and <script src=""> etc
So, here, for react, where is the jquery, popper and bootstrap.min.js?
Sorry, it is my first time with react and npm. Thanks :)


This comment has been minimized.

lizzymendivil commented Mar 28, 2018

And also I have this error

Failed to compile.

Module not found: Can't resolve 'bootstrap/dist/css/bootstrap.min.css' in 'D:\React\my-app2\src'


This comment has been minimized.

MuhammadIdzhar commented May 8, 2018

Can we use Col or Container on first line instead of div?


This comment has been minimized.

aishbetu commented Sep 4, 2018

To all who're saying bootstrap.css not working. Just import the file at the very first line and it'll work See the example below
import 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment