To use it in our projects, we first have to import it.

Creating a server

Using HTTP module we can create a server and make that server listen on the specified port. We can do this using the createServer() method of the HTTP module.

Rendering HTML using HTTP module

Reading the url and sending the Header field

The post HTTP Module in Node Js appeared first on MaXEster Technologies | Technical Blog.

Modules in Node Js are similar to the libraries in JS. Modules help to breakdown the complex logic into a collection of simple ones.

Types of Modules

Core/Inbuilt Modules : We don’t have to download these modules, they are installed along with the Node Js installation. We can use core modules by just importing them in our code. Some examples of the core modules are http, fs, os, path etc.

Third Party Modules : These modules are not included with the Node Js. We have to download them in our project. Most of the packages we use are available on npm. NPM stands for Node Package Manager, npm is a code repository, where you can find almost all types of modules.

Local Modules : Local modules are created by ourselves according to the need and can be used at the place where it is required.

The post Modules in Node Js appeared first on MaXEster Technologies | Technical Blog.

Node Js is used to create data-intensive web applications or APIs as it uses the asynchronous methodology.

Why should we use Node JS?

1. First of all, Node Js is based on JS, so you will definitely use JS for the frontend of your web applications. Using Node Js on the backend will help you to use the same JS on the backend as well (with some changes), so you don’t have to learn a different language for the backend.
2. Node JS can easily handle the basic CRUD (Create Read Update Delete) operations on the web apps.
3. We can send back dynamic content to the client and can also handle form submissions.
4. Node Js supports all the HTTP methods like get, post, put, patch, delete and the list goes on.
5. Using Node Js, you can also implement the authentication and authorization on your web apps.
6. As Node Js is based on asynchronous methodology, its asynchronous nature eventually results in the better performance.
7. You can connect Node Js to various databases like MySql, MongoDB etc.

Creating a basic server using Node JS

The post What is Node Js? appeared first on MaXEster Technologies | Technical Blog.

Memoizing a value is like caching a value so that it doesn’t need to be recalculated.

Syntax: const value = useMemo(functionThatCalculatesTheValue, dependencies);

useMemo() executes the functionThatCalculatesTheValue, only if the dependencies array got changed.

The post How to use usememo hook in React Js? appeared first on MaXEster Technologies | Technical Blog.

The post How to useCallback() in React Js? appeared first on MaXEster Technologies | Technical Blog.

1. Logical AND Operator :

Logical AND operator is used to render the components according to a condition. The first statement is condition then && (AND Operator) and then the components or element. Note that inside javascript, we use && for writing conditions inside the if-else statement, there it evaluates both the expression and it the condition satisfies then it executes the block, but in React JS, inside return statement where we write JSX, it evaluates the first condition and renders the second statement, which is a component or element.

2. Ternary Operator :

We can say that it is a short form of the if-else statement, which can be written in one line.

Syntax : condition ? expression1 : expression2

If the condition is true then execute expression1, else expression2

3. if Statement :

It is a simple if statement, which can be paired with else or a bunch of else-if statements.

The post Way to Implement Conditionals in React JS appeared first on MaXEster Technologies | Technical Blog.

In React Js we can add css using 3 ways.

1. Inline CSS
2. A regular CSS File
3. Using Modules

Regular CSS File

For adding regular css to our file, we have to import the css file using import keyword. Then we can use the classes defined in the stylesheet in our application.

Inline CSS

Every element takes a style attribute, inside that we have to pass a object containing the style definitions.

Using Modules

Modules are also a way to add CSS in react js files, it is useful as it removes the problem of global css conflicts. Here we have to import it using the import keyword, the css module file provides an object, where the classes are the keys and the style definition is their corresponding values.

NOTE : All the css files will be written in the same way as the normal css files. Only while using modules for css, the css files will be saved using the filename.module.css

The post How to use CSS in React JS? appeared first on MaXEster Technologies | Technical Blog.

To install it, simply write the below given command in the terminal :

npm i –save react-router-dom

To use the react router dom inside your project, you can refer the code provided below :

The post How to use React Router DOM in React Js? appeared first on MaXEster Technologies | Technical Blog.

Before the hooks were introduced, if we wanted to use the states in our components, then we had to convert it to the class based component. As we all know functional components are a lot easier to understand and write. Therefore, hooks came to take there game one level up.

There are many hooks available in react js like useState(), useEffect(), useMemo(), useReducer(), useContext() etc. We can also create are own hooks.

There are some conditions which we have to follow, if we want to use hooks in our components.

1. Hooks must be used inside the react components, not in any regular javascript function.
2. Hooks must not be used inside the local blocks, loops.
3. Hooks must appear at the top of the component functions.

Hooks in React JS

1. useState() :

useState() hook is used to track the state of the component. A state contains the data of a component at any particular instance of a time.

To use the useState() hook, First we have to import it.

The useState() hook takes initital state as a parameter and returns two values, i.e. current state and the function to update the state. We can’t update the state directly.

2. useEffect() :

useEffect() is a hook used in react js to handle the side effects like fetching the data or updating the DOM, if a particular event occurs.

In order to use useEffect() hook, we first have to import it.

useEffect() hook takes two values, one is the function to be executed and another is the dependency array. The dependency array contains the value upon whose updation the useEffect() hook will re render. If you want that the useEffect() hook should render only once then you can pass a empty array.

3. useContext() :

useContext() hook is used to manage the state of the whole application. It is used to pass the data in all the components without using the prop drilling. Whenever the components are nested deeply inside the component tree, at that time passing states using props become cumbersome. In that case the useContext() hook comes to rescue us.

We can create a context using the createContext() method.

To use context inside the components, we have to wrap the components inside the method provided by the react, which is <context_name.Provider></context_name.Provider>.

Now for using the context values, we have to use the useContext() hook, which takes the context object which is returned by the createContext() method and it returns back the current value of that context.

4. useReducer() :

useReducer() hook in react js is used to manage the state. Its purpose is similar to the useState() hook but it is preferred in complex applications where the state logic is complex and has different types of functions to perform the updation.

Syntax:

const [currentState, dispatchAction] = useReducer(reducerFunction, initialState, init)

useReducer() takes 3 arguments reducerFunction which will be used to change the state, initial state of the application and a init function which is used to load the initial state lazily.

5. useRef() :

useRef() hook is used to persist a particular value between multiple renderings, For example , if we want to count how many times a particular component got rendered.

The post What is Hooks in React JS? appeared first on MaXEster Technologies | Technical Blog.

Events in react js are of many types like mouseover, click, double click, drag, drop etc.

In react js we use camelCase representation to define any type of event. For example in HTML, we use onchange=”” but in react js we use it as onChange=””.

Example :-

Note : We didn’t use the parenthesis in onClick={toggleColor} as we don’t want to execute it, we just passed the reference.

If we want to pass the arguments, if any event occurs then we have to use the arrow function.

onClick={ (val) => func(val) }

The post What is Events React JS? appeared first on MaXEster Technologies | Technical Blog.