What will execute faster: an resolved promise callback or a "0sec" setTimeout() ?

setTimeout(function tO() {
  console.log('setTimeout function called');
}, 0);
Promise.resolve(true).then(function rS() {
  console.log('Promise Resolved function called');
});

So I tried to answer this question with the knowledge that I had.

• So first the setTimeout will be called in the call stack after the main execution contest is added.
• Then as the setTimeout will execute through web API asynchronously.
• So the javascript engine will get the Promise into the call stack.
• And again the web API will execute the Promise asynchronously.
• So at this movement, the setTimeout with 0 sec will complete immediately and move to the call-back queue.
• Also the Promise with true resolve will complete and move to call-back queue.
• Then at last first the setTimeout callback function will come into the call stack and then Promise's callback function.
• So the output will be (I thought) -->

- setTimeout function called
- Promise Resolved function called

But This was not right so first the "Promise Resolved function called" was printed then the "Promise setTimeout function called".

So where did I want wrong, So we were correct till the point where the web API was executing the Promise and setTimeout. But in the call-back queues, there are two types of queues first is Task queue (macrostasks) and then the Job queue(microtasks).

And if the Promise is resolved in the web API. The Promise does not go to the Task queue it goes in the Job queue and the setTimeout or other async API after completion will go to the Task queue.

And this is what makes the difference because the event loop which takes the async APIs from the callback queue and put it into the call stack (after the call stack is emptied) has a priority of dequeueing first the Job queue and then the Task queue.

So that is why the output is.

- Promise Resolved function called
- setTimeout function called

Summary

So the resolved promise is processed faster than an 0-sec setTimeout(). Because of the event loop priorities dequeuing jobs from the job queue which has the promise callback over the task queue which stores the setTimeout() callbacks.

One way to solve this problem is to use a technique called debounce. Debounce is a rate-restriction approach that allows a function or method to run just once after a predetermined period of time has passed. It is a higher-order function, i.e., a function that returns another function. It forms a closure around the function parameters.

Debounce is useful in situations where you want to make sure that a function is not called too frequently. For example, if you have an input field that makes an API call every time the user types something, you can use debounce to ensure that the API call is only made once the user has finished typing. This can help to reduce the number of API calls being made and improve the performance of your application.

There are several ways to implement debounce in a React application. One way is to use the lodash.debounce package, which is a JavaScript library that provides utility functions for common programming tasks using the functional programming paradigm. To use lodash.debounce, you can install the package via npm and then import it into your page component.

npm install lodash.debounce

Then, import it into your page component:

import debounce from 'lodash.debounce';

You can then use it with an input element by passing a callback function and the desired delay time:

<input
  className=""
  placeholder="Search..."
  type="text"
  onFocus={onFocusInput}
  onChange={debounce(onSearchInputChange, 200)}
  onKeyDown={onSearchSubmit}
/>

Another option is to create your own custom debounce function. To do this, you can define a function that takes two arguments: the function that needs to be called after a delay and the duration of the delay. The debounce function can then use setTimeout to call the specified function after the specified delay time has passed. To pass the input from the current target element to the delayed function, you can use the apply method to apply the current value and arguments to the delayed function.

Here's an example of a custom debounce function:

const customDebounceFunction = (function, delayTimeInMilliseconds) => {
  let timer;
  return () => {
    let self = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      function.apply(self, args)
    }, delayTimeInMilliseconds)
  }
}

To use the custom debounce function in a React component, you can use the useCallback hook to ensure that the function reference does not change. This will prevent the component from re-rendering unnecessarily.

const debounceValue = useCallback(customDebounceFunction((nextValue) => onSearchInputChange(nextValue), 1000), [])

By using debounce, you can optimize API calls and improve the performance of your React application. If you're facing a similar issue in your own projects, consider using debounce to handle multiple API calls and reduce the load on your server.

It's worth noting that debounce is just one tool that can help you optimize API calls in a React application. There are other techniques you can use as well, such as caching API results or using a package like Axios to automatically cancel overlapping requests. Experiment with different approaches and see what works best for your specific use case.

So this is how you can handle and restrict multiple API calls in React using debounce. That's it from my side, I tried sharing everything I could. I hope this was helpful!

Let's connect on GitHub or LinkedIn.

