Skip to content

Commit f8a1a91

Browse files
lcheunglcilcheunglci
authored
docs(basic) add bs5 examples for basic-ts, basic-react-router and basic-sass-custom-theming (#246)
* Add bootsrap v5 additional basic examples for ts, react-router and sass-custom-theming * Add bootstrap v5 example links in the README * Seperate out the v5 links from the v4 to make it more noticable in the README
1 parent a5c94aa commit f8a1a91

29 files changed

+35640
-1
lines changed

‎README.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
The repository for React-Bootstrap's [CodeSandbox](https://codesandbox.io/) examples.
66

7-
## Examples
7+
## Examples v4
88

99
- [Basic Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic) - Just a simple create-react-app setup with React-Bootstrap components.
1010
- [Basic Example CDN](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-cdn) - Another simple create-react-app setup, this time including the Bootstrap CSS via CDN link.
@@ -13,3 +13,13 @@ The repository for React-Bootstrap's [CodeSandbox](https://codesandbox.io/) exam
1313
- [Basic Example with Sass and custom theming](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-sass-custom-theming) - Another simple create-react-app setup, this time by using Sass with custom theming
1414
- [Parcel Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel) - Just a simple Parcel setup with React-Bootstrap components.
1515
- [Parcel TypeScript Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel-ts) - Just a simple Parcel setup with TypeScript with React-Bootstrap components.
16+
17+
## Examples v5
18+
19+
- [Basic Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-v5)- Just a simple create-react-app setup with React-Bootstrap components.
20+
- [Basic Example CDN](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-cdn-v5) - Another simple create-react-app setup, this time including the Bootstrap CSS via CDN link.
21+
- [Basic Example with React-Router-Bootstrap](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-react-router-v5) - Just a simple create-react-app setup with React-Router-Bootstrap.
22+
- [Basic Example with TypeScript](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-ts-v5) - Another simple create-react-app setup, this time by using TypeScript
23+
- [Basic Example with Sass and custom theming](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-sass-custom-theming-v5) - Another simple create-react-app setup, this time by using Sass with custom theming
24+
- [Parcel Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel-v5) - Just a simple Parcel setup with React-Bootstrap components.
25+
- [Parcel TypeScript Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel-ts-v5) - Just a simple Parcel setup with TypeScript with React-Bootstrap components.

‎basic-react-router-v5/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Basic Example with React-Router-Bootstrap
2+
3+
A simple [create-react-app](CRA-README.md) setup, showcasing how it works with React-Router-Bootstrap

‎basic-react-router-v5/package.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "code-sandbox-examples",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"bootstrap": "^5.1.3",
7+
"react": "^17.0.2",
8+
"react-bootstrap": "^2.0.0",
9+
"react-dom": "^17.0.2",
10+
"react-router-bootstrap": "^0.25.0",
11+
"react-router-dom": "^5.2.0",
12+
"react-scripts": "4.0.3"
13+
},
14+
"scripts": {
15+
"start": "react-scripts start",
16+
"build": "react-scripts build",
17+
"test": "react-scripts test",
18+
"eject": "react-scripts eject"
19+
},
20+
"eslintConfig": {
21+
"extends": "react-app"
22+
},
23+
"browserslist": {
24+
"production": [
25+
">0.2%",
26+
"not dead",
27+
"not op_mini all"
28+
],
29+
"development": [
30+
"last 1 chrome version",
31+
"last 1 firefox version",
32+
"last 1 safari version"
33+
]
34+
}
35+
}

‎basic-react-router-v5/public/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>React-Bootstrap CodeSandbox Starter</title>
7+
</head>
8+
<body>
9+
<noscript>You need to enable JavaScript to run this app.</noscript>
10+
<div id="root"></div>
11+
</body>
12+
</html>

‎basic-react-router-v5/src/App.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.header {
2+
text-align: center;
3+
}
4+
5+
.custom-btn-toolbar {
6+
display: inline !important;
7+
}
8+
9+
.custom-btn-toolbar > .btn {
10+
margin-right: 1rem;
11+
}

‎basic-react-router-v5/src/App.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import { MemoryRouter, Switch, Route } from 'react-router-dom';
3+
4+
import Container from 'react-bootstrap/Container';
5+
import Button from 'react-bootstrap/Button';
6+
import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
7+
import { LinkContainer } from 'react-router-bootstrap';
8+
9+
import './App.css';
10+
11+
const Home = () => <span>Home</span>;
12+
13+
const About = () => <span>About</span>;
14+
15+
const Users = () => <span>Users</span>;
16+
17+
const App = () => (
18+
<MemoryRouter>
19+
<Container className="p-3">
20+
<Container className="p-5 mb-4 bg-light rounded-3">
21+
<h1 className="header">Welcome To React-Bootstrap</h1>
22+
<h2>
23+
Current Page is{' '}
24+
<Switch>
25+
<Route path="/about">
26+
<About />
27+
</Route>
28+
<Route path="/users">
29+
<Users />
30+
</Route>
31+
<Route path="/">
32+
<Home />
33+
</Route>
34+
</Switch>
35+
</h2>
36+
<h2>
37+
Navigate to{' '}
38+
<ButtonToolbar className="custom-btn-toolbar">
39+
<LinkContainer to="/">
40+
<Button>Home</Button>
41+
</LinkContainer>
42+
<LinkContainer to="/about">
43+
<Button>About</Button>
44+
</LinkContainer>
45+
<LinkContainer to="/users">
46+
<Button>Users</Button>
47+
</LinkContainer>
48+
</ButtonToolbar>
49+
</h2>
50+
</Container>
51+
</Container>
52+
</MemoryRouter>
53+
);
54+
55+
export default App;

‎basic-react-router-v5/src/App.test.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<App />, div);
8+
ReactDOM.unmountComponentAtNode(div);
9+
});

‎basic-react-router-v5/src/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
// Importing the Bootstrap CSS
6+
import 'bootstrap/dist/css/bootstrap.min.css';
7+
8+
ReactDOM.render(<App />, document.getElementById('root'));

0 commit comments

Comments
 (0)