Skip to main content

253 docs tagged with "React Stack"

View All Tags

_app.tsx

_app.tsx is defined as: ( Next 12 ) to share global CSS stylesheet, layout or config. Topics on: . Read more: React, React Stack, Nextjs, Next 12|FullStack Wiki

_category_.json

_category_.json. Topics on: . Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structure, Docs, Folder

_document.tsx

_document.tsx. Topics on: . Read more: React, React Stack, Nextjs, Next 12|FullStack Wiki by Roger J

_Folder

_Folder. Topics on: _category_.json, _mypage.md. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structu

_mypage.md

_mypage.md. Topics on: . Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structure, Docs, Folder | Wiki

:::caution

:::caution is defined as: . Topics on: . Read more: React, React Stack, Docusaurus, Admonitions Callout Blocks, Caution|FullStack Wiki by Roger J

:::danger

:::danger is defined as: danger callout. Topics on: . Read more: React, React Stack, Docusaurus, Admonitions Callout Blocks, Danger|FullStack Wiki by Roger J

:::tip

:::tip is defined as: tip Admonitions Callout Blocks. Topics on: . Read more: React, React Stack, Docusaurus, Admonitions Callout Blocks, Tip | Full-Stack Wiki

.storybook

.storybook is defined as: dotconfig dir for storybook settings. Topics on: .storybook/preview.js, .storybook/main.js. Read more: React, React Stack, Storybook,

.storybook/main.js

.storybook/main.js is defined as: storybook config file to set Glob Pattern to detect new stories Storybook Addon & use index.css. Topics on: expo. Read more: R

.storybook/preview.js

.storybook/preview.js is defined as: to set parameters to control storybook addon/feature behavior, actions. Topics on: sb parameters. Read more: React, React S

@apollo/client

@apollo/client is defined as: JS state management lib to manage local/remote data via Declarative GraphQL Data Fetch. Topics on: agnostic. Read more: React, Rea

@docusaurus/plugin-ideal-image

@docusaurus/plugin-ideal-image is defined as: docu plugin extends <img> to autogen placeholder for Lazy Loading & resized images variants for responsive display

@docusaurus/plugin-sitemap

@docusaurus/plugin-sitemap is defined as: docu plugin to gen sitemap for site for SEO Web Crawler | pack with classic preset. Topics on: @docusaurus/plugin-site

@monaco-editor/react

@monaco-editor/react. Topics on: install 3.7.5, Monaco Editor React Component, <MonacoEditor>, props, easy setup! out of box supports:, Pass in config to underl

@reduxjs/toolkit

@reduxjs/toolkit is defined as: Official Opinionated redux Toolset Lib with simplified improved syntax. Topics on: Thoughts on RTK Migration, @reduxjs/toolkit/q

@reduxjs/toolkit/query

@reduxjs/toolkit/query is defined as: @reduxjs/toolkit query API to Data Fetch/Caching & replace Thunk. Topics on: . Read more: React, React Stack, Redux, Redux

@storybook/addon-a11y

@storybook/addon-a11y is defined as: official storybook Plugin to audit FC vs WCAG guidelines for max Accessibility & flag any violations. Topics on: 'Elements

/app

/app is defined as: ( Next 13 ) dir to export Page, allows Colocation. Topics on: /app replace /pages ( Next 12 ) & default to Server Component. Read more: Reac

/node_modules

/node_modules is defined as: dir with all Dependency & their sub-Dependency & their sub-sub-Dependency & .... Topics on: . Read more: React, React Stack, CRA, A

/pages

/pages is defined as: ( Next 12 ) dir to export default Page. Topics on: [id].tsx, /pages/api. Read more: React, React Stack, Nextjs, Next 12, Pages, Page| Wiki

/pages/api

/pages/api is defined as: dir to map to API endpoint, instead of Page for server-side bundle. Topics on: API Route Helpers. Read more: React, React Stack, Nextj

/public

/public is defined as: dir to serve Static Content. Topics on: /public/index.html. Read more: React, React Stack, CRA, App Skeleton, Public, Static Content|Wiki

/public/index.html

/public/index.html is defined as: root HTML Web Page to serve App Component, entry point for Browser. Topics on: <div id='root'></div>. Read more: React, React

/src

/src is defined as: dir to add Source Code & other files to later Bundler into single Package. Topics on: /src/main.tsx, /src/index.js, /src/components/App.js.

/src/components/App.js

/src/components/App.js is defined as: root JS file to define App FC to import other Components. Topics on: !deprecated import React no longer required for JSX.

<BrowserRouter>

<BrowserRouter> is defined as: Provider for global access to react-router-dom in App. Topics on: Why does react-router-dom dev insist to rename BrowserRouter as

<div id='root'></div>

<div id='root'></div> is defined as: root container to render React App into. Topics on: why not just render directly to <body>?. Read more: React, React Stack,

<FormSpy/>

<FormSpy/>. Topics on: Less renders. Read more: React, React Stack, Redux, Redux Form, React Final Form, Upgrades|FullStack Wiki by Roger J

<Head>

<Head> is defined as: ( Next 12 ) FC extends <head>. Topics on: . Read more: React, React Stack, Nextjs, Next Component, Head, Next 12, FC|FullStack Wiki by RJ

<Image>

<Image> is defined as: ( Next 12 ) FC extends <img> with Prefetch/Lazy Loading & ✨img optimization to burn your free quota. Topics on: unoptimized. Read more: R

