Scribd
Upload
6 views5 pages

React NextJS Concepts Full

The document provides comprehensive definitions of key React and Next.js concepts, including JSX, components, props, state, and various hooks like useState and useEffect. It also covers routing, data fetching methods, and optimization techniques in Next.js. Overall, it serves as a detailed reference for understanding essential features and functionalities 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
6 views5 pages

React NextJS Concepts Full

The document provides comprehensive definitions of key React and Next.js concepts, including JSX, components, props, state, and various hooks like useState and useEffect. It also covers routing, data fetching methods, and optimization techniques in Next.js. Overall, it serves as a detailed reference for understanding essential features and functionalities 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/ 5

React Concepts - Full Definitions

JSX

JSX allows you to write HTML-like syntax in JavaScript files, which makes the structure of

components easier to understand. It's syntactic sugar for React.createElement.

Component

A component is a reusable building block of a UI in React. It can be a class or a function that returns

JSX.

Props

Props (short for properties) are read-only inputs passed from a parent to a child component. They're

used for configuration.

State

State is a built-in object that stores data or UI status that may change over the component's

lifecycle.

useState()

A React Hook that adds state to functional components. It returns an array with the current state and

a setter function.

useEffect()

This hook lets you run side effects like fetching data or modifying the DOM. It replaces lifecycle

methods in class components.

useRef()

useRef returns a mutable ref object used to access DOM elements or persist values between

renders without causing re-renders.

useContext()
Provides a way to pass data through the component tree without having to pass props down

manually at every level.

React.memo()

A higher order component that prevents unnecessary re-renders of a functional component by

memoizing the result.

Controlled Component

An input element whose value is controlled by React state. This makes React the source of truth.

Uncontrolled Component

An input element that maintains its own internal state using the DOM, accessed with refs.

Keys in Lists

Keys help React identify which items have changed, are added, or removed when rendering lists.

Virtual DOM

A lightweight JavaScript object representing the actual DOM. React compares versions and updates

only what's necessary.

Reconciliation

The process React uses to compare the new virtual DOM with the previous one and update the real

DOM efficiently.

Fragment

A way to return multiple elements from a component without adding extra nodes to the DOM.

Conditional Rendering

Allows components to render different UI depending on state or props.

React Router
A standard library for routing in React. It enables navigation between views without full-page

reloads.

Lifting State Up

Moving shared state to a common ancestor component so that multiple children can access and

modify it.

Higher Order Component

A function that takes a component and returns a new enhanced component, used for code reuse.

Context API

A way to manage global state across a React app, avoiding prop drilling.
Next.js Concepts - Full Definitions

File-based Routing

In Next.js, each file inside the 'pages/' directory automatically becomes a route.

Dynamic Routing

Using bracket syntax like [id].js in 'pages/' to handle dynamic routes like /post/1.

useRouter()

A hook from next/router that allows access to router object including route parameters.

getStaticProps()

Fetch data at build time and use it to pre-render a page for faster performance.

getServerSideProps()

Fetch data on every request, useful for content that changes often or depends on auth.

getStaticPaths()

Defines the dynamic routes that need to be statically generated at build time.

API Routes

Create REST API endpoints directly in Next.js inside the pages/api/ folder.

Image Optimization

The next/image component provides automatic image resizing, lazy loading, and more.

Head Component

Allows modifying elements in the <head> of the page like title, meta tags, etc.

Link Component

Provides client-side transitions between pages to prevent full reloads.


Public Directory

Place static files in the /public directory and access them directly via URL paths.

Static Site Generation

Pages are pre-rendered to HTML at build time and served from cache.

Server Side Rendering

Pages are rendered on each request based on up-to-date server data.

Fallback Rendering

Allows dynamic pages to be generated on-demand if they weren't built initially.

Deployment

Next.js apps are easily deployable on Vercel, which supports static and serverless functions.

You might also like