Class-based components are created by declaring a class that extends the React.Component subclass. The class includes a constructor method for initializing the component and a render method for rendering the component to the UI. Class-based components also have a state object, which allows you to manage changes to the component over time.

To update the state of a class-based component, you can use the setState method and pass in a new value for the state. For example, if you have a Counter component that increments and decrements a count value, you can use setState to update the count in response to user input.

Here's an example of a class-based Counter component:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({
      count: this.state.count + 1,
    });
  }

  decrement = () => {
    this.setState({
      count: Math.max(this.state.count - 1),
    });
  }

  render() {
    return (
      <div className="counter">
        <h1>Counter</h1>
        <p>{this.state.count}</p>
        <div className="buttons">
          <button onClick={this.increment}>+</button>
          <button onClick={this.decrement}>-</button>
        </div>
      </div>
    );
  }
}

One of the advantages of class-based components is that they have lifecycle methods that allow you to perform certain actions at specific points in the component's lifecycle. For example, you can use the componentDidMount method to fetch data from an API when the component first renders, or the componentDidUpdate method to update the component when the state changes.

Here's an example of a class-based component that fetches data from an API when it mounts:

class DataFetcher extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: [] };
     }

    componentDidMount() {
        fetch(https://api.example.com/endpoint)
        .then(response => response.json())
        .then(data => this.setState({ data }));
    }

    render() {
        return (
            <div className="data-fetcher">
                <h1>Data Fetcher</h1>
                <ul>
                    {this.state.data.map(item => (
                        <li key={item.id}>{item.name}</li>
                    ))}
                </ul>
            </div>
        );
    }
}

While functional components and Hooks are more popular in modern React development, it's still important to understand class-based components and their lifecycle methods. Here are some situations where class-based components may be the better choice:

• You need to use lifecycle methods: If you need to perform certain actions at specific points in the component's lifecycle, you'll need to use class-based components and their lifecycle methods.

• You're working on a legacy codebase: If you're working on an older codebase that uses class-based components, you'll need to understand how they work in order to make updates and improvements.

• You want to use higher-order components: Higher-order components are functions that take a component as an argument and return a new component. They're often used to add additional functionality to a component. Class-based components are a good choice for implementing higher-order components because they have access to the component's instance, which allows you to manipulate the component's state and props.

So, is it worth learning class-based components? It depends on your goals and the type of projects you're working on. If you're starting out with React, it's probably more important to focus on learning functional components and Hooks. However, if you're interested in working with legacy codebases or using higher-order components, it's definitely worth learning how class-based components work.

Here are some key differences between functional components and class-based components:

• State: Class-based components have a state object that can be used to store and update data, while functional components do not. Instead, functional components use Hooks to manage state and side effects.

• Lifecycle methods: Class-based components have a number of lifecycle methods that can be used to perform actions at specific points in the component's lifecycle. Functional components do not have lifecycle methods, but they can use Hooks to perform similar actions.

• Syntax: Class-based components use a class declaration and extend the React.Component class, while functional components are declared with a function.

In summary, class-based components can be a useful tool in certain situations, but in most cases, functional components and Hooks are the preferred choices for modern React development. It's important to understand both approaches and choose the one that best fits your needs.

That's it from my side, I tried sharing everything I could. I hope this was helpful!

let's connect on GitHub or LinkedIn.

So In each part, We will cover 5 Js concepts.
Note:- I am creating these blogs to understand myself and write about these different and important concepts in detail.
So to start we will see some of the basic Js concepts.

1. JavaScript data types.

In JavaScript, there are three primary data types, two composite data types, and two special data types.

• Primary Data Types -: String, Number, Boolean
• Composite Data Types-: Object, Array
• Special Data Types-: Null, Undefined

2. Difference between Null and Undefined.

All the other Data types can be understood by their name just the difference between Null and Undefined is complicated.

• So Undefined means the Variable used in the code doesn’t exist or the Variable is not assigned to any value or the Property doesn’t exist.
• ‘Null’ is a keyword in JavaScript that signifies ‘no value’ or the nonexistence of any value. If you wish to shred a variable of its assigned value, you can simply assign ‘null’ to it.

3. Types of errors in JavaScript.

There are three types of errors:

• Load time errors:- Errors that come up when loading a web page Like improper syntax errors are known as Load time errors and it generates the errors dynamically.
• Run time errors:- Errors that come due to misuse of the command inside the HTML language.
• Logical Errors:- These are errors that occur due to the wrong logic performed on a function.