<Link>

<Link> is defined as: React Router FC to provide link to <Route>; extends <a>. Topics on: common to Wrapper <Link> with <li> for block format, state. Read more:

<MonacoEditor>

<MonacoEditor> is defined as: Monaco Editor FC. Topics on: theme, language, value. Read more: React, React Stack, Monaco Editor React, Monaco Editor, FC | Wiki

<Navigate>

<Navigate> is defined as: React Router FC to Declarative trigger navigate. Topics on: state. Read more: React, React Stack, React Router Dom, React Router API,

<Route>

<Route> is defined as: React Router FC to map route for element FC to path. Topics on: <Route> must renders element || null, element, path. Read more: React, Re

<Routes>

<Routes> is defined as: React Router FC to auto-handle multiple <Route>, Nest Route, etc. Topics on: <Routes> replaces <Switch> from react-router v5, <Route>. R

<Split>

<Split> is defined as: react-split FC to wrap children with options. Topics on: . Read more: React, React Stack, React Split, FC|FullStack Wiki by Roger J

<Switch>

<Switch>. Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router V 5, Switch|FullStack Wiki by Roger J

<Tabs>

<Tabs> is defined as: UI to show tab toggle. Topics on: . Read more: React, React Stack, Docusaurus, Docusaurus Features, Built In Docusaurus UI FC|web-Dev Wiki

Action

Action is defined as: object with type & payload info to pass Reducer to update state. Topics on: type, payload. Read more: React, React Stack, Redux, Redux Pat

actions

actions is defined as: mocked callback to handle storybook behavior via actions panel in storybook UI Storybook Concurrent Explorer. Topics on: . Read more: Rea

add all reducers

add all reducers. Topics on: add combined reducers to, add individual reducers to. Read more: React, React Stack, Redux, Redux Folder Structure, Src State OR Sr

Admonitions Callout Blocks

Admonitions Callout Blocks is defined as: where is styling for :::tip and :::danger :::caution defined?! - Callout blocks to draw extra attention to specific c

app skeleton

app skeleton. Topics on: /node_modules, /public, /src, package.json, package-lock.json. Read more: React, React Stack, CRA, App Skeleton|FullStack Wiki by Roger

Boilerplate

Boilerplate is defined as: verbose repetitive Source Code snippets, to be obselete by AI..!. Topics on: . Read more: React, React Stack, CRA, Boilerplate, Sourc

built-in docusaurus UI FC

built-in docusaurus UI FC. Topics on: <Tabs>. Read more: React, React Stack, Docusaurus, Docusaurus Features, Built In Docusaurus UI FC |FullStack Wiki by Roger

changefreq

changefreq is defined as: to set frequency for crawler to re-index 'always', 'hourly', 'daily', 'weekly', 'monthly', 'yearly', 'never'. Topics on: 'always'. Rea

Chromatic

Chromatic is defined as: tool to automate storybook integrate CI git tooling. Freemium. Topics on: Free for up to 5k snapshots/month, UI/visual Regression Testi

classic

classic is defined as: preset to allow only the following fields: debug, docs, blog, pages, sitemap, theme, googleAnalytics, gtag. Topics on: classic folder str

classic folder structure

classic folder structure. Topics on: docs. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structure

Classic Redux Flow

Classic Redux Flow is defined as: older outdated pattern to set up redux. Topics on: Install deps, Create types.js in ../actions, Create reducer in ../reducers,

Code line/block highlighting

Code line/block highlighting. Topics on: // highlight-next-line, // highlight-start, // highlight-end. Read more: React, React Stack, Docusaurus, Docusaurus MDX

Colocation

Colocation is defined as: Next 13 /app can colocate all files. Topics on: . Read more: React, React Stack, Nextjs, Next 13, Colocation, App|FullStack Wiki by RJ

component

component is defined as: name of FC import name - must matc or nothing shows in Storybook Concurrent Explorer!. Topics on: . Read more: React, React Stack, Stor

config

config is defined as: section to edit docs site routing. Topics on: presets: []. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config| Dev Wiki

configureStore()

configureStore() is defined as: @reduxjs/toolkit to replace createStore. Topics on: . Read more: React, React Stack, Redux, Reduxjs Toolkit, Configure Store

connect mapStateToProps

connect mapStateToProps. Topics on: connect(null) when no state is passed. Read more: React, React Stack, Redux, React Redux, Redux Flow, Classic Redux Flow

CRA

CRA is defined as: CRAp Scaffolding Dev tool to gen new React project with app skeleton & Boilerplate. Topics on: app skeleton, Boilerplate, Local Dev Server, C

CRA NPM Commands

CRA NPM Commands. Topics on: npm start, npm run build, npm test, npm run eject. Read more: React, React Stack, CRA, CRA NPM Commands|FullStack Wiki by Roger J

CRA Templates

CRA Templates. Topics on: to import template for CRA, minimal template, typescript, minimal-typescript, minimal redux-typescript, react boilerplate. Read more:

create-docusaurus

create-docusaurus is defined as: to scaffold new docusaurus project. Topics on: npx create-docusaurus@latest _my_project classic --typescript, npx create-docusa

create-next-app

create-next-app is defined as: Next.js Scaffolding Dev tool with wizard setup. Topics on: . Read more: React, React Stack, Nextjs, Next Setup, Next Js, Scaffold

