React - Bootstrap

• Szerző: Sallai András
• Copyright © Sallai András, 2022, 2023
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

npm install react-bootstrap bootstrap

• https://react-bootstrap.github.io/
• https://create-react-app.dev/

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;
}

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>