4. Event Flow in JavaScript.

There are three distinct phases an event goes through:

• Capture
• Target
• Bubble

Events (such as ‘click’ events, for example) are registered not only by the target element where they originate but by all of that element’s parents all the way up to the global element (i.e. the Window/Browser). An Event occurs (a ‘click’, for example) and the click event is registered (this means noted and recognized by the browser).
The registered click event then goes from the Window Object down through the child elements and is registered on each during a ‘Capture Phase’ (<html> –> <body> –> <div> –> <form> –> <button>, for example) to find the Target Element (i.e to find what element was clicked).
Once the click event has registered on the Target (‘Target Phase’), it then bubbles back up the DOM Tree (‘Event Bubbling Phase’) and is registered on all parent elements up through the Window Object triggering any Event Listeners or Handlers in the process.

5. use strict in JavaScript.

use strict is a way to voluntarily enforce stricter parsing and error handling on your JavaScript code at runtime. Code errors that would otherwise have been ignored or would have failed silently will now generate errors or throw exceptions. In general, it is a good practice. Key benefits of strict mode

• Makes debugging easier
• Prevents accidental globals
• Prohibits the use of the same property names twice.
• Throws error on invalid usage of delete

That's it from my side. I hope this was helpful! let's connect on Github or LinkedIn.

In each part, I will try to explain 5 Js concepts or common javascript questions. I am creating these blogs to understand and write about the concepts in detail.
So to start we will see some of the basic Js concepts.

1. Javascript

JavaScript is a high-level programming language that is dynamic, untyped, and interpreted. Along with HTML and CSS, it is one of the three essential technologies for developing Web applications;
It is used by the majority of websites and is supported by all modern web browsers without the use of plug-ins or other extensions.
There are three ways to add JavaScript commands to your Web Pages:

• Embedding code
• Inline code
• External file

2. Javascript Objects

Object-oriented programming is supported by JavaScript. Objects are used to arrange variables, Web pages, forms, text boxes, images, and buttons are all treated as objects on the screen.
Every object has its own properties and methods. Properties define the characteristics of an object. Examples: color, length, name, height, width.
Methods are the actions that the object can perform or that can be performed on the object. Examples: alert, confirm, write, open, close.

3. Javascript Events

The objects on a Web page are organized in a hierarchy. All objects have properties and methods. In addition, some objects also have "events". Events are things that happen, usually user actions, that are associated with an object. The "event handler" is a command that is used to specify actions in response to an event.
Common events are:

• onLoad - occurs when a page loads in a browser
• onUnload - occurs just before the user exits a page
• onMouseOver - occurs when you point to an object
• onSubmit - occurs when you submit a form
• onClick - occurs when an object is clicked
  

JavaScript interacts with HTML via events that occur when the user or browser manipulates a page. An event occurs when the page loads. When a user clicks a button, that is also an event.
Other events include pressing any key, closing a window, resizing a window, and so on.
Developers can use these events to execute JavaScript-coded responses, such as closing buttons, displaying messages to users, validating data, and virtually any other type of response imaginable.
The Document Object Model (DOM) Level 3 includes events, and each HTML element contains a set of events that can be triggered by JavaScript code.

4. Javascript programming paradigms

JavaScript is a multi-paradigm language, supporting procedural programming along with Object-Oriented Programming and functional programming.
Functional programming produces programs by composing mathematical functions and avoids shared state & mutable data.
Functional programming is an essential concept in JavaScript (one of the two pillars of JavaScript). Several common functional utilities were added to JavaScript in ES5. JavaScript supports OOP (second pillar) with prototypal inheritance.

5. Diff between classical inheritance and prototypal inheritance

Unlike most other languages, JavaScript’s object system is based on prototypes, not classes.
Class Inheritance: instances inherit from classes (like a blueprint - a description of the class), and create sub-class relationships hierarchy. Instances are typically instantiated via constructor functions with the new keyword. Class inheritance may or may not use the class keyword from ES6.
Prototypal Inheritance: instances inherit directly from other objects. Instances are typically instantiated via factory functions or Object.create(). Instances may be composed of many different objects, allowing for easy selective inheritance.

That's it from my side. I hope this was helpful! let's connect on Github or LinkedIn.

