Bootstrap ? React? ???? ?? ? ? ?? ????? ???? ??? ?????? Bootstrap? CSS ??? ??? React? ??? ????? ???? ????? ???? ?? ??? ?? ? ????. ?? ???? ??? ?????. 1) ?? ???? CSS ?? ?? ?? ???? ???? ??? ??? ?? ??; 2) ??? ??? ???? ?? React? ?? ??? ????; 3) ??? ????? ?? ??? ?? ?? ??? ?????; 4) React? ?? ? ?? ???? JavaScript ?? ??? ???? ?? ?????? ????.

??

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

?? ???? React? ??? ??? ?? ???? ?? ????? ? ? ????. ??? ??? CSS ??? ??? ???? ??, ??? ???? ?? ?? ?? ???? ?????. ? ??? ???? ??? ??? ?? ???? ??? ??? ?? ? ? ?? ????? ??? ?? ??? ????? ? ? ????.

?? ?? ??

Bootstrap? ???? ???? ?? ? ? ???? ?? ? ? ??? ??? ?? ?? CSS ??? ?????. ?? ?? ? CSS ??? ??? JavaScript ?? ?? ??? ???? ??? ??? ?? ?? ????? ?? ??????. React? Facebook?? ?? ? JavaScript ?????? ??? ????? ??? ??? ???. React? ?? ??? ?? ?? ?????. ? ?? ??? ????? ??? ? ? ???? ??? ?? ?? ? ??? ?? ???? ????.

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

?? ?? ?? ?? ??

?? ???? ??? ??

Bootstrap? React? ??? ?? Bootstrap? CSS ???? ???? Style React ?? ??? ???? ? ?????. ? ???? ??? ??? CSS ??? ???? ???? ??? Bootstrap? ?? ? ???? ??? ? ??? ????. ??? React? ?? ?? ????? ???? ?? ??? ???? ??? ?? ??? ?? ?? ? ? ????.

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

'React'?? React React;
'?? ???/dist/css/bootstrap.min.css';
<p>const buttoncomponent = () => {
?? (
<button classname="btn btn-primary"> me </button>? ??????
);
};</p><p> ?? ?? ??? ????;</p>

? ???? ?? ???? CSS ??? ?? ?? btn ? btn-primary ???? ???? ?? ?? ??? ???????. ??? ?? ???? ??? ???? ?? ?????.

?? ??

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

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

??? ?

?? ??

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

'React'?? React React;
'?? ???/dist/css/bootstrap.min.css';
<p>const navbar = () => {
?? (
<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>
</button></nav>
);
};</p><p> ?? ?? Navbar;</p>

? ???? Bootstrap? navbar ???? ???? ?? ? ?? ?? ?? ????. navbar-expand-lg ???? ???? ?? ?? ???? ????? ??? ???? ??? ??? ????? ? ? ????.

?? ??

?? ?? ?????? React? ?? ? ?? ???? JavaScript ?? ??? ???? ?? ??? ?????? ?? ? ????. ?? ??, useState ??? ???? ?? ??? ??? ???? ?? ??? ?? ?? ?? ??? ???? ?? ?? ????.

import React, {usestate} 'react';
'?? ???/dist/css/bootstrap.min.css';
<p>const modalexample = () => {
const [showmodal, setshowmodal] = usestate (false);</p><p> const handleOpenModal = () => setShowModal (true);
const handleclosemodal = () => setshowmodal (false);</p><p> ?? (
</p><div>

?? ??? ??????
??><pre class='brush:php;toolbar:false;'> & lt; div classname = {`modal $ {showmodal? &#39;show&#39;: &#39;&#39;}} ??? = {{display : showmodal? &#39;block&#39;: &#39;none&#39;}} tabindex = "-1"role = "??"& gt;
    & lt; div classname = "modal-dialog"robile = "document"& gt;
      & lt; div classname = "Modal-Content"& gt;
        & lt; div classname = "Modal-Header"& gt;
          & lt; h5 classname = "modal-title"& gt; modal title & lt;/h5 & gt;
          & lt; button type = "button"className = "close"onclick = {HandleClosemodal} & gt;
            & lt; span aria-hidden = "true"& gt;/lt;/span & gt;
          & lt;/button & gt;
        & lt;/div & gt;
        & lt; div classname = "modal-body"& gt;
          & lt; p & gt; ?? ?? ???? ??? ??. & lt;/p & gt;
        & lt;/div & gt;
        & lt; div classname = "modal-footer"& gt;
          & lt; button type = "button"classname = "btn btn-secondary"onclick = {handleclosemodal} & gt; close & lt;/button & gt;
          & lt; button type = "button"classname = "btn btn-primary"& gt; ?? ?? & lt;/button & gt;
        & lt;/div & gt;
      & lt;/div & gt;
    & lt;/div & gt;
  & lt;/div & gt;
& lt;/div & gt;

); };

?? Modalexample ????;

? ???? useState ??? ???? ?? ??? ????? ??? ???? ?? ???? ?? ?? ?? ??? ???? ?? ?? ?? ????. ? ???? ??? ??? ?????? ??? React? Bootstrap? ??? ?? ?????.

???? ?? ? ??? ?

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

1. ??? ?? : ??? ?? ??? ???? ??? ?? ???? ???? ????? ??? ????? ??? ? ????. ?? ??? ?? ??? ? CSS ?? CSS ??? ???? ?? ??? ???? ???? ?? ????. ?? Bootstrap? ??? ?? ?? ??? ???? ??? ??? ?? ????? ??? ?? ???? ?? ? ????.

2. ?? ?? ??? ?? : React??? ?? ??? ???? ?? ??? ????? ? ????. ?? ??? ???? ????? ?? ?? ?? ?? ??? ??? ???? ???????? ??????. ??, ?? ??? ???? ?? (? : componentDidMount ?? useEffect )? ???? ???? ?? ??? ??? ???? ??????????.

?? ??? ? ?? ??

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

• ??????? : ???? ?? ??? ????? ???? ?????? ???? ??? ??? ?? ??? ??? ?? ????? ?? ????. Webpack? ?? ??? ?? ??? ??? ??? ? ????.

• ?? ?? ??? ??? : React?? ?? ??? ??? ??? ??? ??? ?? ??? ????. ?? ?? ???? ?????? React.memo ?? useMemo ??? ???? ???? ? ???? ?? ? ????. ??, shouldComponentUpdate ??? ???? ??? ?? ??? ??? ??? ???? ??? ??? ? ? ????.

• ?? ??? ? ?? ?? : ??? ??? ? ?? ?? ??? ? ?? ??? ??????. ???? ?? ?? ??? ?? ??? ???? ??? ??? ???? ??? ?? ???? ?????. ??? ?? ??? ???? ??? ?????? ??? ?? ?? ? ??? ????.

?? ???????? ?? ???? React? ??? ????? ???? ? ?? ????? ???? ???? ? ??? ? ? ????. ? ??? ?? ? ?? ??? ? ?? ??? ???? ?? ??? ?????? ??? ??? ????????. ??? ??? ??? ?? ???? ??? ? ? ??? ????. ??? ??? ?????!