-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnovember_5.html
72 lines (65 loc) · 4.25 KB
/
november_5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
<title>Jarod Reichel's Web Dev Blog</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo&family=Roboto&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<h1>CS 347 Blog Entry - November 5, 2021</h1>
</header>
<main>
<h2>Part I: React Bootstrap</h2>
<p>On my entry for September 24th, I discussed the basics of using CSS Frameworks such as Bootstrap, and how they can improve static sites. However, things start to get interesting when trying to apply CSS frameworks to React. Yes, you could just import the CSS files, but default Bootstrap is also dependent on jQuery, which is redundant with much of the Node ecosystem's functionality. Also, much of Bootstrap is made up of CSS classes, which, while useful for static sites, don't mesh well with the component-based architecture of React. Therefore, one of the first third-party libraries of React components was created: React Bootstrap.</p>
<p>React Bootstrap is a third-party collection of React components that recreate the functionality of Bootstrap's CSS and JavaScript, but without the unnecessary dependency on jQuery. In addition, the typical classes in Bootstrap, such as Row, Col, etc. are converted into React components, which can make your site's code much clearer. To get started with React Bootstrap, simply run <span class="code_inline">npm install react-bootstrap</span> in your terminal (in your project directory). Afterwards, to use React Bootstrap components, you must import them in your own code, like any other component. However, you should not import the entire library, as this slows your site down. Instead, import the individual components. Below is a full code sample.</p>
<h3>App.js</h3>
<pre>
import React, { useState } from 'react';
import Jumbotron from 'react-bootstrap/Jumbotron';
import Toast from 'react-bootstrap/Toast';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';
import './App.css';
const ExampleToast = ({ children }) => {
const [show, toggleShow] = useState(true);
return (
<>
{!show && <Button onClick={() => toggleShow(true)}>Show Toast</Button>}
<Toast show={show} onClose={() => toggleShow(false)}>
<Toast.Header>
<strong className="mr-auto">React-Bootstrap</strong>
</Toast.Header>
<Toast.Body>{children}</Toast.Body>
</Toast>
</>
);
};
const App = () => (
<Container className="p-3">
<Jumbotron>
<h1 className="header">Welcome To React-Bootstrap</h1>
<ExampleToast>
We now have Toasts
<span role="img" aria-label="tada">
🎉
</span>
</ExampleToast>
</Jumbotron>
</Container>
);
export default App;
</pre>
<p>The above code and information was sourced from the following locations:</p>
<ul>
<li><a href="https://react-bootstrap.github.io/">The React Bootstrap website</a>.</li>
<li><a href="https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic?file=/src/App.js:0-1008">The React Bootstrap CodeSandbox Example</a>.</li>
</ul>
</main>
<footer>
<p>Site by Jarod Reichel</p>
</footer>
</body>
</html>