Microsoft developed the well-known open-source language known as TypeScript. A superset of JavaScript gives the language type safety and static typing. Because TypeScript compiles to JavaScript, it can be used in any JavaScript-enabled environment, including the browser, Node and Deno.

Due to the fact that JavaScript is an interpreted language, occasionally you may have errors in your code that are not apparent until you run it. But because TypeScript is a statically typed language, errors can be caught at compile time rather than during runtime. This means that TypeScript can be used to create safer and simpler-to-debug code.

Why TypeScript?

The aforementioned advantages make TypeScript a well-liked language for usage in contemporary development. These are a few of these advantages:

• Compile-time errors: You can save time and effort by using TypeScript, which can detect mistakes at build time rather than at runtime.
• Strong typing: Whenever you pass the function a type that isn't compatible with it, TypeScript will give you an error because it is statically typed.
• Object-oriented improvements: JavaScript lacks native object-oriented features, whereas TypeScript provides them.
• Tooling and ecosystem: Excellent tooling and support for TypeScript improve the developer experience.
• Organization: Because of namespaces, modules, and better OOP, TypeScript is a fantastic language for arranging your code.

Installing TypeScript

To install TypeScript, you first need to install Node and NPM. If you need help with this, you can follow our how-to install Node guide.

Once you have Node and NPM installed, you can install TypeScript with the following command:

npm install -g typescript

Alternatively, you can use Yarn to install TypeScript:

yarn global add typescript

We want to install it globally, so we can use it in any app we create.

Check to see if TypeScript is installed by running the following command:

tsc -v

If you see a version number in your terminal, you've installed TypeScript successfully.

Using TypeScript

We can use TypeScript now that it has been installed. Make an app.ts file in your root directory. We can begin writing some TypeScript in this section. Let's keep it simple and write a function that takes a number and returns the square of that number:

const square = (x: number): number => x * x;

To test that it is working, let's call the function and print the result:

const square = (x: number): number => x * x;
const result = square(5);
console.log(result);

Great, now that we've written our first TypeScript code, we can move on to compiling it.

Compiling TypeScript into JavaScript

To compile our TypeScript code, we can use the TypeScript compiler. To do so, use the tsc command and pass it the name of the file we want to compile.

tsc app.ts

After the file is compiled, you should see an app.js file in the root directory.

var square = function (x) { return x * x; };
var result = square(5);
console.log(result);

Since app.js is just a regular JavaScript file, we can run it in the browser or Node.

Let's run it in Node:

node app.js

You should see the output:

25

The TypeScript compiler has successfully taken our TypeScript in app.ts and compiled it into valid JavaScript in our app.js.

TypeScript Type Safety

As mentioned earlier, TypeScript is a strictly-typed language, which means that it can catch errors at compile time, rather than at runtime.

Let's look at our function one more time:

const square = (x: number): number => x * x;

Notice how we have to specify the type of the parameter x. This is because we are using TypeScript, and TypeScript requires that we specify the type of the parameter.

This is how TypeScript can help us catch errors at compile time.

We have also typed the return value of the function to be a number as well. This helps the caller know that the function will return a number, instead of a string, or something else. In this way, TypeScript code is somewhat self-documenting.

Watch what happens if we try to accidentally pass a string instead of a number:

const square = (x: number): number => x * x;
const result = square("5");
console.log(result);

If you try to compile this TypeScript code, the compiler will throw an error:

app.ts:3:23 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

3 const result = square("5");
                        ~~~
Found 1 error.

The TypeScript compiler will throw an error, letting you know that the parameter x is of type number and that the argument "5" is not of type number.

Because TypeScript caught the issue at compile time, we can fix the issue by changing the input from a square to a number, saving us from a potential runtime error.

That's it from my side. I hope this was helpful! let's connect on Github or LinkedIn.

Your website should render pages as rapidly as feasible when a visitor visits. Only the topmost part of the page would be visible to the user. Imagine that the page's lower portion contains numerous images. The user will acquire unnecessary data and the website will appear to be of becoming slow if you download all the pictures on the first page.

Instead, it's indeed beneficial to delay image loading until the user sees or is about to see them. This will significantly improve performance, user experience, and even SEO.

So, how can we straightforwardly achieve lazy loading? Several packages address this problem. The react-lazyload package is among my absolute favorites and is probably the most widely used. I prefer to use a third-party package for this because it is fast, performant, and simple to use.

Using react-lazyload