createSlice()

createSlice() is defined as: @reduxjs/toolkit to setup slice state with input { initialState, reducers object, name}. Topics on: to export actions from slice, e

createStore()

createStore() is defined as: OLD Redux API function to create new Redux Store Instance. Topics on: . Read more: React, React Stack, Redux, OLD Redux API, Functi

CSF

CSF is defined as: (standard) Component Story format based on ES Module. Topics on: . Read more: React, React Stack, Storybook, Story, CSF, ES Module | Dev Wiki

current working flow:

current working flow:. Topics on: downgrade react-scripts@4.0.3, initiate highlighter. Read more: React, React Stack, Monaco Editor React, Monaco Jsx Highlighte

Custom Link

Custom Link is defined as: to conditionally render. Topics on: . Read more: React, React Stack, React Router Dom, React Router Patterns |FullStack Wiki by Roger

decorators

decorators is defined as: to add Wrapper for Story, for inline CSS || Context Provider. Topics on: . Read more: React, React Stack, Storybook, Story, Wrapper, C

Disable Storybook telemetry

Disable Storybook telemetry is defined as: need to manually opt-out for every project😫. Topics on: add --disable-telemetry flag to every storybook run!. Read m

Dispatch

Dispatch is defined as: redux function to send Action object to Reducer. Topics on: . Read more: React, React Stack, Redux, Redux Concepts, Dispatch, Function,

Dispatch Function

Dispatch Function is defined as: function to Dispatch Action to Reducer. Topics on: . Read more: React, React Stack, Redux, Redux Pattern, Dispatch Function, Fu

docs

docs. Topics on: _Folder. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structure, Docs|FullStack Wiki

Docu Hooks

Docu Hooks. Topics on: useColorMode(), useThemeContext(). Read more: React, React Stack, Docusaurus, Docusaurus API|FullStack Wiki by Roger J

docu plugin

docu plugin is defined as: to extend docusaurus with new feat. Topics on: docusaurus-theme-search-typesense, @docusaurus/plugin-sitemap, @docusaurus/plugin-idea

docusaurus

docusaurus is defined as: React Stack SSG CMS for API docs as SPA with built-in Routing + MDX support. Topics on: docusaurus features, !use @docusaurus for v2+

Docusaurus API

Docusaurus API. Topics on: Docu Hooks. Read more: React, React Stack, Docusaurus, Docusaurus API|FullStack Wiki by Roger J

Docusaurus Codeblock

Docusaurus Codeblock is defined as: MDX syntax based on Prism, Prism React Renderer. Topics on: showLineNumbers, {a, b-c} showLineNumbers, MDX highlighting, Cod

Docusaurus concepts

Docusaurus concepts. Topics on: Document, Sidebar, Docusaurus file system. Read more: React, React Stack, Docusaurus, Docusaurus Concepts | FullStack Wiki by RJ

docusaurus features

docusaurus features. Topics on: docs file-based routing, darkmode, ONLY MD headers will be auto-add to RHS nav, built-in docusaurus UI FC, react-router+file-sys

Docusaurus file system

Docusaurus file system. Topics on: /docs, /blog, sidebars.js. Read more: React, React Stack, Docusaurus, Docusaurus Concepts, Docusaurus File System | Dev Wiki

Docusaurus MDX Syntax

Docusaurus MDX Syntax. Topics on: Docusaurus Codeblock. Read more: React, React Stack, Docusaurus, Docusaurus MDX Syntax|FullStack Wiki by Roger J

docusaurus pain fixes

docusaurus pain fixes. Topics on: speed up 2hr+ SSG build times for large sites!, don't delete node_modules/.cache - ie via docusaurs clear - unless serious bug

docusaurus-theme-search-typesense

docusaurus-theme-search-typesense is defined as: typesense Search UI FC docu plugin for docusaurus. Topics on: searchbar UI component is hardcoded to show top r

docusaurus.config.js

docusaurus.config.js is defined as: . Topics on: config. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs|FullStack Wiki by Roger J

doesn't work steps:

doesn't work steps:. Topics on: wasd, import dependencies for HL. Read more: React, React Stack, Monaco Editor React, Monaco Jsx Highlighter | Full-Stack Wiki

downgrade react-scripts@4.0.3

downgrade react-scripts@4.0.3. Topics on: v5+ throws error about Build module undefined!. Read more: React, React Stack, Monaco Editor React, Monaco Jsx Highlig

easy setup! out of box supports:

easy setup! out of box supports:. Topics on: code auto-complete and prompt, code syntax highlighting, fade out unused variables, linting, mini-map overview!. Re

Edge Cases

Edge Cases. Topics on: Verify hard-to-reach edge cases. Read more: React, React Stack, Storybook, Storybook Features|FullStack Wiki by Roger J

Edge Runtime

Edge Runtime is defined as: Runtime Environment to execute on Edge. Topics on: . Read more: React, React Stack, Nextjs, Next Concepts, Server Runtime, Edge Runt

element

element is defined as: <Route> props to attach JSX. Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router FC, Routes, Rou

error.tsx

error.tsx is defined as: ( Next 13 ) Page to export default UI on Trigger Error Boundary. Topics on: error.tsx is reserved name for Error UI for Next 13. Read m

extraReducers

extraReducers is defined as: to allow createSlice() to respond to other extenal type (action type not generated by itself). Topics on: External Action. Read mor

