React ?????? ?? ??? ?? ??? ???? ? ?? ??? ????. 1) ?? ?? ???? ??? CSS ? JavaScript; 2) React-Bootstrap ?? ReactStrap? ?? React? ?? ??? ??? ?????? ??????. 1) NPM? ?? ?? ???? ???? ?? ??? CSS ??? ?? ? ?? React ?? ???? ?? ??? ??? ??? ??????. 2) React-Bootstrap ?? ReactStrap? ?? ? ? ???? React ?? ??? ?? ??????. ??? ??? ???? ?? ? UI? ???? ????? ??? ??, JavaScript ?? ? ?? ? ???? ?? ???? ?????? ??????.

??

???? ??? ?? ???? React? Bootstrap? ??? ?? ?? ???? ????. ?? React? ??? ?? ?? ?? ??? ???? ??? Bootstrap? ??? UI ?? ??? ?? ? ???? ?????. ??, ??? React ?????? ?? ??? ?? ??? ???? ?? ??? ??? ???? ????? ??? ?? ????. ? ??? ?? ??? ?? ???? ???? ??? ??? ??? ? ?? ???? ??? ?? ??? ?? ?? ????.

?? ?? ??

???? ?? React ? Bootstrap? ?? ??? ??? ?????. React? ??? ?????? ?????? JavaScript ????????. ?? ?? ???? ?? ??? ? ??? ?? UI ????? ????? ?? ? ? ??????. Bootstrap? ???? ?? ? ? ???? ???? ?? ? ? ??? ?? CSS ? JavaScript ?? ??? ???? ???? ??? ?? ??? ?????.

React?? Bootstrap? ????? Bootstrap? CSS ? JavaScript? React ????? ???? ??? ???????. ???? ????? NPM ?? ??? ???? ?? ??? ???? ???? ?? ?? ???? ?? ???? ??? ?? ? ?? ??? ???? ??? ?????.

?? ?? ?? ?? ??

???? ?? ??? ?? ??? ??

?? ???? React ????? ???? ? ?? ?? ??? ????. Bootstrap? CSS ? JavaScript? ????? React-Bootstrap ?? ReactStrap? ?? React? ?? ??? ??? Bootstrap ?????? ??????. ?? ?? ?? ???? ???? ??? ?? ?????.

 // ?? ???? ?????
NPM ?? ?? ???

// React ????? ?? ??? Bootstrap? CSS ?? (? : Index.js)
'?? ???/dist/css/bootstrap.min.css';

????? React ?? ???? Bootstrap? ??? ??? ???? UI ??? ?? ? ? ????. ?? ??:

 'React'?? React React;

?? butonexample () {
  ?? (
    <?? ?? = "??"className = "btn btn-primary"> ?? </button>
  );
}

?? Buttonexample ????;

?? ??

Bootstrap? CSS ??? ??? ???? React? ??? ??? ??? DOM ??? ???? ?????? ??? ??? ?? ?? ???? ?????. ??? ?? ??? ??????? Bootstrap? CSS ??? ???????? ?? ???? ?? ?? ????.

React-Bootstrap ?? ReactStrap? ????? ??? ?? ??? ?????? ?? ?? ???? ???? ??? ???? React? ?? ??? ??? ?? ??? ?????. ?? ??:

 'React'?? React React;
'react-bootstrap'?? {button} ?? ??;

?? butonexample () {
  ?? (
    <?? variant = "??"> ?? </button>
  );
}

?? Buttonexample ????;

? ???? ??? ?? ??? ??? ??? ???? ?? ? ??? ??? ?? ??? ???? ??? ?? ?????? ????.

??? ?

?? ??

Bootstrap? ????? ? ?? ??? ???? ??? ?? ?? ?????.

 'React'?? React React;
'?? ???/dist/css/bootstrap.min.css';

?? navbarexample () {
  ?? (
    <nav classname = "Navbar Navbar-expand-lg navbar-light bg-light">
      <A ClassName = "Navbar-Brand"href = "#"> Navbar </a>
      <button className = "navbar-toggler"type = "button"data-toggle = "??"data-target = "#navbarnav"aria-controls = "navbarnav"aria-expanded = "false"aria-label = "Toggle Navigation">
        <span className = "Navbar-Toggler-Icon"> </span>
      </??>
      <div classname = "Collapse Navbar-Collapse"id = "navbarnav">
        <ul classname = "Navbar-Nav">
          <li classname = "nav-item active">
            <a className = "nav-link"href = "#"> home <span classname = "sr-only"> (??) </span> </a>
          </li>
          <li classname = "nav-item">
            <a className = "nav-link"href = "#"> ?? </a>
          </li>
          <li classname = "nav-item">
            <A ClassName = "Nav-Link"href = "#"> ?? </a>
          </li>
        </ul>
      </div>
    </nav>
  );
}

