Skip to content

Commit a5c94aa

Browse files
lcheunglcilcheunglci
authored
Add bootstrap v5 parcel examples and fix compiler error due to deprecated jumbotron (#245)
1 parent 82b69df commit a5c94aa

File tree

9 files changed

+11129
-0
lines changed

9 files changed

+11129
-0
lines changed

Diff for: ‎parcel-ts-v5/package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "parcel-ts",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"scripts": {
6+
"start": "parcel src/index.html",
7+
"build": "parcel build src/index.html",
8+
"test": "echo \"no tests exists\""
9+
},
10+
"dependencies": {
11+
"bootstrap": "^5.1.3",
12+
"react": "^17.0.2",
13+
"react-bootstrap": "^2.0.0",
14+
"react-dom": "^17.0.2"
15+
},
16+
"devDependencies": {
17+
"parcel-bundler": "^1.12.5",
18+
"typescript": "^4.4.4"
19+
}
20+
}

Diff for: ‎parcel-ts-v5/src/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
</head>
6+
7+
<body>
8+
<div id="root"></div>
9+
<script src="./index.tsx"></script>
10+
</body>
11+
12+
</html>

Diff for: ‎parcel-ts-v5/src/index.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, { useState } from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
// Importing the Bootstrap CSS
5+
import 'bootstrap/dist/css/bootstrap.min.css';
6+
7+
import Toast from 'react-bootstrap/Toast';
8+
import Container from 'react-bootstrap/Container';
9+
import Button from 'react-bootstrap/Button';
10+
11+
const ExampleToast: React.FunctionComponent = ({ children }) => {
12+
const [show, toggleShow] = useState(true);
13+
14+
return (
15+
<>
16+
{!show && <Button onClick={() => toggleShow(true)}>Show Toast</Button>}
17+
<Toast show={show} onClose={() => toggleShow(false)}>
18+
<Toast.Header>
19+
<strong className="mr-auto">React-Bootstrap</strong>
20+
</Toast.Header>
21+
<Toast.Body>{children}</Toast.Body>
22+
</Toast>
23+
</>
24+
);
25+
};
26+
27+
const App = () => (
28+
<Container className="p-3">
29+
<Container className="p-5 mb-4 bg-light rounded-3">
30+
<h1 className="header">Welcome To React-Bootstrap</h1>
31+
<ExampleToast>
32+
We now have Toasts
33+
<span role="img" aria-label="tada">
34+
🎉
35+
</span>
36+
</ExampleToast>
37+
</Container>
38+
</Container>
39+
);
40+
41+
const mountNode = document.getElementById('root');
42+
ReactDOM.render(<App />, mountNode);

Diff for: ‎parcel-ts-v5/tsconfig.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"compilerOptions": {
3+
"jsx": "react",
4+
"esModuleInterop": true
5+
}
6+
}

Diff for: ‎parcel-ts-v5/yarn.lock

+5,492
Large diffs are not rendered by default.

Diff for: ‎parcel-v5/package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "parcel",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"scripts": {
6+
"start": "parcel src/index.html",
7+
"build": "parcel build src/index.html",
8+
"test": "echo \"no tests exists\""
9+
},
10+
"dependencies": {
11+
"bootstrap": "^5.1.3",
12+
"react": "^17.0.2",
13+
"react-bootstrap": "^2.0.0",
14+
"react-dom": "^17.0.2"
15+
},
16+
"devDependencies": {
17+
"parcel-bundler": "^1.12.5"
18+
}
19+
}

Diff for: ‎parcel-v5/src/index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
</head>
5+
<body>
6+
<div id="root"></div>
7+
<script src="./index.js"></script>
8+
</body>
9+
</html>

Diff for: ‎parcel-v5/src/index.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, { useState } from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
// Importing the Bootstrap CSS
5+
import 'bootstrap/dist/css/bootstrap.min.css';
6+
7+
import Toast from 'react-bootstrap/Toast';
8+
import Container from 'react-bootstrap/Container';
9+
import Button from 'react-bootstrap/Button';
10+
11+
const ExampleToast = ({ children }) => {
12+
const [show, toggleShow] = useState(true);
13+
14+
return (
15+
<React.Fragment>
16+
{!show && <Button onClick={() => toggleShow(true)}>Show Toast</Button>}
17+
<Toast show={show} onClose={() => toggleShow(false)}>
18+
<Toast.Header>
19+
<strong className="mr-auto">React-Bootstrap</strong>
20+
</Toast.Header>
21+
<Toast.Body>{children}</Toast.Body>
22+
</Toast>
23+
</React.Fragment>
24+
);
25+
};
26+
27+
const App = () => (
28+
<Container className="p-3">
29+
<Container className="p-5 mb-4 bg-light rounded-3">
30+
<h1 className="header">Welcome To React-Bootstrap</h1>
31+
<ExampleToast>
32+
We now have Toasts
33+
<span role="img" aria-label="tada">
34+
🎉
35+
</span>
36+
</ExampleToast>
37+
</Container>
38+
</Container>
39+
);
40+
41+
var mountNode = document.getElementById('root');
42+
ReactDOM.render(<App />, mountNode);

0 commit comments

Comments
 (0)