MERN is a full-stack development framework consisting of MongoDB, Express.js, React, and Node.js.
React enables building reusable components, has a virtual DOM for optimized rendering, and supports one-way data binding for better control over application flow.
The virtual DOM is a lightweight copy of the actual DOM. React uses it to determine what parts of the actual DOM need to be updated, reducing unnecessary re-renders and improving performance.
Hooks are functions that allow you to use state and other React features in functional components. Common hooks include useState, useEffect, and useContext.
JSX (JavaScript XML) is a syntax extension that allows you to write HTML-like code within JavaScript. It gets transpiled to React elements during build time.
state is a component's internal data, whereas props are external inputs passed down from parent components to child components.
The Context API provides a way to pass data through the component tree without having to pass props manually at every level. It’s useful for managing global state.
Techniques include lazy loading components, using React.memo, avoiding anonymous functions in JSX, and optimizing bundle size with Webpack.
For large applications, state management tools like Redux, MobX, or Context API are often used to manage and maintain the state across multiple components efficiently.
HOCs are functions that take a component and return a new component with enhanced functionality. They are used to reuse component logic.
Arrow functions have a more concise syntax and do not bind their own this context. They inherit this from the parent scope.
Promises are objects that represent the eventual completion or failure of an asynchronous operation and its resulting value.
async/await is syntactic sugar for promises, allowing asynchronous code to be written in a more synchronous, readable manner.
Destructuring allows you to unpack values from arrays or properties from objects into distinct variables.
A closure is the combination of a function and the lexical environment within which that function was declared. It allows the function to access variables from an outer scope.
Semantic HTML uses meaningful tags (e.g., , , ) to improve accessibility, SEO, and maintainability.
The Box Model consists of margins, borders, padding, and the content area of an element. It helps in defining the space an element occupies on the page.
Flexbox is a CSS layout module that allows for the alignment of elements in a container, distributing space dynamically for a more flexible design.
While Flexbox is a one-dimensional layout model (rows or columns), CSS Grid is two-dimensional, allowing for more complex layouts involving both rows and columns.
Media queries allow you to apply CSS styles based on specific conditions such as screen width, enabling responsive design.