FCS

FCS is defined as: Fetch Cache Sync. Topics on: . Read more: React, React Stack, React Query, FCS|FullStack Wiki by Roger J

File System Router

File System Router is defined as: to define Routing by filepath struct; to map FC src path to route. Topics on: Page, Index Route, Nest Route, Shared Layout. Re

fix storybook errors

fix storybook errors. Topics on: Error could not find react-redux context value; please ensure the component is wrapped in a <Provider>, add react-redux Provide

Gatsby

Gatsby is defined as: SSG for pure blogs. Next.js alt for pure static sites. 412K vs next 3.5M WDL. GraphQL. Topics on: Docz. Read more: React, React Stack, SSG

getServerSideProps()

getServerSideProps() is defined as: async fn to run on Backend to pre-render on each request, to fetch async external data. Topics on: . Read more: React, React

getState()

getState(). Topics on: . Read more: React, React Stack, Redux, OLD Redux API|FullStack Wiki by Roger J

head.tsx

head.tsx is defined as: ( Next 13 ) Page to export default <head> for each Page Route. Topics on: head.tsx replace <Head> FC ( Next 12 ). Read more: React, Rea

History & Locations

History & Locations. Topics on: History Object, History Action, History Stack. Read more: React, React Stack, React Router Dom, React Router API, React Router V

History Action

History Action is defined as: URL change to History Stack; pop, push or replace. Topics on: RR listens for URL changes in History Object, whether History Action

History Object

History Object is defined as: React Router API Interface Object to Subscribe URL change & manipulate History Stack. Topics on: . Read more: React, React Stack,

History Stack

History Stack is defined as: Log of previous browsed locations, kept track by Browser. Topics on: React Router API subscribe to History Stack to enable Client R

immer

immer. Topics on: . Read more: React, React Stack|FullStack Wiki by Roger J

Incremental Adoption

Incremental Adoption is defined as: (feat) Next 12 compat with Next 13, can migrate individual Page from /pages to /app. Topics on: . Read more: React, React St

Initial State

Initial State is defined as: value of Variable/property on first run of Component. Topics on: . Read more: React, React Stack, Redux, Redux Pattern, Initial Sta

initState

initState is defined as: define init state Object to describe app. Topics on: . Read more: React, React Stack, Redux, Redux Concepts, Redux Reducer, Object|Wiki

install deps

install deps. Topics on: next 11+ uses webpack5 builder by default. Read more: React, React Stack, Storybook, Setup Storybook, Storybook Next 12 Setup| Dev Wiki

ISR

ISR is defined as: Incremental Static Regeneration scaling strat to serve skeleton & SSG on-demand per-page basis & keep update with set interval to prevent Sta

layout.tsx

layout.tsx is defined as: ( Next 13 ) Page to export default layout UI to share with children. Topics on: layout.tsx does not support passing props to children,

Lazy Load Routes

Lazy Load Routes is defined as: use Lazy() with route elements. Topics on: . Read more: React, React Stack, React Router Dom, React Router Patterns, Lazy | Wiki

Leaf

Leaf is defined as: Last Node in Subtree w/o children. Topics on: . Read more: React, React Stack, Nextjs, Next Concepts, Tree, Leaf, Subtree | Full-Stack Wiki

Live demo:

Live demo:. Topics on: ovvwzkzry9.codesandbox.io. Read more: React, React Stack, React Credit Cards, Live Demo|FullStack Wiki by Roger J

Live demo:

Live demo:. Topics on: nomcopter.github.io/react mosaic/. Read more: React, React Stack, React Mosaic, Live Demo|FullStack Wiki by Roger J

loading.tsx

loading.tsx is defined as: ( Next 13 ) Page to export default loading UI on Trigger Suspense Boundary. Topics on: loading.tsx is reserved name for Loading UI fo

Local Dev Server

Local Dev Server. Topics on: Needed because of CORS preventing local HTML file access to other domains, http://localhost:3000, npx serve, npx http-server. Read

Locations

Locations. Topics on: Location, Location State. Read more: React, React Stack, React Router Dom, React Router API, React Router V 5, RR Concepts| FullStack Wiki

mapStateToProps()

mapStateToProps() is defined as: . Topics on: . Read more: React, React Stack, Redux|FullStack Wiki by Roger J

Matching

Matching. Topics on: Match, Matches. Read more: React, React Stack, React Router Dom, React Router API, React Router V 5, RR Concepts|FullStack Wiki by Roger J

MDX highlighting

MDX highlighting. Topics on: # highlight-next-line. Read more: React, React Stack, Docusaurus, Docusaurus MDX Syntax, Docusaurus Codeblock |FullStack Wiki by RJ

Minimalist

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

Monaco Editor React Component

Monaco Editor React Component. Topics on: is a wrapper for actual Monaco Editor. Read more: React, React Stack, Monaco Editor React|FullStack Wiki by Roger J

monaco-jsx-highlighter

monaco-jsx-highlighter. Topics on: uses jscodeshift to parse JSX and find which parts to highlight, updated steps for highlighter:, current working flow:, doesn

Move Data Fetch to Server-Side

Move Data Fetch to Server-Side is defined as: ( Next 13 ) to Colocation Data Fetch ops in Server Component for Sync perf. Topics on: Next 13 Move Data Fetch to

Navigating