react-lazyload is an open-sourced and free package that controls the lazy loading of React components, images, and other resources. It has over 100k weekly downloads and simplifies lazy loading.

To install the package run

yarn add react-lazyload Then import the component into your application

import LazyLoad from 'react-lazyload'

Then wrap the component you want to lazy load with<LazyLoad>

<LazyLoad>
    <Component />
</LazyLoad>

That’s it. This will load the <Component /> first when it is visible in the viewport.

Specify the LazyLoad component's properties.

The components themselves will default remain hidden till the LazyLoad component loads itself. You have several alternatives depending on the type of component you want to lazy load.

To prevent layout changes whenever the component loads, you can provide a height for images. You may accomplish this using the property height. Set the height to a specific amount of pixels and the component will take up that much space before being loaded.

<LazyLoad height={300}>
    <Component />
</LazyLoad>

Use the offset property to render the component immediately before the user actually sees that portion of the page. Thus, you can specify that a component should be loaded when a user is x pixels away from seeing it.

<LazyLoad offset={100} height={300}>
    <Component />
</LazyLoad>

So when the component is 100 pixels away from the viewport, it is loaded. Since the user won't detect the actual loading and can keep scrolling unobserved, this improves the user experience.

Other attributes, including style, resize events, and placeholders, can be set. To learn more, visit the official documents.

Happy loading, lazy in React!

That's it from my side. I hope this was helpful! let's connect on Github or LinkedIn.

You might want to use TypeScript instead of JavaScript, or a UI library like React instead of plain HTML. You'll also probably want to use a CSS preprocessor like SCSS or SASS. This is where module bundlers like webpack, rollup, parcel, and snowpack come in handy.

But what exactly is a module bundler, and why do you need one?

What is a Module Bundler?

A module bundler is a tool that takes pieces of JavaScript and their dependencies and bundles them together into a single file. This file contains both your own code and the required libraries needed to run your code in the browser.

Why do I need one?

Module bundlers are important because they make it easier to manage complex projects that involve multiple JavaScript files and dependencies. Without a module bundler, you would have to add separate <script> tags for each file in your HTML, which can be a hassle. There are also limitations on the number of concurrent AJAX requests, so fetching and loading all the modules individually can take a significant amount of time.

Module bundlers also help you manage the correct sequential order of dependencies in your HTML. For example, if module A depends on module B, you'll want to make sure that module B is loaded before module A. Without a module bundler, you would have to manually ensure that the <script> tags are in the correct order.

Finally, module bundlers help you avoid issues with global declarations of functions and variables. Without a module bundler, there is a risk of name collision and overridden variables, which can lead to unpredictable behavior in your code.

Here's an example of what your HTML might look like without a module bundler:

<!DOCTYPE HTML>
<html>
<head>
  <title>Module Bundlers</title>
</head>
<body>
  <script src="js/utils/add.js"></script>
  <script src="js/utils/subtract.js"></script>
  <script src="js/utils/multiply.js"></script>
  <script src="js/utils/divide.js"></script>
  <script src="js/utils/maths.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

Each of these files requires a separate HTTP request, so it would take five round-trip requests just to get your application started. With a module bundler, you can combine all these files into a single file, reducing the number of requests and speeding up the loading time of your application.

How to Use a Module Bundler like Webpack.

To get started with webpack, you'll need to install it and the webpack command-line interface (CLI). You can do this with the following command:

npm install -D webpack webpack-cli

To use webpack, you'll need to create a webpack.config.js file with the following options:

• devtool: Enables source map generation in development mode.

• entry: The main file of your React application.

• output.path: The root directory to store output files in.

• output.filename: The filename pattern to use for generated files.

• output.publicPath: The path to the root directory where the files will be deployed on the web server.

Here is an example of what your webpack.config.js the file might look like this:

const path = require("path");

module.exports = function(_env, argv) {
  const isProduction = argv.mode === "production";
  const isDevelopment = !isProduction;

  return {
    devtool: isDevelopment && "cheap-module-source-map",
    entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "assets/js/[name].[contenthash:8].js",
      publicPath: "/"
    }
  };
};

This configuration works fine for plain JavaScript files, but when using webpack with React, you'll often need to perform additional transformations before shipping your code to users. This is where loaders and plugins come in handy.

