- node_modules contains all dependencies required by an application.
- Transitive Dependencies are dependencies of dependencies.
- (transitive dependencies and peer dependencies are not the same. Transitive dependencies are dependencies of dependencies, while peer dependencies are a set of dependencies expected to be used together)
- With package.json and package-lock.json, you can recreate node_modules.
- npm commands are used to install packages; npx is used to execute them.
- ❌ Using CDN links for React is costly as it requires network requests.
- Normal JavaScript doesn't have imports; <script type="module" src="..."></script> is used for modules.
- Parcel and webpack, vite are build tools that optimize apps for production.
- Dependencies are necessary for the app to function; devDependencies are only needed during development.
- Tree shaking removes unnecessary code in production.
- exchanges, adds, or removes modules without a full reload.
- Image optimization involves reducing image size for web use.
- Bundling merges dependencies into a single optimized file.
- Caching in Parcel ensures quick restarts and avoids building the same code twice.
- Changes in the DOM are costly
- createElement() creates a React element, which is a JavaScript object.
- Difference between Library and Framework:
- Library: React can work on a specific part of an application (e.g., Header) and provides pre-written code for specific operations.
- Framework: Provides a structure for writing a program.
- React is called "React" because it can dynamically "react" to changes in data.
- Cross-origin in the script tag: Setting the crossorigin attribute to anonymous allows a script to be executed without sending user credentials.
- CORS (Cross-Origin Resource Sharing) is a mechanism for web apps to share resources with different origins.
- How CORS works:
- Before making a request, a preflight request is made to verify the validity of the request.
- The server sends additional HTTP headers back to the origin making the request.
- async vs. defer attributes in the script tag:
- async: Scripts are fetched asynchronously while HTML parsing continues. Scripts are executed as soon as they are downloaded.
- defer: Scripts are fetched in parallel with HTML parsing and are executed only after HTML parsing is completed. This guarantees the order of script execution.
- Caret (^): The caret (^) sign in package.json allows minor version updates. For example, if a package version is "^1.2.3", npm will install the latest minor version (1.x.x) of the package. Major versions (2.x.x) will not be installed automatically.
- Tilde (~): The tilde (~) sign in package.json allows patch updates. For example, if a package version is "~1.2.3", npm will install the latest patch version (1.2.x) of the package. Minor versions (1.3.x) and major versions (2.x.x) will not be installed automatically.
- Without Caret or Tilde: If a version is specified without the caret or tilde, npm will install exactly that version. For example, if a package version is "1.2.3", npm will install version 1.2.3 and will not update to any other version automatically.
- PostCSS: Tailwind CSS uses PostCSS, a tool for transforming CSS with JavaScript. PostCSS allows developers to extend CSS with variables, mixins, and functions, making it easier to maintain large-scale CSS projects.
- JSX: JSX is a syntax extension for JavaScript that looks similar to XML or HTML and is used with React to describe what the UI should look like. JSX makes it easier to write and understand React components compared to using pure JavaScript.
- Transpiling: Transpiling is the process of converting source code from one language to another at the same abstraction level. For example, converting JSX code to JavaScript code that browsers can understand.
- Parcel and Babel: Parcel is a web application bundler that can automatically transpile JSX code using Babel. Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
- Example:
- Given the following JSX code:
const jsxHeading = <h1 id="heading">Hello Modi Ji</h1>;
Parcel will use Babel to transpile it into JavaScript code that React can understand:const jsxHeading = React.createElement("h1", { id: "heading" }, "Hello Modi Ji");
- JSX to ReactElement: JSX is transformed into a ReactElement, which is a JavaScript object representing a DOM element. This ReactElement is then used by React to render the corresponding HTML element in the browser.
- Attributes in JSX: Attributes in JSX are written in camelCase, similar to how they are in HTML but with the first letter lowercase. For example,
className in JSX corresponds to the class attribute in HTML.
- React Components:
- Class-Based Components: These are the older way of creating components in React, using JavaScript classes.
- Function-Based Components: This is the newer and more common way of creating components, using JavaScript functions.
- Functional Components: React functional components are just JavaScript functions that return a JSX element. They are simpler and more lightweight than class-based components.
- Component Composition: In React, components can be composed by including one component inside another, as seen in the example where
<Title /> is included inside the <div>.
- Injecting JS into JSX: JavaScript expressions can be embedded inside JSX using curly braces
{}. This allows for dynamic content and logic to be included in JSX.
- Babel with JSX: Babel is used to transpile JSX code into JavaScript code that browsers can understand.
- Components in React: Components in React are reusable pieces of code that define a part of a user interface. They help in creating modular and maintainable code.
- Class-Based Components: Class-based components in React are defined using ES6 classes that extend
React.Component. They have a constructor method where the initial state is defined and a render method that returns JSX to be rendered.
- super(props): The
super(props) call in the constructor of a class-based component is used to call the constructor of the parent class (React.Component) and pass the props to it. This is necessary to initialize the component with the properties passed to it.
- Lifecycle Methods: Class-based components in React have lifecycle methods that allow developers to hook into different stages of a component's lifecycle. For example,
componentDidMount is called after the component is mounted (added to the DOM) and is often used to make API calls or set up event listeners.
- Updating State: In class-based components, state is managed using the
setState method. When a state variable is updated using setState, React will re-render the component and update only the parts of the UI that have changed.
- Mounting Phase: When a class-based component is mounted, it goes through a mounting phase where the constructor is called, the component is rendered, and then
componentDidMount is called.
- Unmounting Phase: When a class-based component is unmounted (removed from the DOM), the
componentWillUnmount method is called, allowing developers to clean up resources used by the component.
- Effect of setInterval(): If
setInterval() or any other function is used in a class-based component, it will continue running until it is explicitly cleared in the componentWillUnmount method to prevent memory leaks.
- Lifecycle Methods vs. useEffect:
componentDidMount in class-based components is similar to useEffect with an empty dependency array in functional components. However, componentWillUnmount does not have a direct equivalent in useEffect.
- Async in useEffect:
useEffect does not directly support async functions as its callback. This is because async functions return a Promise, which is not valid for the useEffect callback. Instead, you can define an async function inside the useEffect and call it immediately.
- Default and Named Exports: In JavaScript modules, you can have both default and named exports in the same file. This allows you to export a single "default" value and also export other values by name.
// Default Export
const defaultExport = "Default Export Value";
export default defaultExport;
// Named Export
export const namedExport1 = "Named Export 1";
export const namedExport2 = "Named Export 2";
// Default Import
import defaultExport from "path";
// Named Imports
import { namedExport1, namedExport2 } from "path";
console.log(defaultExport); // "Default Export Value"
console.log(namedExport1); // "Named Export 1"
console.log(namedExport2); // "Named Export 2"
- Efficient DOM Manipulation: React, Angular, and Vue are all modern JavaScript frameworks/libraries that aim to improve the efficiency of DOM manipulation. They achieve this by using virtual DOMs, which are lightweight representations of the actual DOM, allowing them to minimize the number of changes needed to update the UI.
- Hooks: React hooks are functions that enable functional components to have state and lifecycle features. They allow developers to use state and other React features without writing a class.
useState is one of the most commonly used hooks, used for managing state variables in functional components.
- Reconciliation Algorithm (React Fiber): React uses a reconciliation algorithm (React Fiber) to efficiently update the DOM. It compares the virtual DOM with the actual DOM and determines the most efficient way to update the UI.
- Virtual DOM: The virtual DOM is a lightweight copy of the actual DOM. React uses the virtual DOM to perform updates and then calculates the most efficient way to update the actual DOM based on the changes in the virtual DOM.
- Diff Algorithm: React's diffing algorithm compares the virtual DOM with the previous version of the virtual DOM to identify the minimum number of changes needed to update the actual DOM. This helps in optimizing DOM updates and improving performance.
export * as: The export * as syntax is used in ES6 modules to re-export all named exports from another module under a single namespace. For example:
export * as myModule from './module';
import * as myModule from './module';
- Importance of config.js: The
config.js file is often used to store configuration settings such as API keys, database URLs, or other environment-specific variables. Keeping these settings in a separate file makes it easier to manage and update them, especially in larger applications where there are multiple configurations for different environments.
- Redux: Redux is a predictable state container for JavaScript applications. It helps manage the state of your application in a predictable way, making it easier to develop and maintain complex applications. While Redux is not mandatory for small or medium-scale applications, it can be beneficial for managing state in larger or more complex applications.
- Why Use Redux:
- State Management: Redux offers a centralized store for managing the state of your application, making it easier to access and update state across different components.
- Easy Debugging: Redux provides tools for easily debugging your application's state changes, which can be helpful in identifying and fixing issues.
- Redux Toolkit: Redux Toolkit is the recommended way to write Redux code. It provides a set of tools and best practices to simplify the Redux development process, including creating slices, which are small portions of the Redux store that manage specific parts of your application's state.
- Slices: Slices are small portions of the Redux store that manage specific parts of your application's state. For example, you might have slices for managing the cart, user information, or theme settings. Slices help organize your Redux code and make it easier to manage complex state logic.
- Dispatching an Action: Dispatching an action in Redux means calling a function that modifies the state of your application. This function is called a reducer, and it is responsible for updating the state based on the action that was dispatched.
- Selectors: Selectors are functions used to extract specific pieces of state from the Redux store. They are used to subscribe to changes in the store and update components when the state changes.
- useSelector:
useSelector is a hook provided by React-Redux that allows components to subscribe to specific pieces of state in the Redux store. It is used to access state values in functional components.
- useDispatch:
useDispatch is a hook provided by React-Redux that allows components to dispatch actions to update the Redux store. It is used to trigger state updates in response to user interactions or other events.
- Single Responsibility Principle (SRP): SRP states that a component should have only one reason to change, meaning it should only have one responsibility. This principle helps in making components more maintainable, reusable, and testable.
- Modularity: Modularity is the practice of dividing a program into separate modules or pieces of code that can be independently developed, maintained, and tested. This helps in making the codebase more manageable, scalable, and easier to understand.
- Custom Hooks: Custom hooks in React are a way to extract component logic into reusable functions. They are a good way to follow the SRP, as each custom hook can have a single responsibility, such as fetching data or handling state.
- Chunking/Code Splitting/Lazy Loading/Dynamic Bundling/On-Demand Loading: These terms refer to techniques used to split a large application into smaller, more manageable chunks or modules. This can improve the loading time of the application and reduce the initial load size.
- Advantages of Code Splitting:
- Faster Loading Process
- Reduced Server Load
- Better User Experience
- Disadvantages of Code Splitting:
- Additional Code Processing
- Additional Communication with Server
- Planning Before Making an App: Planning is crucial before developing an app to ensure that all components and features are well thought out and organized. This includes planning the structure of the app, such as the header, body, and footer, as well as any specific components and their functionalities.
- Low-Level Planning: This involves breaking down the app into smaller components and defining their individual responsibilities. For example, in a restaurant app, the header may contain a logo and navigation items, the body may have a search feature and a container for displaying restaurant cards, and the footer may include copyright information, links, address, and contact details.
- Inline CSS as Object: Inline styles in React can be defined as JavaScript objects, allowing for dynamic styling based on component state or props. For example:
const styleCard = {
backgroundColor: "pink",
};
- Passing Props to Components: Passing props to a component is similar to passing arguments to a function. Props allow components to receive data from their parent components.
- Config Driven UI: Config-driven UI refers to designing the UI of a website or application based on data or configurations received from the backend. This approach allows for more flexibility and easier maintenance of the UI.
- Optional Chaining (?.): Optional chaining is a feature in JavaScript that allows you to safely access nested properties of an object without having to explicitly check for the existence of each property. For example:
const name = employee?.details?.name;
- map() Method: The
map() method in JavaScript is used to iterate over an array and return a new array with modified elements. It is often used in React to render lists of items, such as generating multiple elements from an array.
- Keys in map(): In React, when rendering a list of elements using the
map() method, it is important to provide a unique key prop to each element. This helps React identify which items have changed, been added, or been removed, improving performance.
- ES6 in React: ES6 (ECMAScript 6) is a standardized version of JavaScript that introduced many new features and syntax improvements. It is widely used in React development for its enhanced readability and accessibility.
- React.Fragment:
<React.Fragment> or <> is used in React to return multiple elements from a component without adding extra nodes to the DOM. It is a way to group a list of children without adding a wrapper div or other element.
- Virtual DOM: The virtual DOM is a lightweight copy of the actual DOM in React. It is used to improve performance by reducing the number of direct manipulations to the actual DOM. React compares the virtual DOM with the previous version to determine the minimal number of changes needed to update the actual DOM.
- React Reconciliation: React Reconciliation is the process through which React updates the Browser DOM. It involves comparing the current state of the virtual DOM with the previous state to determine the most efficient way to update the actual DOM.
- React Fiber: React Fiber is the new reconciliation algorithm introduced in React 16. It is designed to improve the rendering performance of React applications by allowing for incremental rendering and prioritizing updates based on their importance.
- Know more about React Reconciliation, Fiber :
