What is react and react-dom

React is an open-source JavaScript library for building user interfaces (UIs). It was developed and is maintained by Meta, and is widely used by developers to create interactive and dynamic web applications.

React is a library for building user interfaces. The package react contains only the renderer-agnostic code i.e. the core React library, algorithm for computing changes in the UI and other helpers. The package react-dom contains the code specific to the DOM rendering of React components.

Why do we need react

React was created to efficiently handle changes in the user interface (UI) when the underlying data layer changes. Before React, manually updating the DOM to reflect changes in data was error-prone and inefficient, especially in complex applications. React provides a declarative way to describe the UI, automatically updating and rendering the necessary components when the state or props change, making it easier to build dynamic, data-driven applications.

How to create a react app

To create a react app, Inject these two scripts into your html.

<script
  crossorigin
  src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>

Hello world using React.

<script>
  const heading = React.createElement("h1", {}, "Hello world");
  const root = ReactDOM.createRoot(document.getElementById("root"));
  React.render(root);
</script>

what is createElement(type, props, ...children)

  • It Creates a react element without JSX.

what is ReactDOM.createRoot(domNode, options?)

  • Lets you create a root to display react components inside a browser DOM.

After you’ve created a root, you need to call root.render to display a React component inside of it:

If your root’s DOM node contains HTML generated by React on the server or during the build, use hydrateRoot() instead, which attaches the event handlers to the existing HTML.

What is Bundling, Chunking & Compressing?

Bundling: The process of taking multiple files (like JavaScript, CSS, and others) and combining them into a single file or a few files. This is done to reduce the number of HTTP requests a browser has to make, which can improve page load times.

Chunking: A technique where code is split into smaller, manageable pieces called “chunks”. These chunks can be loaded on-demand, improving the performance of large applications by only loading the necessary code when it’s needed.

Compressing: Reducing the file size of code and assets (e.g., JavaScript, CSS) by removing unnecessary characters (like spaces and comments) and using algorithms (like gzip) to shrink the file size. This reduces the amount of data transferred over the network, leading to faster load times.

What is NPM?

A package manager for JavaScript that helps developers install, share, and manage dependencies (libraries and tools) in their projects. NPM also provides a registry where developers can publish their own packages.

What is package-lock.json?

A file automatically generated by NPM to lock the exact versions of dependencies and their dependencies (including transitive dependencies) used in a project. It ensures that the same versions are installed on all machines, maintaining consistency across environments.

What is node_modules?

A directory in a Node.js project where all the installed dependencies (libraries and modules) are stored. When you run npm install, NPM downloads the required packages and saves them in this folder

What is Parcel?

  • A web application bundler that requires zero configuration. It supports bundling various file types, including JavaScript, CSS, HTML, images, and more. Parcel is known for its simplicity and speed, automatically optimizing and transforming files without the need for manual configuration.

What are Transitive Dependencies?

  • Dependencies that your project’s direct dependencies rely on. For example, if your project depends on Library A, and Library A depends on Library B, then Library B is a transitive dependency of your project. Managing transitive dependencies ensures that all necessary code is included in your project.

What is npx?

  • A tool that comes with NPM (starting from version 5.2.0) and allows you to execute Node.js binaries (like CLI tools) directly without globally installing them. For example, you can run npx create-react-app my-app to create a new React application without needing to install create-react-app globally.

What is Hot Module Replacement (HMR)?

  • A feature used in web development that allows modules to be updated in a running application without requiring a full page reload. HMR improves development speed by retaining the application’s state while updating the code in the background. It’s commonly used in frameworks like React, Vue, and tools like Webpack.

What is browserslist?

  • A tool that allows developers to specify which browsers and versions they want their code to support. Tools like Babel, Autoprefixer, and others use the browserslist configuration to determine which transformations and polyfills are needed for the specified browser targets.

What is npm scripts?

  • A feature of NPM that allows you to define and run custom commands or scripts directly from your package.json file. These scripts can automate tasks like building, testing, or deploying your project. You define scripts under the scripts section in package.json, and they can be run using npm run <script-name>. For example, "start": "node server.js" can be run with npm start.