?? ?? Navbarexample;

? ??? ?? ???? ??? ??? ???? ?? ? ????? ?? ??? ??? ?????.

?? ??

?? React-Bootstrap? ???? ??? ?????? ??? ?? ?? ?????.

 import React, {usestate} 'react';
'react-bootstrap'?? {form, button} ?? ??;

?? formexample () {
  const [??, setValidated] = usestate (false);

  const handlesubmit = (???) => {
    const form = event.currentTarget;
    if (form.checkvalidity () === false) {
      event.preventDefault ();
      event.stopPropagation ();
    }

    setvalidated (true);
  };

  ?? (
    <form novalidate validated = {validated} onsubmit = {handlesubmit}>
      <form.group controlid = "FormbasiceMail">
        <form.label> ??? ?? </form.label>
        <form.control type = "???"?? ?? ? = "??? ??"required />
        <form.control.feedback type = "Invalid">
          ??? ???? ??????.
        </form.control.feedback>
      </form.group>

      <form.group controlid = "formbasicpassword">
        <form.label> ???? </form.label>
        <form.control type = "Password"?? ?? ? = "????"?? />
        <form.control.feedback type = "Invalid">
          ??? ????? ??????.
        </form.control.feedback>
      </form.group>

      <?? variant = "??"?? = "??">
        ????
      </??>
    </form>
  );
}

?? ?? ??? ????;

? ??? React-Bootstrap? ?? ?? ??? ???? ?? ????? ??? ???? ??? ?????.

???? ?? ? ??? ?

?? ??? ?? ??? ??? ?? ???? ??? ??? ????.

• ???? ?? : ?? ???? CSS ??? ???? ????? ??????. React-Bootstrap ?? ReactStrap? ???? ?? ?? ???? ????? ??????.
• JavaScript ?? ?? : ?? Bootstrap? ???? ?? Bootstrap? JavaScript ??? ??????. React-Bootstrap ?? ReactStrap? ???? ??? ?????? ???? JavaScript ??? ?????.
• ?? ? ?? : col-md-6 ?? ?? Bootstrap? ?? ? ??? ??? ???? ???? ??? ??????.

??? ??? ????? ??? ??? ????.

• Browser? ??? ??? ???? ?? ??? ? JavaScript ??? ??????.
• ?? ??? ???? ????? ???? ??? ?? ??? ??????? ?? ???? ? ? ????.
• Bootstrap? ??? ?? ? ?? ??? ???? ???? ??? ????? ?? ??? ?????.

?? ??? ? ?? ??

?? ??? ?? ??? ??? ? ??? ????? ? ?? ?? ??? ? ?? ??? ????.

• ??????? : ?? ???? ?? ?? ? ???? ?? bootstrap.native to Bootstrap? JavaScript ??? ??????????? ??? ????.
• ??? ?? ??? : ?? ???? ?? ??? ?? ???? ??????? ??? ?? CSS? ?? ?? ???? ?? ???? ?? ???. ??? ?? ??? ????? ?? ??????? ? ? ????.
• ?? ?? ?? : ?? ???? UI ??? ??? ??? React ?? ??? ????? ?? React? ?? ?? ?? ??? ??? ??????. ?? ??? ?? ?? ? ???? ???? ? ????.

?? ??????? ? ? ??? ??????. React-Bootstrap? ??? ? ?? ??? ??? ????? ????. ??? ? ??? ? React? useMemo ??? ???? ?? ??? ?? ? ? ??? ???? ??? ?? ???????. ??? ?? ??? ?? ??? ??? ????? ?? React? ??? ???? ??? ?? ????.

????? React ?????? ?? ??? ?? ??? ???? ?? ????? ??? ?? ?? ? ?????? ??? ? ?? ?? ??? ?? ??? ????. ? ?? ?? ??? ? ? ????? ???? ??? ??? ? ?????? ????.

? ??? React?? ?? ??? ?? ?? ?? : ??? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!