90 docs tagged with "React Concepts"

!deprecated createClass method. Topics on: !deprecated via create-react-class module. Read more: React, React Concepts, Component Based Architecture, Component,

!refactor class with non-pure method. Topics on: when helper method calls this.props with no arguments, need to modify helper function into a pure function, OR

!refactor Class with pure helper. Topics on: !recall class method can be moved outside CC, !convention keep utility helper function outside FC. Read more: React

!refactor constructor(props). Topics on: constructor(props) only called once in CC lifetime, useMemo to Memoization for rerender. Read more: React, React Concep

!refactor Render only. Topics on: render() becomes return (...JSX), destructure props. Read more: React, React Concepts, Component Based Architecture, Component

'use client' is defined as: (Next 13) Directive to opt-in to Client Component. Topics on: . Read more: React, React Concepts, Component Based Architecture, Comp

(new) Render Cycle with Fiber. Topics on: Render Phase, Commit Phase. Read more: React, React Concepts, Component Based Architecture, Component, New Render Cycl

App Data is defined as: data that user is accessing. Topics on: normally stored on global level in Component Hierarchy. Read more: React, React Concepts, Compon

Backing Instance is defined as: Object (created in memory) to store & access data. Topics on: created React class instances to track changes over time, React El

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

Child Component is defined as: Component nest within Component. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, Structur

children is defined as: special placeholder props to nest JSX. Topics on: access via this.props.children. Read more: React, React Concepts, Component Based Arch

Client Component is defined as: FC to render on Client dynamically. Topics on: 'use client'. Read more: React, React Concepts, Component Based Architecture, Com

Client Component > Server Component. Topics on: to make SPA, for compat, for old codebase. Read more: React, React Concepts, Component Based Architecture, Compo

Commit Phase is defined as: (process) to apply UI change to DOM API (in one Sync shot). Topics on: Commit Phase uses Time-Slicing to split work into chunks. R

Component is defined as: 🧱Composable code to Encapsulation, DRY & return React Element Fiber via JSX. Topics on: FC, CC, props, state, Component Lifecycle, Ser

Component Based Architecture is defined as: (Paradigm) to visualize UI as Component to architect (DOS) App. Topics on: DOS, Component. Read more: React, React C

Component Design Flow. Topics on: shape UI by app data, decompose (split) elements into (reusable) Components - ideally highly repetitive elements, group Compo

Component Hierarchy is defined as: tree-like relationship of Component to structure data flow. Topics on: Component Composition, Composition Vs Inheritance, Com

Component Lifecycle. Topics on: FC will only render when, Render, Mount, Unmount, Re-render, Render Props, !deprecated CC Lifecycle Method, Most Browser render

Component Relationship is defined as: A direct parent-child relationship of Component with unidirectional data-flow. Topics on: Parent Component, Child Componen

Component State is defined as: mechanism for storing values inside Component over time. Topics on: App Data, UI state, Form Data, How to arrange state, Componen

Component State in FC vs CC. Topics on: how JS Syntax varies for FC vs CC. Read more: React, React Concepts, Component Based Architecture, Component, State, Com

Component structure diagram. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, Structure Of Component|FullStack Wiki by RJ

componentWillMount(). Topics on: UNSAFE_componentWillMount(). Read more: React, React Concepts, Component Based Architecture, Component, CC, Declare A Class Wit

componentWillReceiveProps() is defined as: . Topics on: UNSAFE_componentWillReceiveProps(). Read more: React, React Concepts, Component Based Architecture, Comp

componentWillUpdate() is defined as: . Topics on: UNSAFE_componentWillUpdate(). Read more: React, React Concepts, Component Based Architecture, Component, CC, D

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

Composite Component is defined as: Component contains another Component. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component

constructor(props). Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, CC, Declare A Class With Props |FullStack Wiki by RJ

Controlled Component is defined as: Component with state manage by ReactDOM. Topics on: . Read more: React, React Concepts, Component Based Architecture, Compon

