Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a5c94aa

Browse files
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

‎parcel-ts-v5/package.json‎

Lines changed: 20 additions & 0 deletions
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+
}

‎parcel-ts-v5/src/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+
4+
<head>
5+
</head>
6+
7+
<body>
8+
<div id="root"></div>
9+
<script src="./index.tsx"></script>
10+
</body>
11+
12+
</html>

‎parcel-ts-v5/src/index.tsx‎

Lines changed: 42 additions & 0 deletions
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);

‎parcel-ts-v5/tsconfig.json‎

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

‎parcel-ts-v5/yarn.lock‎

Lines changed: 5492 additions & 0 deletions
Large diffs are not rendered by default.

‎parcel-v5/package.json‎

Lines changed: 19 additions & 0 deletions
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+
}

‎parcel-v5/src/index.html‎

Lines changed: 9 additions & 0 deletions
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>

‎parcel-v5/src/index.js‎

Lines changed: 42 additions & 0 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /