Skip to main content

Component ↔ 🧱Composable code to Encapsulate, Reuse & return React Element Fiber via JSX

Source: Components and Props – React

FC​

function to return UI via JSX. Pass propsfor dynamic input. add state via Hook

CC​

React class Instance extends React.Component, provides render() Method to return UI, manage state & perform side effects on Lifecycle Methods

props​

frozen Object of properties; passed as dynamic input from Parent Component to children

state​

persistent Snapshot of infothat App can access at given point in time

Component Lifecycle

Server Component vs Client Component​

how to decide when to use client or server components?

Client Component​

FC to render on Client dynamically

Server Component​

FC to Server Side Render on Backend & serve Static Content to Thin Client

(new) Render Cycle with [<span data-tooltip-id="preview__HfrPqviLa32xMJJxp">Fiber</span>](fiber)

_structure of component_

What are Components used for?

Component Design Flow

References​

  1. Composable ↔ (property) of Component (or any general entity) being self-contained, nestable & portable, easily composed into Composite Components

  2. Composite Component ↔ Component contains another Component

  3. Child Component ↔ Component nest within Component

  4. Parent Component ↔ Composite Component wrap other Component

  5. Component Hierarchy ↔ tree-like relationship of Component to structure data flow

  6. Component Relationship ↔ A direct parent-child relationship of Component with unidirectional data-flow

  7. HOC ↔ Component to modify/enhance other Component

  8. Component State ↔ mechanism for storing values inside Component over time

  9. /src/components/App.js ↔ root JS file to define App FC to import other Components

  10. /src/index.js ↔ root .js file as starting point app, imports & renders App Component to /public/index.html

  11. this.props ↔ frozen object for accessing properties inside a Component

  12. composability ↔ code reuse & composability well-supported in both Component types

  13. Pure Component ↔ stateless Component that always renders same based on same props input.

  14. UI state ↔ current state of UI Component; intermittent data to help render app that's not persisted

  15. Effect Hook ↔ (typeof) Hook to run Effect inside Component at different stages of Component Lifecycle

  16. useMemo() ↔ Memoizing Hook to Memoize entire Component, some JSX or props, based on Deps Array change

  17. Initial State ↔ value of Variable/property on first run of Component

  18. Uncontrolled Component ↔ Component with state manage by DOM API NOT ReactDOM

  19. Controlled Component ↔ Component with state manage by ReactDOM

  20. Updater Function ↔ function call by Component to update state value

  21. /public/index.html ↔ root HTML Web Page to serve App Component, entry point for Browser

  22. Component Based Architecture ↔ (Paradigm) to visualize UI as Component to architect (DOS (Design Organize Structure )) Apps