oktatas:web:react:bootstrap
< React
React - Bootstrap
react-bootstrap
Importálás
npm install react-bootstrap bootstrap
Webhelyek
Háromszög területszámítás
- App.js
import './App.css';
import { useState } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';
function App() {
const [base, setBase] = useState();
const [height, setHeight] = useState("");
const [area, setArea] = useState("");
function calcTriangleArea() {
let area = base * height / 2
setArea(area)
}
return (
<div className="App container">
<h1>Háromszög területe</h1>
<div>
<label className='form-label'>Alap</label>
<input type="text" onChange={(e) => setBase(e.target.value)}
className='form-control'/>
</div>
<div>
<label className='form-label'>Magasság</label>
<input type="text" onChange={(e) => setHeight(e.target.value)}
className='form-control'/>
</div>
<div className="d-flex justify-content-start">
<Button
variant="primary"
className='m-2'
onClick={calcTriangleArea}
>
Számít
</Button>
</div>
<div>
<label className='form-label'>Terület</label>
<input type="text" value={area} readOnly
className='form-control'/>
</div>
</div>
);
}
export default App;
- App.css
label {
width: 100px;
}
input {
margin-bottom: 3px !important;
}
Bootstrap
- src/App.js
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
function App() {
return (
<div className="container">
Valami
</div>
);
}
export default App;
<button className="btn" onClick={() => console.log('működik')}>
Mehet
</button>
oktatas/web/react/bootstrap.txt · Utolsó módosítás: 2023/06/09 20:10 szerkesztette: admin