Navigating. Topics on: Outlet. Read more: React, React Stack, React Router Dom, React Router API, React Router V 5, RR Concepts|FullStack Wiki by Roger J

Nest Route

Nest Route. Topics on: . Read more: React, React Stack, Nextjs, Next Concepts, File System Router, Nest Route|FullStack Wiki by Roger J

Next 12

Next 12 is defined as: verion 12 of Next.js, deprecated as of October 25th, 2022. Topics on: /pages, /public, /(dir), _document.tsx, _app.tsx, getStaticPaths(),

Next 12 Migration

Next 12 Migration. Topics on: Incremental Adoption /app per Page, Transition to Server Component. Read more: React, React Stack, Nextjs, Next 13| FullStack Wiki

Next 13

Next 13 is defined as: version 13 of Next.js, beta, latest as of October 25th, 2022. Topics on: Incremental Adoption, Move Data Fetch to Server-Side, Colocation

Next Component

Next Component. Topics on: <Head>, <Script>, <Image>, <Link>. Read more: React, React Stack, Nextjs, Next Component|FullStack Wiki by Roger J

Next Concepts

Next Concepts is defined as: Next.js opinionated solutions to various fullstack design concerns. Topics on: Pre-render, Next Router, Tree, File System Router, S

Next Data Fetching

Next Data Fetching is defined as: Opinionated Design Patterns in Next.js for Data Fetch situations. Topics on: (default) Next.js requests are all Static Fetch,

Next Definition

Next Definition. Topics on: Next.js MIT License, Vercel. Read more: React, React Stack, Nextjs, Next Definition|FullStack Wiki by Roger J

Next Router

Next Router is defined as: built-in router for Next.js with specific opinionated Routing patterns. Topics on: . Read more: React, React Stack, Nextjs, Next Conc

Next Scripts

Next Scripts is defined as: package.json scripts for Next.js project. Topics on: next dev, next build, next start, next lint. Read more: React, React Stack, Nex

Next Setup

Next Setup. Topics on: Next Scripts, Next CLI, create-next-app, To add CSS, next-code-elimination-tool. Read more: React, React Stack, Nextjs, Next Setup | Wiki

Next.js

Next.js is defined as: fullstack React Stack for SSG & now official react team approval?! headless CMS. Topics on: Next 13, Next 12, Next Component, Next Concep

Nextra

Nextra is defined as: opinionated SSG solution for Next.js. Topics on: . Read more: React, React Stack, Nextjs, SSG, Next Js|FullStack Wiki by Roger J

not-found.tsx

not-found.tsx is defined as: ( Next 13 ) Page to export default UI for Catch All Route. Topics on: not-found.tsx is reserved name for Catch All Route in Next 13

npm run build

npm run build is defined as: to bundle App into final static output for production. Topics on: output files into /build folder. Read more: React, React Stack, C

npm start

npm start is defined as: start Local Dev Server & Hot Module Replacement to serve updated changes. Topics on: command runs continuously, stays active in Termina

OLD Redux API

OLD Redux API is defined as: named import or use Redux._reduxMethod. Topics on: createStore(), getState(). Read more: React, React Stack, Redux, OLD Redux API

On-demand Revalidation

On-demand Revalidation is defined as: (feat) to manually purge HTTP Caching for specific ISR Page. Topics on: On-demand Revalidation requires secret token to ac

opt-out of SB telementry

opt-out of SB telementry. Topics on: must manually opt-out for every setup! Designed to be annoying!, in storybook config element, run with --disable-telemetry

Page

Page is defined as: export default FC to display unique UI for Next.js File System Router. Topics on: /pages to export Page in Next 12, /app to export Page in N

page.tsx

page.tsx is defined as: Page export default UI for Next Router vs dirpath, default Server Component - else 'use client' opt-in. Topics on: Next 13 reserve page.

Pass in config to underlying editor

Pass in config to underlying editor. Topics on: hide code mini-map overview, add line-wrap to code. Read more: React, React Stack, Monaco Editor React| Dev Wiki

path

path is defined as: URL path to <Route>. Topics on: ':_id' '/settings/:_id', '/whatever/*', '/*'. Read more: React, React Stack, React Router Dom, React Router

payload

payload is defined as: to attach data to change state. Topics on: . Read more: React, React Stack, Redux, Redux Pattern, Action, Payload, State | FullStack Wiki

pop

pop is defined as: when user clicks back/forward button. Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router V 5, RR Co

Pre-render

Pre-render is defined as: (feat) to render HTML in advance for perf & SEO. Topics on: ISR, Server Side Render. Read more: React, React Stack, Nextjs, Next Conce

Predictable

Predictable is defined as: redux helps scale App with consistent behaviour by restict data flow into a predictable pattern of dispatch>reducer>state. Topics on:

presets: []

presets: [] is defined as: to set. Topics on: classic. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets|FullStack Wiki by Roger J

props

props. Topics on: Editor, Diff Editor - for comparing diff between 2 files, Controlled Editor - controlled component !deprecated?. Read more: React, React Stack

push

push is defined as: to add link entry to History Stack; trigger on click link or programatically navigate. Topics on: . Read more: React, React Stack, React Rou

react boilerplate

react boilerplate. Topics on: Redux + Saga, Styled-Components, ESLint, husky. Read more: React, React Stack, CRA, CRA Templates|FullStack Wiki by Roger J

React Developer Tools

