_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
_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. Topics on: . Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structure, Docs, Folder
_document.tsx. Topics on: . Read more: React, React Stack, Nextjs, Next 12|FullStack Wiki by Roger J
_Folder. Topics on: _category_.json, _mypage.md. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structu
_mypage.md. Topics on: . Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structure, Docs, Folder | Wiki
:::caution is defined as: . Topics on: . Read more: React, React Stack, Docusaurus, Admonitions Callout Blocks, Caution|FullStack Wiki by Roger J
:::danger is defined as: danger callout. Topics on: . Read more: React, React Stack, Docusaurus, Admonitions Callout Blocks, Danger|FullStack Wiki by Roger J
:::tip is defined as: tip Admonitions Callout Blocks. Topics on: . Read more: React, React Stack, Docusaurus, Admonitions Callout Blocks, Tip | Full-Stack Wiki
.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 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 is defined as: to set parameters to control storybook addon/feature behavior, actions. Topics on: sb parameters. Read more: React, React S
@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 is defined as: docu plugin extends <img> to autogen placeholder for Lazy Loading & resized images variants for responsive display
@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. 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 is defined as: Official Opinionated redux Toolset Lib with simplified improved syntax. Topics on: Thoughts on RTK Migration, @reduxjs/toolkit/q
@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 is defined as: official storybook Plugin to audit FC vs WCAG guidelines for max Accessibility & flag any violations. Topics on: 'Elements
/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 is defined as: dir with all Dependency & their sub-Dependency & their sub-sub-Dependency & .... Topics on: . Read more: React, React Stack, CRA, A
/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 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 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 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 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 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> 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> 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/>. Topics on: Less renders. Read more: React, React Stack, Redux, Redux Form, React Final Form, Upgrades|FullStack Wiki by Roger J
<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> 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> 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> is defined as: Monaco Editor FC. Topics on: theme, language, value. Read more: React, React Stack, Monaco Editor React, Monaco Editor, FC | Wiki
<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> 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> 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> 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>. Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router V 5, Switch|FullStack Wiki by Roger J
<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 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 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. 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 is defined as: where is styling for :::tip and :::danger :::caution defined?! - Callout blocks to draw extra attention to specific c
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 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. Topics on: <Tabs>. Read more: React, React Stack, Docusaurus, Docusaurus Features, Built In Docusaurus UI FC |FullStack Wiki by Roger
changefreq is defined as: to set frequency for crawler to re-index 'always', 'hourly', 'daily', 'weekly', 'monthly', 'yearly', 'never'. Topics on: 'always'. Rea
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 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. Topics on: docs. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structure
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. Topics on: // highlight-next-line, // highlight-start, // highlight-end. Read more: React, React Stack, Docusaurus, Docusaurus MDX
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 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 is defined as: section to edit docs site routing. Topics on: presets: []. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config| Dev Wiki
configureStore() is defined as: @reduxjs/toolkit to replace createStore. Topics on: . Read more: React, React Stack, Redux, Reduxjs Toolkit, Configure Store
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 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. 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. Topics on: to import template for CRA, minimal template, typescript, minimal-typescript, minimal redux-typescript, react boilerplate. Read more:
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 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() is defined as: @reduxjs/toolkit to setup slice state with input { initialState, reducers object, name}. Topics on: to export actions from slice, e
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 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:. Topics on: downgrade react-scripts@4.0.3, initiate highlighter. Read more: React, React Stack, Monaco Editor React, Monaco Jsx Highlighte
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 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 is defined as: need to manually opt-out for every project😫. Topics on: add --disable-telemetry flag to every storybook run!. Read m
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 is defined as: function to Dispatch Action to Reducer. Topics on: . Read more: React, React Stack, Redux, Redux Pattern, Dispatch Function, Fu
docs. Topics on: _Folder. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets, Classic, Classic Folder Structure, Docs|FullStack Wiki
Docu Hooks. Topics on: useColorMode(), useThemeContext(). Read more: React, React Stack, Docusaurus, Docusaurus API|FullStack Wiki by Roger J
docu plugin is defined as: to extend docusaurus with new feat. Topics on: docusaurus-theme-search-typesense, @docusaurus/plugin-sitemap, @docusaurus/plugin-idea
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 > redoc on github. Topics on: . Read more: React, React Stack, Docusaurus|FullStack Wiki by Roger J
Docusaurus API. Topics on: Docu Hooks. Read more: React, React Stack, Docusaurus, Docusaurus API|FullStack Wiki by Roger J
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. Topics on: Document, Sidebar, Docusaurus file system. Read more: React, React Stack, Docusaurus, Docusaurus Concepts | FullStack Wiki by RJ
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. Topics on: /docs, /blog, sidebars.js. Read more: React, React Stack, Docusaurus, Docusaurus Concepts, Docusaurus File System | Dev Wiki
Docusaurus MDX Syntax. Topics on: Docusaurus Codeblock. Read more: React, React Stack, Docusaurus, Docusaurus MDX Syntax|FullStack Wiki by Roger J
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 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 is defined as: . Topics on: config. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs|FullStack Wiki by Roger J
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. 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:. Topics on: code auto-complete and prompt, code syntax highlighting, fade out unused variables, linting, mini-map overview!. Re
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 is defined as: Runtime Environment to execute on Edge. Topics on: . Read more: React, React Stack, Nextjs, Next Concepts, Server Runtime, Edge Runt
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 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 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 is defined as: Fetch Cache Sync. Topics on: . Read more: React, React Stack, React Query, FCS|FullStack Wiki by Roger J
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. Topics on: Error could not find react-redux context value; please ensure the component is wrapped in a <Provider>, add react-redux Provide
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() 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(). Topics on: . Read more: React, React Stack, Redux, OLD Redux API|FullStack Wiki by Roger J
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. Topics on: History Object, History Action, History Stack. Read more: React, React Stack, React Router Dom, React Router API, React Router V
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 is defined as: React Router API Interface Object to Subscribe URL change & manipulate History Stack. Topics on: . Read more: React, React 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. Topics on: . Read more: React, React Stack|FullStack Wiki by Roger J
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 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 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. Topics on: next 11+ uses webpack5 builder by default. Read more: React, React Stack, Storybook, Setup Storybook, Storybook Next 12 Setup| Dev Wiki
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 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 is defined as: use Lazy() with route elements. Topics on: . Read more: React, React Stack, React Router Dom, React Router Patterns, Lazy | Wiki
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:. Topics on: ovvwzkzry9.codesandbox.io. Read more: React, React Stack, React Credit Cards, Live Demo|FullStack Wiki by Roger J
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 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. Topics on: Needed because of CORS preventing local HTML file access to other domains, http://localhost:3000, npx serve, npx http-server. Read
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() is defined as: . Topics on: . Read more: React, React Stack, Redux|FullStack Wiki by Roger J
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. Topics on: # highlight-next-line. Read more: React, React Stack, Docusaurus, Docusaurus MDX Syntax, Docusaurus Codeblock |FullStack Wiki by RJ
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. 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. 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 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. 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. Topics on: . Read more: React, React Stack, Nextjs, Next Concepts, File System Router, Nest Route|FullStack Wiki by Roger J
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. Topics on: Incremental Adoption /app per Page, Transition to Server Component. Read more: React, React Stack, Nextjs, Next 13| FullStack Wiki
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. Topics on: <Head>, <Script>, <Image>, <Link>. Read more: React, React Stack, Nextjs, Next Component|FullStack Wiki by Roger J
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 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. Topics on: Next.js MIT License, Vercel. Read more: React, React Stack, Nextjs, Next Definition|FullStack Wiki by Roger J
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 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. 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 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 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 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 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 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 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 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. Topics on: must manually opt-out for every setup! Designed to be annoying!, in storybook config element, run with --disable-telemetry
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 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. Topics on: hide code mini-map overview, add line-wrap to code. Read more: React, React Stack, Monaco Editor React| Dev Wiki
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 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 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 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 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: [] is defined as: to set. Topics on: classic. Read more: React, React Stack, Docusaurus, Docusaurusconfigjs, Config, Presets|FullStack Wiki by Roger J
props. Topics on: Editor, Diff Editor - for comparing diff between 2 files, Controlled Editor - controlled component !deprecated?. Read more: React, React Stack
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. Topics on: Redux + Saga, Styled-Components, ESLint, husky. Read more: React, React Stack, CRA, CRA Templates|FullStack Wiki by Roger J
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 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. 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 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. Topics on: useHistory, useLocation, useParams, useRouteMatch. Read more: React, React Stack, React Router Dom, React Router API, Reac
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. Topics on: install, import, Config routes, Link to navigate, useNavigate to redirect. Read more: React, React Stack, React Router Dom, React
React Router Hook is defined as: React Router API Library Hook. Topics on: useSearchParams(), useLocation(), useParams(), useNavigate(), useRoutes(), useHistory
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 is defined as: Broader React Ecosystem, third party libraries & frameworks. Topics on: @apollo/client, @monaco-editor/react, CRA, docusaurus, esbuil
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 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. 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 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 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 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 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 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. Topics on: <Switch>, React Router Flow, withRouter() gives access to history object properties, RR concepts:, withRouter(), React Router Custom
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 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 is defined as: React Stack Syntax Highlighter to style code (highlight syntax, background, theme). Topics on: . Read more: React, React
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 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 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 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. Topics on: MobX, React Query. Read more: React, React Stack, Redux|FullStack Wiki by Roger J
Redux Concepts. Topics on: Redux Store, Root Reducer, Redux Reducer, Dispatch, Subscriber, Redux Middleware. Read more: React, React Stack, Redux, Redux Concept
Redux Definition. Topics on: Predictable, Centralized, Time-Travel, Standalone, Debuggable, Flexible. Read more: React, React Stack, Redux, Redux Definition
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. 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. Topics on: redux-form flow. Read more: React, React Stack, Redux, Redux Form, Redux Form V 830|FullStack Wiki by Roger J
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. Topics on: Initial State, Action, Dispatch Function, Reducer. Read more: React, React Stack, Redux, Redux Pattern|FullStack Wiki by Roger J
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 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. Topics on: create src/state/store.ts with configureStore(), Provide store to <App>, Create reducers inside newer 'slice' in src/state/reduc
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. 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. Topics on: . Read more: React, React Stack, Redux, Redux Form, Redux Form V 830, Redux Form Flow|FullStack Wiki by Roger J
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 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?! 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 is defined as: beta.nextjs.org/docs/data fetching/revalidating. Topics on: Background Revalidation, On-demand Revalidation. Read more: React, React
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 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 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() 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. 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:. Topics on: History & Locations, Locations, Matching, Navigating, Routing, Segment, Path Pattern, Dynamic Segement, URL Params, Router, Router Conf
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 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. Topics on: import each different redux type with index.ts, Solves spaghetti import statements!, easier to import by simply refere
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 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. Topics on: opt-out of SB telementry, src/stories, .storybook, clone template using degit to, init latest storybook, storybook + next 12 setup,
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 is defined as: . Topics on: shiki for Markdown, shiki for TS. Read more: React, React Stack|FullStack Wiki by Roger J
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 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. Topics on: add store to, add all reducers, add all actions to, add all action types to, add all action creators to, centralise main
src/components/HomepageFeatures/index.tsx is defined as: docusaurus FC for root home page (classic preset). Topics on: FeatureList[]. Read more: React, React St
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 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 is defined as: static named metadata for Story to control beavior of Storybook Addon/core features. Topics on: . Read more: React, React Stack,
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. 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. 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. 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 is defined as: Plugin extends storybook UI & behaviour. to help prototype, test & doc. Topics on: to install essential addons, @storybook/addon-
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. Topics on: storybook is FOSS - with Chromatic fremium version for better automation/integration tooling, Disable Storybook telemetry, Storyb
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 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. Topics on: react-syntax-highlighter, shiki. Read more: React, React Stack, Syntax Highlighter|FullStack Wiki by Roger J
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 is defined as: (feat) to revisit redux state history. Topics on: . Read more: React, React Stack, Redux, Redux Definition, State | Full-Stack Wiki
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. 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 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 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 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. 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() is defined as: TS typed version of useDispatch() || recommended but pointless. Topics on: . Read more: React, React Stack, Redux, Reduxjs Toolk
useAppSelector() is defined as: TS Typed version for useSelector() || recommended but pointless - just export useSelector as typed version. Topics on: . Read mo
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() 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() 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() 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(). 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() 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() is defined as: React Router Hook to return [ searchParams ] with method to .get() URL Parameter values. Topics on: to Wrapper URLSearchParams
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 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. Topics on: create mock data for redux store including reducer actions. Read more: React, React Stack, Storybook, Setup S
withRouter(). Topics on: . Read more: React, React Stack, React Router Dom, React Router API, React Router V 5|FullStack Wiki by Roger J