Introduction

React is a popular open-source JavaScript library used for building user interfaces. It was developed by Facebook and was made open-source in March 2015 which is now maintained by a large community of developers. React allows developers to build reusable UI components and manage the state of their applications in an efficient and predictable way. We'll discuss component in great detail later on.

React follows a component model, where the UI is broken down into small, isolated, and reusable components. Each component renders a small piece of the User Interface and can be reused throughout the application. React uses a virtual DOM (Document Object Model) to update the UI efficiently, which helps improve the performance of applications built with React.

React uses JSX (JavaScript Syntax Extension), which allows developers to write Html elements in their JavaScript code. This makes it easy to create and manipulate the UI using JavaScript.

Components and Modules in React

A Component is a piece of code that represents a part of a user interface. Components are the building blocks of a React application, and they are used to create reusable UI elements. In React, components are typically JavaScript functions or classes which return a JSX element.

Example of components are:

Function based component-

 import React from 'react';

const FunctionComponent = () => {
  return <h1>Hello, World!</h1>;
};

export default MyComponent;

Class based component-

   import React, { Component } from 'react';

   class ClassComponent extends Component {
     render() {
       return <h1>Hello, World!</h1>;
     }
   }

export default MyComponent;

Name of the component can be decided by the developer but while choosing a name for a React component, it's important to pick a name that is descriptive and reflects the purpose of the component. The name should also be unique and not conflict with any other components or variables in your application. It is conventional to use PascalCase for component names. This means that the first letter of each word in the name should be capitalized. For example, "MyComponent" or "ProductList". A class-based component has a few advantages over functional components, including: the ability to use lifecycle methods and the ability to maintain internal state, but these topics are out of scope of this blog.

Modules are a way to organize the code into reusable blocks. They provide a way to separate a component's logic and state, and to import and export its functionality between different parts of an application. Modules are nothing but components which are made globally available by using import and export statements (Note - External libraries can also be used to create a Module). ES6 introduced the import and export keywords to create modules natively in JavaScript and it is the most common way to create a module.

// myModule.js
export const myFunction = () => {
  console.log('Hello, World!');
}
export const myVariable = 'Hello World'
export default class MyClass {
    constructor() {
        console.log('MyClass constructor');
    }
}

The above snippet is a module that is exported by using the export keyword and its functions are being used in the code below by using the import keyword.

// main.js
import { myFunction, myVariable } from './myModule';
import MyClass from './myModule';

myFunction(); // prints "Hello, World!"
console.log(myVariable); // prints "Hello World"
const myClass = new MyClass();

In JavaScript, there are two ways to export a module:named export and default exports.

When there is more than one variable, function, or class in a module, and you want to use only some of them, then in that case, named export is used which allows you to export one or more variables, functions, or classes from a module by giving them a name. This means that when you import the module, you must use the same name to access the exported values. Here's an example of a module with named exports:

// myModule.js
export const myFunction = () => {
  console.log('Hello, World!');
}
export const myVariable = 'Hello World';

And here's an example of how you might import and use the named exports in another file:

// main.js
import { myFunction, myVariable } from './myModule';

myFunction(); // prints "Hello, World!"
console.log(myVariable); // prints "Hello World"

A default export allows you to export a single value from a module as the default export. This means that when the module is imported, there is no need to use a specific name to access the exported value, instead, any identifier can be used to import the default export. Here's an example of a module with a default export:

// myModule.js
export default class MyClass {
    constructor() {
        console.log('MyClass constructor');
    }
}

This is how you might import and use the default export in another file:

// main.js
import MyClass from './myModule';

const myClass = new MyClass();

In short, Named exports allow you to export multiple values from a module and import them with the same name. Default exports allow you to export a single value as the default export, and import it with any identifier. You can use both of them in the same module.

That is it for this article, this is the 2nd blog of React.js Mastery series. If you got any value from this blog, give it a thumbs-up and if you have any query, mention it in the comment section and do subscribe to this blog to get more updates on the running series.

Thanks a lot for reading till the very end! 😊