Instantly share code, notes, and snippets.

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

Embed
What would you like to do?
Reactstrap App.js Example for create-react-app
import React, { Component } from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
Container,
Row,
Col,
Jumbotron,
Button
} from 'reactstrap';
class App extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<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>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
<Jumbotron>
<Container>
<Row>
<Col>
<h1>Welcome to React</h1>
<p>
<Button
tag="a"
color="success"
size="large"
href="http://reactstrap.github.io"
target="_blank"
>
View Reactstrap Docs
</Button>
</p>
</Col>
</Row>
</Container>
</Jumbotron>
</div>
);
}
}
export default App;
@wrunk

This comment has been minimized.

Show comment
Hide comment
@wrunk

wrunk 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: https://reactstrap.github.io/components/navbar/

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

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: https://reactstrap.github.io/components/navbar/

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

@krystofbe

This comment has been minimized.

Show comment
Hide comment
@krystofbe

krystofbe Nov 18, 2017

Working Typescript example for reactstrap-5.0.0-alpha.4

https://gist.github.com/krystofbe/47c19f41949249bb9b58af46794f1955

krystofbe commented Nov 18, 2017

Working Typescript example for reactstrap-5.0.0-alpha.4

https://gist.github.com/krystofbe/47c19f41949249bb9b58af46794f1955

@rafaellehmkuhl

This comment has been minimized.

Show comment
Hide comment
@rafaellehmkuhl

rafaellehmkuhl 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:

image

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:

image

@zaffkea

This comment has been minimized.

Show comment
Hide comment
@zaffkea

zaffkea 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';

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';

@JonathanSum

This comment has been minimized.

Show comment
Hide comment
@JonathanSum

JonathanSum Jan 6, 2018

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

JonathanSum commented Jan 6, 2018

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

@flexjames

This comment has been minimized.

Show comment
Hide comment
@flexjames

flexjames 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:

https://stackoverflow.com/questions/42436728/webpack2-how-to-import-bootstrap-css-for-react-bootstrap-to-find-its-styles/42440360

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:

https://stackoverflow.com/questions/42436728/webpack2-how-to-import-bootstrap-css-for-react-bootstrap-to-find-its-styles/42440360

@RodolfoSilva

This comment has been minimized.

Show comment
Hide comment
@RodolfoSilva

RodolfoSilva Mar 20, 2018

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

RodolfoSilva commented Mar 20, 2018

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

@lizzymendivil

This comment has been minimized.

Show comment
Hide comment
@lizzymendivil

lizzymendivil 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 :)

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 :)

@lizzymendivil

This comment has been minimized.

Show comment
Hide comment
@lizzymendivil

lizzymendivil Mar 28, 2018

And also I have this error

Failed to compile.

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

lizzymendivil commented Mar 28, 2018

And also I have this error

Failed to compile.

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

@MuhammadIdzhar

This comment has been minimized.

Show comment
Hide comment
@MuhammadIdzhar

MuhammadIdzhar May 8, 2018

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

MuhammadIdzhar commented May 8, 2018

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

@aishbetu

This comment has been minimized.

Show comment
Hide comment
@aishbetu

aishbetu 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';

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