Overview

React component

Props object

useState

useRef

useEffect

React

# Overview

<div class="bookHeroImage"  style="border: currentColor .5px solid;padding: 32px;border-radius: 8px;margin: 8px 0;"><svg style="margin:auto;" id="Layer_2"  height="110px" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.72 53.91">
  <g id="Layer_1-2" data-name="Layer 1">
    <g>
      <circle cx="29.62" cy="26.66" r="5.64" fill="#087ea4"/>
      <g>
        <ellipse cx="29.62" cy="26.66" rx="28.21" ry="12.7" fill="none" stroke="#087ea4" stroke-width="2.82"/>
        <ellipse cx="29.62" cy="26.66" rx="12.7" ry="28.21" transform="translate(-9.36 18.38) rotate(-30)" fill="none" stroke="#087ea4" stroke-miterlimit="4" stroke-width="2.82"/>
        <ellipse cx="29.62" cy="26.66" rx="28.21" ry="12.7" transform="translate(-8.28 38.98) rotate(-60)" fill="none" stroke="#087ea4" stroke-miterlimit="4" stroke-width="2.82"/>
      </g>
    </g>
    <g>
      <rect x="67.76" y="5.91" width="134.96" height="48" fill="none"/>
      <path d="M72.42,40.95V7.35h14.38c4.21,0,7.36.95,9.46,2.84s3.14,4.45,3.14,7.67c0,2.43-.6,4.5-1.8,6.19-1.2,1.7-3.01,2.9-5.42,3.62,1.46,2.06,2.88,4.21,4.27,6.43,1.39,2.22,2.73,4.5,4.01,6.84h-5.88c-1.17-2.27-2.4-4.49-3.68-6.65-1.29-2.16-2.55-4.14-3.78-5.93h-9.65v12.58h-5.04ZM86.31,12.03h-8.86v11.76h8.86c2.72,0,4.72-.48,6-1.45,1.28-.97,1.92-2.44,1.92-4.43s-.64-3.46-1.92-4.43c-1.28-.97-3.28-1.45-6-1.45Z" fill="#353947"/>
      <path d="M115.4,41.53c-2.3,0-4.32-.53-6.06-1.58-1.74-1.06-3.09-2.53-4.06-4.42-.97-1.89-1.45-4.07-1.45-6.55s.48-4.67,1.45-6.56c.97-1.9,2.32-3.38,4.06-4.44,1.74-1.06,3.76-1.6,6.06-1.6h.53c2.1,0,3.94.52,5.53,1.55,1.59,1.03,2.84,2.52,3.73,4.46s1.34,4.28,1.34,7.02v1.46h-17.74c.29,1.97,1.03,3.52,2.22,4.64s2.75,1.69,4.67,1.69h.48c1.15,0,2.26-.24,3.31-.71,1.06-.47,1.94-1.11,2.66-1.91l2.95,3.12c-1.09,1.17-2.43,2.1-4.02,2.78-1.59.69-3.31,1.03-5.15,1.03h-.53ZM115.26,20.69c-1.71,0-3.14.56-4.28,1.69-1.14,1.13-1.87,2.67-2.17,4.62h12.91c-.14-1.78-.72-3.27-1.74-4.49-1.02-1.22-2.43-1.82-4.24-1.82h-.48Z" fill="#353947"/>
      <path d="M138.68,41.43c-2.53,0-4.49-.65-5.89-1.96-1.4-1.3-2.1-3.02-2.1-5.15s.79-3.88,2.36-5.3c1.58-1.42,4.09-2.14,7.55-2.14h6.53v-.07c0-4.03-1.86-6.05-5.57-6.05-1.55,0-2.86.28-3.92.84-1.06.56-1.92,1.34-2.58,2.35l-3.29-2.66c1.02-1.58,2.37-2.8,4.04-3.65,1.67-.85,3.57-1.27,5.7-1.27h.53c2.94,0,5.31.85,7.1,2.54,1.79,1.7,2.69,4.23,2.69,7.61v14.42h-4.61v-3.91c-.93,1.41-2.12,2.49-3.58,3.25s-3.11,1.14-4.97,1.14ZM139.74,37.16c1.86,0,3.4-.42,4.63-1.26,1.23-.84,2.15-1.98,2.76-3.42v-1.82h-6.34c-1.89,0-3.24.3-4.04.9-.81.6-1.21,1.41-1.21,2.44,0,2.11,1.4,3.17,4.2,3.17Z" fill="#353947"/>
      <path d="M168.94,41.53c-2.3,0-4.34-.5-6.12-1.51s-3.16-2.45-4.16-4.33c-1-1.88-1.5-4.12-1.5-6.71s.5-4.85,1.49-6.73c.99-1.88,2.37-3.33,4.14-4.34s3.82-1.52,6.16-1.52h.53c1.86,0,3.61.48,5.27,1.43,1.66.95,3,2.26,4.02,3.92l-3.72,2.59c-.69-1.09-1.51-1.94-2.47-2.56-.96-.62-2.05-.92-3.26-.92h-.48c-2.08,0-3.72.73-4.91,2.2-1.19,1.46-1.79,3.44-1.79,5.92s.6,4.43,1.79,5.9c1.19,1.47,2.83,2.21,4.91,2.21h.48c1.22,0,2.34-.27,3.36-.82,1.02-.54,1.9-1.27,2.64-2.18l3.46,2.93c-1.07,1.41-2.42,2.52-4.04,3.32-1.62.81-3.37,1.21-5.24,1.21h-.53Z" fill="#353947"/>
      <path d="M194.81,41.26c-2.85,0-5.02-.72-6.5-2.16-1.49-1.44-2.23-3.66-2.23-6.65v-11.33h-4.7v-4.18h4.7v-7.15h4.8v7.15h8.09v4.18h-8.09v10.68c0,1.89.39,3.2,1.18,3.94.78.74,1.94,1.1,3.48,1.1.74,0,1.4-.03,1.98-.1.58-.06,1.19-.14,1.81-.24v4.2c-.64.16-1.36.29-2.16.4s-1.58.16-2.35.16Z" fill="#353947"/>
    </g>
  </g>
</svg></div>

### benefits

-   divide the UI codebase into individual components.
-   combine HTML-like syntax and Javascript into a single file (JSX/TSX).
-   consume components provided by third-party libraries.
-   entrust React to manage the DOM and keep it in sync with the data and state.