Loaders are transformations that are applied to your code before it is bundled by webpack. They allow you to import and use non-JavaScript files, such as TypeScript or SCSS, in your JavaScript code. For example, the following configuration uses the ts-loader and sass-loader to transpile TypeScript and SCSS files:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader"
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }
};

Plugins are extensions that allow you to perform a wide range of tasks, such as generating an HTML file or optimizing your code for production. For example, the HtmlWebpackPlugin generates an HTML file that includes a <script> tag for your bundled JavaScript:

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html"
    })
  ]
};

With these configurations in place, you can run a webpack to build your application. You can use the following command to build in development mode:

webpack --mode=development

And the following command to build in production mode:

webpack --mode=production

In development mode, webpack will generate source maps and perform transformations in an unminified manner. In production mode, webpack will minify your code and perform other optimizations to reduce the size and improve the performance of your application.

Module Bundlers vs. Create React App

Now that you have a basic understanding of module bundlers, you might be wondering how they compare to Create React App (CRA).

CRA is a tool that generates a template for a new React application with webpack and other dependencies already set up for you. It allows you to get started with a new React project quickly without having to worry about configuring webpack yourself.

However, one of the downsides of CRA is that it hides the webpack configuration from you. This can be a disadvantage if you want to customize the configuration or add additional plugins and loaders. In these cases, you'll have to eject the configuration from CRA, which can be a complex process.

On the other hand, using a module bundler like webpack gives you full control over the configuration of your build process. This can be a powerful advantage if you have specific requirements or need to optimize your build process for performance.

Conclusion

Module bundlers like webpack are important tools for building complex React applications. They allow you to manage multiple JavaScript files and dependencies and perform transformations on your code before it is bundled for the browser. While Create React App is a convenient option for getting started with a new React project, using a module bundler gives you more control over the build process and can be a powerful advantage for more advanced projects.

That's it from my side. I hope this was helpful! let's connect on GitHub or LinkedIn.

I was working on a project last week where I needed custom webpack configuration. CRA was making things complicated with "eject" and all that headache. So I thought why not set up everything from scratch and have full control?

Let me share my approach which is working perfectly for our team now.

Why Not Use CRA?

CRA is good for beginners, no doubt. But when you work in production:

• It installs too many unnecessary packages
• Customization requires ejecting which is irreversible
• Build size becomes larger than needed
• You don't learn what's happening behind the scenes

Steps to Set Up React Without CRA

1. Initialize Your Project

First thing first, initialize your npm project:

npm init

Fill the details or simply use npm init -y if you are in hurry like me always!

2. Install Required Packages

Now we need to install required dependencies:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin

What are these packages for?

• @babel/core: Main babel package to transpile ES6+ to browser compatible JavaScript
• @babel/preset-env: Preset for converting modern JavaScript
• @babel/preset-react: For JSX support (most important for React!)
• babel-loader: Connects babel with webpack
• webpack: Module bundler (the heart of our setup)
• webpack-cli: Command line interface for webpack
• webpack-dev-server: Development server with hot reload
• html-webpack-plugin: Creates HTML files to serve webpack bundles
• css-loader: Interprets @import and url() like import/require()
• style-loader: Injects CSS into DOM

Also, don't forget to install React itself:

npm install react react-dom

3. Create Basic Files

We need minimum 3 files to start with:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My React App</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

App.js

import React from 'react';

function App() {
    return (
        <div>
            <h1>Hello from React without CRA!</h1>
            <p>This setup is much faster and lighter.</p>
        </div>
    );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

4. Configure Webpack

Create webpack.config.js in root:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./index.js",  // Note: fixed the entry point path
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index_bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,  // Added jsx support
        exclude: /node_modules/,  // Important to exclude node_modules!
        use: "babel-loader",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],  // Added to resolve imports without extensions
  },
  mode: "development",
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",
    }),
  ],
};

5. Create Babel Configuration

Create .babelrc file in project root:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

6. Update package.json Scripts

Add these scripts to your package.json:

"scripts": {
  "start": "webpack serve --open",
  "build": "webpack --mode production"
}

Running Your App

Now simply run:

npm start

Webpack dev server will start and open your app in browser. For production build:

npm run build

This will create optimized files in dist folder ready for deployment.

Troubleshooting Common Issues

If you face "Module not found" error, check your file paths. I wasted 2 hours last time because I wrote ./src/index.js but my file was in root folder!