React Developer Tools. Topics on: 'Highlight updates when components render'. Read more: React, React Stack, React Dev Tools|FullStack Wiki by Roger J

React DevTools

React DevTools is defined as: Browser Plugin to inspect React App (dev build only!) to view Component Hierarchy, props & state. Topics on: Element Selector Tool

React Final Form

React Final Form. Topics on: react-final-form flow, Upgrades. Read more: React, React Stack, Redux, Redux Form, React Final Form|FullStack Wiki by Roger J

React Router API

React Router API is defined as: v6 cur ver. Topics on: React Router FC, React Router Hook, react-router v5. Read more: React, React Stack, React Router Dom, Rea

React Router Custom hooks

React Router Custom hooks. Topics on: useHistory, useLocation, useParams, useRouteMatch. Read more: React, React Stack, React Router Dom, React Router API, Reac

React Router FC

React Router FC is defined as: React Router API prebuild FC. Topics on: <BrowserRouter>, <Routes>, <Outlet>, <Navigate>, <Link>. Read more: React, React Stack,

React Router Flow

React Router Flow. Topics on: install, import, Config routes, Link to navigate, useNavigate to redirect. Read more: React, React Stack, React Router Dom, React

React Router Hook

React Router Hook is defined as: React Router API Library Hook. Topics on: useSearchParams(), useLocation(), useParams(), useNavigate(), useRoutes(), useHistory

React Router Patterns

React Router Patterns is defined as: Design Pattern for react router & snippet examples. Topics on: Lazy Load Routes, Custom Link, Route Config, Recursive Route

React Stack

React Stack is defined as: Broader React Ecosystem, third party libraries & frameworks. Topics on: @apollo/client, @monaco-editor/react, CRA, docusaurus, esbuil

react-credit-cards

react-credit-cards is defined as: React Stack with CSS animated card payment UI form. 3Y abandonware 👎. Topics on: Live demo:. Read more: React, React Stack, R

react-icons

react-icons is defined as: React Stack with general emoji icon SVG graphics. Topics on: . Read more: React, React Stack, SVG|FullStack Wiki by Roger J

React-Live interactive editor

React-Live interactive editor. Topics on: must add @docusaurus/theme-common for theme-live-editor to work!, YUCK! pnpm bugs out for live-editor - use npm ins

react-markdown

react-markdown is defined as: React Stack FC Wrapper to render MDX extends with plugins. Topics on: react-markdown + syntax-highlighter. Read more: React, React

react-mosaic

react-mosaic is defined as: React Stack to show split window UI. Topics on: Live demo:. Read more: React, React Stack, React Mosaic, UI |FullStack Wiki by Roger

react-native

react-native is defined as: React Stack to build UI for mobile OS (Android & iOS). Topics on: React library for native mobile platforms. Read more: React, React

react-query

react-query is defined as: React Stack FCS data. Topics on: FCS. Read more: React, React Stack, React Query, FCS|FullStack Wiki by Roger J

react-redux

react-redux is defined as: sub-library with React Binding for redux. Topics on: Redux flow, redux-form flow, useDispatch(), useSelector(), react-redux at 6.5M w

react-router v5

react-router v5. Topics on: <Switch>, React Router Flow, withRouter() gives access to history object properties, RR concepts:, withRouter(), React Router Custom

react-router-dom

react-router-dom is defined as: React Lib for Routing Primitive to Client Routing & Server Side Render in Declarative Composable way. Topics on: react-router, R

react-split

react-split is defined as: React Stack to render 1-D split panel UI; react-wrapper for split.js. Topics on: <Split>. Read more: React, React Stack, React Split,

react-syntax-highlighter

react-syntax-highlighter is defined as: React Stack Syntax Highlighter to style code (highlight syntax, background, theme). Topics on: . Read more: React, React

recoil

recoil is defined as: react state management lib FB experimental FOSS project. Topics on: recoil 364K vs @reduxjs/toolkit 2.2M vs redux 8.8M Weekly Downloads.

Reduce

Reduce is defined as: (process) to generate new state based on current state & some Action payload. Topics on: . Read more: React, React Stack, Redux, Redux Pat

Reducer

Reducer is defined as: function to Reduce to new state value from Action input. Topics on: Reduce. Read more: React, React Stack, Redux, Redux Pattern, Reducer,

redux

redux is defined as: (Design Pattern) to colocate state in global external central store, to control data flow with predictable scalable pattern of Dispatch Fun

redux alternatives

redux alternatives. Topics on: MobX, React Query. Read more: React, React Stack, Redux|FullStack Wiki by Roger J

Redux Concepts

Redux Concepts. Topics on: Redux Store, Root Reducer, Redux Reducer, Dispatch, Subscriber, Redux Middleware. Read more: React, React Stack, Redux, Redux Concept

Redux Definition

Redux Definition. Topics on: Predictable, Centralized, Time-Travel, Standalone, Debuggable, Flexible. Read more: React, React Stack, Redux, Redux Definition

Redux flow

Redux flow. Topics on: Classic Redux Flow, Classic Redux with hooks, Redux Toolkit steps. Read more: React, React Stack, Redux, React Redux, Redux Flow|Dev Wiki

Redux Folder Structure

Redux Folder Structure. Topics on: src > state OR src > redux, Separate redux type to folder. Read more: React, React Stack, Redux, Redux Folder Structure| Wiki