declare a class with props. Topics on: React.Component, React.PureComponent, constructor(props), super(props), this.state, Must call this.state inside construct

Diffing is defined as: React Heuristic Algorithm to reconcile change in state vs view & handle update to DOM API. Topics on: internal state = VDOM, view = DOM A

DOM Abstractions. Topics on: Synthetic Event, Synthetic Event is React API to standardize events since events are not (currently) part of core JS & Browser vend

DOS is defined as: Design Organize Structure. Topics on: . Read more: React, React Concepts, Component Based Architecture, DOS|FullStack Wiki by Roger J

Error Boundary is defined as: fallback mechanism for to handle Exception in child component. Topics on: used to respond to potential unhandled errors in comple

FC is defined as: function to return UI via JSX. Pass propsfor dynamic input. add state via Hook. Topics on: since React 16.8 FC with Hooks are more powerful th

FC Advantages over CC. Topics on: Compact, Readabilty, Purity, Simplicity, Testability, Popularity. Read more: React, React Concepts, Component Based Architectu

FC Design Pattern/Conventions. Topics on: destructure props in Function Signature of FC, set Parameter Default Value for omitted attributes in FC, !convention t

FC will only render when. Topics on: Component mount, Parent Component re-renders, Hook (or state) update. Read more: React, React Concepts, Component Based Arc

Fiber is defined as: internal React Object to rep each Node of DOM Tree. Topics on: Fiber acts as unit of work in Render Phase & Commit Phase, Fiber replaces Re

FPS is defined as: Frames Per Second. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, Component Lifecycle, FPS| Dev Wiki

HOC is defined as: Component to modify/enhance other Component. Topics on: sometimes does not render() anything,. Read more: React, React Concepts, Component Ba

Hook (or state) update. Topics on: should store higher-level input info, use boolean flag state enables cleaner data flow, Mutate DOM Directly. Read more: React

how JS Syntax varies for FC vs CC. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, State, Component State, Component Sta

How to arrange state. Topics on: state should be kept closer to Component that needs it, state can be stored in either Component, Parent Component or any Ascend

Immutable data structure. Topics on: data structure with persistent versioning making copies of state to keep track of changes over time, JS doesn't support imm

Immutable state. Topics on: immutable state is accessed via this.props for class components, state that cannot be changed after it is created. Read more: React,

Lifecycle Method is defined as: method to perform Effect at specific stage of Component Lifecycle. Topics on: componentDidUpdate(), componentDidMount(), compone

Managing App-wide state. Topics on: pass state from parent by setting props on child, receive state from parent as prop, receive updater function from parent as

Minimalist is defined as: React focus to UI Primitive, defer other design concerns to React Stack. Topics on: not strongly opinionated like other UI frameworks

Mount is defined as: (process) to add UI to DOM API. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, Component Lifecycle

mutable data structure. Topics on: transient data structure supporting only single version over time, overwritten by updates. Read more: React, React Concepts,

mutable state. Topics on: state that can change after it is created, mutable state is accessed via this.state property of class instance. Read more: React, Reac

Optional properties of components. Topics on: PropTypes, displayName, defaultProps, contextTypes. Read more: React, React Concepts, Component Based Architecture

Parent Component is defined as: Composite Component wrap other Component. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component

Parent Component re-renders. Topics on: even pure components will re-render, if its parent component re-renders.. Read more: React, React Concepts, Component Ba

props is defined as: frozen Object of properties; passed as dynamic input from Parent Component to children. Topics on: props are immutable within Component via

PropTypes. Topics on: type evaluation for props entering component in dev mode, Validation of property types, Validator, prop-types library, needed when using T

Pure Component is defined as: stateless Component that always renders same based on same props input.. Topics on: No state to store changes = No Side Effect. Re

React Concepts is defined as: Definitions on React Concepts, Paradigm & Comparisons to other frameworks. Topics on: Minimalist, High Compat, Declarative, Unidir

React diff 2 assumptions:. Topics on: Elements of different type produce different trees, Elements with key prop are Stable Variable. Read more: React, React Co

