Iwiseman: /* Create Menu in App.js */

2021-07-12T01:36:32Z

Create Menu in App.js

← Older revision		Revision as of 01:36, 12 July 2021
Line 12:		Line 12:
	</syntaxhighlight>		</syntaxhighlight>
	=Create Menu in App.js=		=Create Menu in App.js=
	<syntaxhighlight lang="js">		<syntaxhighlight lang="jsx">
	function App() {		function App() {
	return (		return (

Iwiseman: /* Create Menu in App.js */

2021-06-25T00:55:57Z

Create Menu in App.js

← Older revision		Revision as of 00:55, 25 June 2021
Line 17:		Line 17:
	<Router>		<Router>
	<div>		<div>
	~~<h2>Welcome to React Router Tutorial</h2>~~
	{		{
	<nav class="navbar navbar-expand-lg navbar-light bg-light">		<nav class="navbar navbar-expand-lg navbar-light bg-light">

Iwiseman: Created page with "=Introduction= This page is to provide information on how to use bootstrap with React. At the time we used bootstrap 5.0.2 and React 17.0.2. =Install Packages= Install the pac..."

2021-06-25T00:55:20Z

Created page with "=Introduction= This page is to provide information on how to use bootstrap with React. At the time we used bootstrap 5.0.2 and React 17.0.2. =Install Packages= Install the pac..."

New page

=Introduction=
This page is to provide information on how to use bootstrap with React. At the time we used bootstrap 5.0.2 and React 17.0.2.
=Install Packages=
Install the packages
<syntaxhighlight lang="bash">
npm install react-bootstrap bootstrap
</syntaxhighlight>
=Add CSS to Index.js=
Import css
<syntaxhighlight lang="js">
import 'bootstrap/dist/css/bootstrap.min.css';
</syntaxhighlight>
=Create Menu in App.js=
<syntaxhighlight lang="js">
function App() {
return (
<Router>
<div>
<h2>Welcome to React Router Tutorial</h2>
{
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/home">
microblog-react
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<Link to={"/"} aria-current="page" className="nav-link">
Home
</Link>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<Link
to={"/test"}
aria-current="page"
className="nav-link"
>
Explore
</Link>
</li>
...
</ul>
</div>
</div>
</nav>
}
<hr />
...
<Switch>
<Route exact path="/" component={Home} />
...
<Route path="/test" component={Test} />
</Switch>
</div>
</Router>
);
}

</syntaxhighlight>

React with Bootstrap - Revision history

Iwiseman: /* Create Menu in App.js */

Iwiseman: /* Create Menu in App.js */

Iwiseman: Created page with "=Introduction= This page is to provide information on how to use bootstrap with React. At the time we used bootstrap 5.0.2 and React 17.0.2. =Install Packages= Install the pac..."