Redux Form v8.3.0

Redux Form v8.3.0. Topics on: redux-form flow. Read more: React, React Stack, Redux, Redux Form, Redux Form V 830|FullStack Wiki by Roger J

Redux Middleware

Redux Middleware is defined as: Middleware to enhance/override store methods. Topics on: . Read more: React, React Stack, Redux, Redux Concepts, Middleware|Wiki

Redux Pattern

Redux Pattern. Topics on: Initial State, Action, Dispatch Function, Reducer. Read more: React, React Stack, Redux, Redux Pattern|FullStack Wiki by Roger J

Redux Reducer

Redux Reducer is defined as: pass initState & action object. Topics on: initState. Read more: React, React Stack, Redux, Redux Concepts, Redux Reducer| Dev Wiki

Redux Store

Redux Store is defined as: central global container to manage App state for redux. Topics on: Redux Store contains special methods to mutate state - only to be

Redux Toolkit steps

Redux Toolkit steps. Topics on: create src/state/store.ts with configureStore(), Provide store to <App>, Create reducers inside newer 'slice' in src/state/reduc

redux-form

redux-form. Topics on: Redux Form v8.3.0, React Final Form. Read more: React, React Stack, Redux, Redux Form|FullStack Wiki by Roger J

redux-form flow

redux-form flow. Topics on: import redux & redux form, Validater, export reduxForm. Read more: React, React Stack, Redux, React Redux, Redux Form Flow| Dev Wiki

redux-form flow

redux-form flow. Topics on: . Read more: React, React Stack, Redux, Redux Form, Redux Form V 830, Redux Form Flow|FullStack Wiki by Roger J

relay

relay is defined as: Declarative React Stack to colocate & mutate data via GraphQL. Topics on: . Read more: React, React Stack, Relay, Declarative, Graph QL

replace

replace is defined as: to replace current entry in History Stack. Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router V

req swizzle to customize?!

req swizzle to customize?! is defined as: req Swizzling to reconfig certain UI - to eject theme under new dir src/theme to customize - pain in the A!. Topics on

Revalidation

Revalidation is defined as: beta.nextjs.org/docs/data fetching/revalidating. Topics on: Background Revalidation, On-demand Revalidation. Read more: React, React

Root

Root is defined as: First Node in Tree/Subtree. Topics on: . Read more: React, React Stack, Nextjs, Next Concepts, Tree, Root, Subtree|FullStack Wiki by Roger J

Root Layout

Root Layout is defined as: top-level layout.tsx to share across all Page in App, to define <html> & <body>. Topics on: Root Layout replaces _app.tsx & _document

Route Config

Route Config is defined as: to colocate all routes into single object (for legacy reasons??). Topics on: . Read more: React, React Stack, React Router Dom, Reac

router()

router() is defined as: Imperative fn return by useRouter(). Topics on: (default) to name as router() but can be any name, push, pop. Read more: React, React St

Routing

Routing. Topics on: URL not the same as route in React Router, Client Side Routing (Client Routing) is possible due to HTML document links and browser handling

RR concepts:

RR concepts:. Topics on: History & Locations, Locations, Matching, Navigating, Routing, Segment, Path Pattern, Dynamic Segement, URL Params, Router, Router Conf

sb parameters

sb parameters is defined as: to control storybook feature/addon, via actions. Topics on: actions. Read more: React, React Stack, Storybook, Setup Storybook, Sto

search

search is defined as: plugin to Algolia via docsearch || typesense. Topics on: docusaurus + typesense setup, docusaurus + algolia setup. Read more: React, React

Separate redux type to folder

Separate redux type to folder. Topics on: import each different redux type with index.ts, Solves spaghetti import statements!, easier to import by simply refere

Server Runtime

Server Runtime is defined as: Node.js & Edge Runtime. Topics on: Edge Runtime, (default) /app use Node.js. Read more: React, React Stack, Nextjs, Next Concepts,

Server Side Render

Server Side Render is defined as: to Pre-render Static Content on Server Backend & serve to Thin Client with each request. Topics on: . Read more: React, React

setup storybook

setup storybook. Topics on: opt-out of SB telementry, src/stories, .storybook, clone template using degit to, init latest storybook, storybook + next 12 setup,

Shared Layout

Shared Layout is defined as: UI to share mutliple Page via children, to preserve state & not trigger re-render. Topics on: Root Layout. Read more: React, React

shiki

shiki is defined as: . Topics on: shiki for Markdown, shiki for TS. Read more: React, React Stack|FullStack Wiki by Roger J

Sidebar

Sidebar is defined as: autogen from /docs folder. Topics on: . Read more: React, React Stack, Docusaurus, Docusaurus Concepts|FullStack Wiki by Roger J

sidebars.js

sidebars.js is defined as: root level .js to explicitly add sidebars. Topics on: . Read more: React, React Stack, Docusaurus, Docusaurus Concepts, Docusaurus Fi

src > state OR src > redux

src > state OR src > redux. Topics on: add store to, add all reducers, add all actions to, add all action types to, add all action creators to, centralise main

Stale

Stale is defined as: when Static Content no longer up to date. Topics on: . Read more: React, React Stack, Nextjs, Next Concepts, Pre Render, ISR, Stale, Static

Story

Story is defined as: export default Object to Declarative render FC snapshot with specific key state to dev/test/doc. Topics on: title & component req fields -