Sometimes babel config doesn't pick up. Try creating babel.config.js instead of .babelrc.

Conclusion

Setting up React without CRA gives you full control and better understanding of your project structure. It's not that complicated once you get familiar with webpack basics.

Hope this helps someone! If you have any questions, drop a comment.

Happy coding!

Firebase is a BaaS (backend as assistance) platform developed by Google for making web and mobile applications. It provides developers with a number of tools and services to help create quality applications and scale over a long time as their user base increments.

A few outstanding features Firebase gives:

• Authentication/Validation — Firebase Authentication can be used to manually integrate one or more sign-in methods into an app. • Realtime database — data is synced across all clients in real-time and remains available even when an app goes offline. • Hosting - Firebase gives quick hosting to a web application. • Analytics — allows you to track and prioritize issues with your app, as well as monitor the success of your app • It offers Free and Paid options

Setting up your Firebase account

To start the Firebase account setting, you'll need to have a Google account. If you don't have one or need to make one for Firebase you can go to the Google Gmail Home page and make an account for free.

Once you’ve made an account, go to Firebase and click the ‘Get started’ button.

Continue to click ‘Create a project’.

Now enter your project name & click on the check box. Then click continue

Again just click on continue

If you want to analytics then, allow the analytics, and then click ‘create project’.

Now Select Your Google Analytics Account.

Firebase will then create the project and then click on continue to direct you to the project’s overview.

Depending on the device your application is for, select the right icon (iOS, Android, Web). We'll associate our Firebase undertaking to a web application in this blog so go ahead and select the web icon. You'll be prompted to register your application.

Once registered, Firebase will create your Firebase SDK script that you will use to connect your react-app to the project.

Click 'continue to console' and you will be directed back to the overview page.

• To get to this code whenever simply click on the settings dial and select 'project settings'

Select your database From your Firebase console, select the 'Build' column on the right-side panel and various sub-headings will show underneath it - you'll want to take a look at Firestore Database and the Realtime Database.

The difference between the two described by Firebase is: • Cloud Firestore is Firebase's newest database for mobile application improvement. It expands on the achievements of the Realtime Database with a new, more intuitive data model. Cloud Firestore additionally includes more features, faster queries, and scales farther than the Realtime Database. • Realtime Database is Firebase's original database. It's an effective, low-latency solution for mobile applications that require synced states across clients in real-time.

For this blog, we’ll choose Firestore as our database.

Go ahead and click ‘Create database’. You’ll then be prompted to start in Production or Test mode.

Then, at that point, choose an area where your information will be stored. Select the best area for your requirements and click 'Enable'.

Once done, you’ll be redirected to your Firestore database.

Fantastic. We now have a project registered with Firebase and a Firestore database associated with the project. You can manually add information to your database through this control center and follows a Collection to Document model.

Now let's connect it to our react-app.

Linking Firebase project to our react-app with Firebase SDK

If you haven’t created a react-app yet, go ahead and enter this line in your terminal in the folder where you’d like to store your app.

npx create-react-app My First Project

Once create-react-app has done its thing, make a new folder titled ‘utils’ within your components folder. Within the ‘utils’ folder create a file called ‘firebase.js’.

Within the file add your imports at the top and create a firebaseConfig variable using the SDK code from your Firebase project settings. Once the firebaseConfig variable has been made, initialize it via firebase.initializeApp() method. After that create a database variable to reference your project’s firestore database.

import firebase from 'firebase/compat/app'; import "firebase/firestore"

const firebaseConfig = { apiKey: "AIzaSyBkzpkAYhekD5zDA-jOBpRA0ypq9CWHYZE", authDomain: "level-storm-330005.firebaseapp.com", projectId: "level-storm-330005", storageBucket: "level-storm-330005.appspot.com", messagingSenderId: "669292141198", appId: "1:669292141198:web:50599f5b45b83950d747df" };

firebase.initializeApp(firebaseConfig);

export const db = firebase.firestore();

export default firebase;

Once that has been set up. The last step is to import it into your index.js file.

import React from "react"; import ReactDOM from "react-dom"; import Routes from "./routes"; import firebase from "./utils/firebase";

ReactDOM.render( , document.getElementById("root") );

Although the line is subdued it's okay because you’ve initialized the app and is now connected to your index.js file.

That it! You’ve officially created a Firebase project with an accompanying Firestore database and linked it to your react-app!