# React Js End - End

### What is React Js?

React ***is a JavaScript-based UI development library***. Although React is a library rather than a language, it is widely used in web development.

* So, this is used for a single-page application.
    
* Create a **User Interface** from components.
    

### Why does ReactJS load data very quickly?

React Uses the virtual DOM  
**example:-**

```xml
<ul>
    <li>apple </li>
    <li>dog</li>
    <li>mango</li>
</ul>
```

In the above code, if we want to change the data of the second list, with the help of the **Virtual DOM**, we can change that specific list without needing to alter the entire data.

### Why learn React JS?

1. Maintained by Facebook
    
2. Highest demand due to the fast speed
    
3. React is simple to learn.
    
4. Large community for your support
    

### Which companies are using React?

* Facebook
    
* Airbnb
    
* Walmart
    
* Discord
    
* Pinterest
    
* Uber Eats
    
* Atlassian
    
* Netflix
    
* Salesforce
    

### How to get a module in Javascript?

### How to import and export modules in Javascript?

Modules are a way to organize your JavaScript code into reusable units. They promote code separation, maintainability, and better code structure. Here's a breakdown of importing and exporting modules:

**Exporting Modules**

1. **Default Exports:**
    
    * Use the `export default` statement before a function, class, or variable to make it the module's default export.
        

Only one default export is allowed per module.

```plaintext
export default function greet(name) {
    console.log("Hello, " + name + "!");
}
```

2. **Named Exports:**
    

* Use the `export` statement with curly braces `{}` to export multiple functions, variables, or classes.
    
* You can give them custom names using `as` for convenience.
    

```plaintext
export function add(x, y) {
    return x + y;
}

export function subtract(x, y) {
    return x - y;
}

export const PI = 3.14159;
```

**Importing Modules**

1. **Importing Default Exports:**
    
    * Use the `import` statement followed by the default export name to import the default export from a module.
        

```plaintext
import greet from './greet.js'; // './' indicates current directory

greet("Alice");
```

2. **Importing Named Exports:**
    

* Use curly braces `{}` with the `import` statement to import specific named exports.
    
* You can optionally give them aliases using `as`.
    

```plaintext
import { add, PI } from './math.js';

const result = add(5, 3);
console.log(result); // Output: 8

console.log(PI); // Output: 3.14159
```

**Additional Points**

* Modules are typically saved with the `.js` extension.
    
* For browser environments that don't natively support modules, you might need a bundler like Webpack to handle them.
    
* You can also import modules from external libraries using a module bundler or a CDN (Content Delivery Network).
    

By effectively using modules, you can keep your JavaScript code organized, maintainable, and reusable across different parts of your application.

  
Note: There are 3 types of Modules

| Type of Module | ModuleDescription | Usage |
| --- | --- | --- |
| Built-in Module | Pre-installed with the language | Import by name and use functions/variables |
| Third-party Module | Downloaded from package repositories | Use a package manager (e.g., npm, pip) to install and import |
| Custom Module | Created by you | Organize code in reusable modules, import/export specific parts |