KEMBAR78
React NextJS CheatSheet | PDF | Document Object Model | Software
Scribd
Upload
17 views2 pages

React NextJS CheatSheet

The document provides concise summaries of key React and Next.js concepts, including JSX, components, props, state management, and routing. It highlights important hooks like useState and useEffect, as well as features specific to Next.js such as static site generation and dynamic routing. Overall, it serves as a quick reference guide for essential topics in React and Next.js development.

Uploaded by

abhyshekbhalaji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views2 pages

React NextJS CheatSheet

The document provides concise summaries of key React and Next.js concepts, including JSX, components, props, state management, and routing. It highlights important hooks like useState and useEffect, as well as features specific to Next.js such as static site generation and dynamic routing. Overall, it serves as a quick reference guide for essential topics in React and Next.js development.

Uploaded by

abhyshekbhalaji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

React Concepts - 2 Line Summaries

JSX: JSX is a syntax extension that allows HTML-like code in JavaScript.

Component: A reusable piece of UI. Can be functional or class-based.

Props: Read-only data passed from parent to child component.

State: Local, changeable data in a component that triggers re-render.

useState(): React hook to add state in functional components.

useEffect(): Runs side effects like API calls after component renders.

useRef(): Holds a mutable reference that doesn't cause re-render.

useContext(): Access shared data across components without prop drilling.

React.memo(): Prevents re-render if props haven't changed.

Controlled Component: Input field where value is controlled by React state.

Uncontrolled Component: Input field controlled by the DOM using refs.

Keys in Lists: Used to uniquely identify list items during rendering.

Virtual DOM: In-memory representation of UI for efficient DOM updates.

Reconciliation: React's diffing algorithm to update only changed parts.

Fragment: Used to group multiple elements without adding extra DOM nodes.

Conditional Rendering: Render different components based on conditions.

React Router: Used for navigation in single-page React apps.

Lifting State Up: Move shared state to nearest common ancestor.

Higher Order Component: Function that takes a component and returns a new one.

Context API: Manages global state without prop drilling.


Next.js Concepts - 2 Line Summaries

File-based Routing: Pages are created based on files in the 'pages/' folder.

Dynamic Routing: Use [param].js in 'pages/' to handle dynamic routes.

useRouter(): Next.js hook to access route parameters and navigation.

getStaticProps(): Fetch data at build time (SSG).

getServerSideProps(): Fetch data on each request (SSR).

getStaticPaths(): Used with getStaticProps for dynamic paths.

API Routes: Create backend functions inside 'pages/api/' directory.

Image Optimization: Built-in support via next/image for fast image loading.

Head Component: Use next/head to modify <head> like title, meta tags.

Link Component: Client-side navigation using <Link> from next/link.

Public Directory: Static assets like images are served from /public.

Static Site Generation: Pages built once at build time, served as static HTML.

Server Side Rendering: Page generated on each request with fresh data.

Fallback Rendering: Allows dynamic page generation at request time with loading UI.

Deployment: Next.js is easily deployable on Vercel with Git integration.

You might also like