[[oktatas:web:react|< React]]

====== React - Bootstrap ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2022, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== react-bootstrap =====


==== Importálás ====

  npm install react-bootstrap bootstrap

==== Webhelyek ====

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


==== Háromszög területszámítás ====

<code javascript 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;

</code>

<code javascript App.css>
label {
  width: 100px;
}

input {
  margin-bottom: 3px !important;
}
</code>

===== Bootstrap =====

<code javascript src/App.js>
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';

function App() {
  return (
    <div className="container">
        Valami
    </div>
  );
}

export default App;
</code>

<code>
<button className="btn" onClick={() => console.log('működik')}>
Mehet
</button>
</code>