React Element is defined as: immutable stateless building blocks of React apps, returned by components. Topics on: lightweight stateless immutable primitive? in

React vs Other Frameworks. Topics on: Angular more opinionated, complete fullstack design solutions (for design data fetch, forms, routing, deps injection, inte

React.Component is defined as: base Abstract Class that provides render() method to return React Element(s), state & Lifecycle Methods. Topics on: !deprecated c

React.PureComponent. Topics on: base class. Read more: React, React Concepts, Component Based Architecture, Component, CC, Declare A Class With Props | Dev Wiki

ReactDOM is defined as: Renderer for React, to handle DOM API updates. Topics on: Renderer. Read more: React, React Concepts, VDOM, React DOM, Renderer, DOM A

Reconciliation is defined as: (process) (before Commit Phase) to compare Fiber stored in previous update vs new render. Topics on: to efficiently decide which u

Refactoring CC to FC. Topics on: !refactor Render only, !refactor Class with pure helper, !refactor class with non-pure method, !refactor constructor(props), !r

Render Phase is defined as: (process) to Async check all elements, one by one, collect changes. Topics on: processes each Fiber as unit of work via interal func

Render Props is defined as: Providing function as props to render JSX. Topics on: FC can just pass full FC as props instead of Render Props - to simply/optimize

Renderer. Topics on: . Read more: React, React Concepts, VDOM, React DOM, Renderer|FullStack Wiki by Roger J

Server Component is defined as: FC to Server Side Render on Backend & serve Static Resource to Thin Client. Topics on: . Read more: React, React Concepts, Compo

Server Component > Client Component?. Topics on: to reduce bundle size, to restrict code, to eliminate data fetch. Read more: React, React Concepts, Component B

Server Component vs Client Component is defined as: how to decide when to use client or server components?. Topics on: Client Component > Server Component, Serv

Stack Reconciler is defined as: deprecated Reconciliation Algorithm used for VDOM from React 15.. Topics on: . Read more: React, React Concepts, VDOM, Fiber, Re

state is defined as: persistent Snapshot of info that App can access at given point in time. Topics on: piece of memory stored insider a Fiber, Component State,

state can be mutable or immutable. Topics on: Immutable state, Immutable data structure, mutable data structure, mutable state. Read more: React, React Concepts

stateless is defined as: of Entity lacking state. Topics on: stateful Component can update itself based on internal triggers & therefore independent of its cont

structure of component. Topics on: Composable, Component structure diagram, uses JSX to describe UI to return as HTML, Component Hierarchy, React Element, Optio

Synthetic Event is defined as: Wrapper over event object for xplat browser compat. Topics on: . Read more: React, React Concepts, DOM Abstractions, Wrapper|Wiki

this.props is defined as: frozen object for accessing properties inside a Component. Topics on: this.props is immutable by using Object.freeze(). Read more: Rea

this.state is defined as: to initialize state in CC. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, CC, Declare A Class

UI state is defined as: current state of UI Component; intermittent data to help render app that's not persisted. Topics on: local variables inside Component. R

Uncontrolled Component is defined as: Component with state manage by DOM API NOT ReactDOM. Topics on: . Read more: React, React Concepts, Component Based Arch

Unmount is defined as: (process) to remove UI from DOM API. Topics on: . Read more: React, React Concepts, Component Based Architecture, Component, Component Li

Validation of property types. Topics on: will not break app, just warning in console log. Read more: React, React Concepts, Component Based Architecture, Compon

VDOM is defined as: Intermediate Abstraction layer between Source Code & DOM API , data structure to mirror DOM API comprised of Fiber (React Element). Topic

VDOM Diffing Flow. Topics on: Create & store VDOM & DOM Tree in Memory, Update state changes in VDOM, Reconciliation of VDOM vs DOM API. Read more: React, React

What are Components used for?. Topics on: Encapsulated units of functionality, uses properties & state to render UI output, Primary unit in React, allows design