Story Parameter

Story Parameter is defined as: static named metadata for Story to control beavior of Storybook Addon/core features. Topics on: . Read more: React, React Stack,

storybook

storybook is defined as: popular Frontend Dev tool to isolate UI to doc/showcase/test, detangle Business Logic/state/Context. Topics on: Storybook features, Sto

storybook + msw setup

storybook + msw setup. Topics on: add msw to storybook to simulate Online API, create genertic Service Worker in public folder, update .storybook/preview.js to

storybook + next 12 setup

storybook + next 12 setup. Topics on: extra config to setup next.js for storybook to run Page in isolation from next integrations - must serve next public dir a

storybook + RTK setup

storybook + RTK setup. Topics on: use @reduxjs/toolkit with storybook to add state to isolated CSF, add rtk deps, setup store.js & connect to FC, wire redux con

Storybook Addon

Storybook Addon is defined as: Plugin extends storybook UI & behaviour. to help prototype, test & doc. Topics on: to install essential addons, @storybook/addon-

Storybook Concurrent Explorer

Storybook Concurrent Explorer is defined as: storybook loca dev server with autogen web page to view, edit & test UI in browser. built-in search. Topics on: Sto

Storybook features

Storybook features. Topics on: storybook is FOSS - with Chromatic fremium version for better automation/integration tooling, Disable Storybook telemetry, Storyb

Subtree

Subtree is defined as: Part of Tree, from Root to Leaf. Topics on: . Read more: React, React Stack, Nextjs, Next Concepts, Tree, Subtree, Root, Leaf | Dev Wiki

SWR

SWR is defined as: React Stack to Data Fetch for client-side, handle Caching/Revalidation/Retries Front-End App (JS). Topics on: . Read more: React, React Stack

Syntax Highlighter

Syntax Highlighter. Topics on: react-syntax-highlighter, shiki. Read more: React, React Stack, Syntax Highlighter|FullStack Wiki by Roger J

Thoughts on RTK Migration

Thoughts on RTK Migration. Topics on: reducer has been rebranded to 'slice' to pointlessly confuse people, keep everything named as slice or reducer to avoid co

Time-Travel

Time-Travel is defined as: (feat) to revisit redux state history. Topics on: . Read more: React, React Stack, Redux, Redux Definition, State | Full-Stack Wiki

title

title is defined as: name of component to display in Storybook Concurrent Explorer - can be anything. Topics on: . Read more: React, React Stack, Storybook, Sto

To add CSS

To add CSS. Topics on: Import from /pages/_app.tsx, import from /node_modules CRA. Read more: React, React Stack, Nextjs, Next Setup|FullStack Wiki by Roger J

Tree

Tree is defined as: Next.js folder struct to def Hierachy for File System Router. Topics on: Subtree, Root, Leaf. Read more: React, React Stack, Nextjs, Next Co

type

type is defined as: to describe Action to change state. Topics on: . Read more: React, React Stack, Redux, Redux Pattern, Action, Type, State | Full-Stack Wiki

unoptimized

unoptimized is defined as: props to set <Image> to serve unoptimized Image Element (for compat with storybook). Topics on: . Read more: React, React Stack, Next

Upgrades

Upgrades. Topics on: Pure JS, Smaller file size, <FormSpy/>. Read more: React, React Stack, Redux, Redux Form, React Final Form, Upgrades | FullStack Wiki by RJ

useAppDispatch()

useAppDispatch() is defined as: TS typed version of useDispatch() || recommended but pointless. Topics on: . Read more: React, React Stack, Redux, Reduxjs Toolk

useAppSelector()

useAppSelector() is defined as: TS Typed version for useSelector() || recommended but pointless - just export useSelector as typed version. Topics on: . Read mo

useHistory()

useHistory(). Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router Hook, Use History|FullStack Wiki by Roger J

useLocation()

useLocation() is defined as: redundant? React Router Hook to return Location. Topics on: . Read more: React, React Stack, React Router Dom, React Router API, Re

useNavigate()

useNavigate() is defined as: React Router Hook to return Imperative navigate fn. Topics on: . Read more: React, React Stack, React Router Dom, React Router API,

useParams()

useParams() is defined as: React Router Hook to return { URL Parameter } set via ':_id' '/settings/:_id' in path. Topics on: . Read more: React, React Stack, Re

useRouteMatch()

useRouteMatch(). Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router Hook, Use Route Match|FullStack Wiki by Roger J

useRouter()

useRouter() is defined as: Next Library Hook to return router function to Imperative navigate within Page. Topics on: router(). Read more: React, React Stack, N

useSearchParams()

useSearchParams() is defined as: React Router Hook to return [ searchParams ] with method to .get() URL Parameter values. Topics on: to Wrapper URLSearchParams

useSelector()

useSelector() is defined as: OLD Redux API Library Hook to select piece of state from Redux Store. rep by useAppSelector(). Topics on: avoid Async logic inside

Vercel

Vercel is defined as: PaaS dev of Next.js, parcel, Serverless JAM CDN. Topics on: static file hosting does not count to 32 build/hr limit, automatic Let's Encry

wire redux context to _myFC.stories.js

wire redux context to _myFC.stories.js. Topics on: create mock data for redux store including reducer actions. Read more: React, React Stack, Storybook, Setup S

withRouter()

withRouter(). Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router V 5|FullStack Wiki by Roger J