We can get the elements inside the opening and closing tag of a component using props.children property.

The post Using Components as Templates in React JS appeared first on MaXEster Technologies | Technical Blog.

1. Horizontal scaling is also known as scaling out.
2. Horizontal scaling refers to the process of adding more machines to handle the huge incoming traffic.
3. Horizontal scaling helps in parallel processing.
4. It is like if we want to finish a work early, then we have to increase the manpower.

Vertical Scaling

1. Vertical scaling is also known as scaling up.
2. Vertical scaling means increasing the power of a machine in the form of RAM, Memory, Processort or Bandwidth.
3. Vertical scaling is used to perform resource intensive tasks.
4. Vertical scaling is like hiring a more skilled employee to complete the work.

Difference between Horizontal and Vertical Scaling

The post Horizontal and Vertical Scaling In React JS appeared first on MaXEster Technologies | Technical Blog.

React Js is a Javascript library, used to create single page web applications. React uses JSX for writing its components. JSX stands for Javascript XML. In jsx we can write HTML and JS together.

As React Js is a library, so for various features like routing we have to install separate packages.

Angular Js :

Angular Js is a Javascript framework, which can also be used to make single page web applications. Angular is Js framework, which means it has more inbuilt features. Angular also uses the component based approach to create websites.

Difference between React Js and Angular :

The post React Js vs Angular 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.