Process of Understanding and Adapting to React Js

When I got to know that our company will be focusing on new technologies, I was excited and nervous at the same time. JavaScript is the language that is currently trending, so it was an obvious preference. We were using JavaScript but only in limited projects that are making the pages dynamic. There are many frameworks built-in JavaScript for both frontend and backend. Initially, it was finalized API will be built in Nodejs as it is widely used and very easy to understand and as it is widely used it is easy to develop and debug code. I found some useful tutorials for Express Js (Node Js framework) and it felt very easy to understand as we had experience in Laravel Framework (PHP framework). API for me was a straightforward task but the real fun began when we started with the frontend part. Initially, it was finalized to go with AngularJs (framework) as it is a widely used JavaScript framework but it was not straightforward to understand and many people had issues adapting the angular Js. And then we were introduced to React Js (we got tutorials from an expert as well).

So, after working on React Js for the last 4 months, I will put forward the blockers we had and also the interesting bits of React Js. many people confuse it as an Alternative framework to AngularJs but it is not. It is an open-source Library created and managed by Facebook. React Js can be integrated with any framework as it is the V of MVC that is, it just renders the code in the browser with the help of JSX. So, let’s start with the Advantage we felt of the React Js.

1) Easy to Use

Documentation is the key to any framework/library and the documentation for reacting is maintained very well and it’s easy to understand and move forward with. There are also many courses and tutorials available online which helps further.

2) Reusable Components

Components are used for managing the Html code which will be further rendered in the browser. A component has its own set of control and logic. Components can be nested with each other that further helps for reusability.

3) Virtual Dom

React Js uses a virtual DOM-based mechanism to fill data in HTML DOM. The virtual DOM works fast as it only changes individual DOM elements instead of reloading complete DOM every time

4) Benefit of JavaScript Library

React Js is used by most of the Developers thanks to its flexible nature, there are no specific parameters. Developers get a free license to manage the code as per their feasibility

Now every coin has two sides and React Js is no different. Adapting to React Js was not a tricky task but there were some blockers that we can consider as a disadvantage. The following are the Disadvantages listed below.

1) JSX is a barrier

React Js uses JSX which has a syntax similar to Html, but therein lies the problem. Any developer who has used Html finds it hard to adapt to the JSX due to its complexity.

2) V of MVC

React Js cannot be used as a stand-alone platform as it is wholly dependent on the other technology to manage the data. They are only the UI layers of the app and nothing else.

3) Hard to Adapt the Pace of its Development

React Js introduced hooks which help in reducing code Complexity and Reusability but for a newbie, it becomes hard to debug the code as all the previous code is not built around hooks. So in general developers have to always adapt to the changes being done in the library.

4) Documentation can be Maintained Better

As I mentioned above React Js is a very rapidly growing library but if we look at the documentation it does not provide adequate information on the new things introduced and the developers are left with trial and error for adapting to new things.

5) Not SEO Friendly

There are tools available to Render our Meta tags on the page but unfortunately, Facebook does not crawl through them and we are left with managing the Tags with some other Platform for the Particular Page.

Overall if we consider, React Js is the Present and the Future of JavaScript web development. It has its sets of Pros and Cons but to be honest it makes the process of Dynamic web development fun and easy thanks to its flexibility.

What are React Hooks?

React Hooks were introduced at React Conf October 2018, where two major functional
components were highlighted – useState and useEffect. Function compontents were initially known as functional stateless components (FSC), where they are finally able to
useState with React Hooks. Therefore, many people refer them as function
components.

Hooks let you “hook into” the underlying lifecycle and state changes of a component
within a functional component. More than that, they often also improve readability and
organization of your components. We can check 2 hooks that are used regularly while
using React Js.

1) useState:
import React from 'react';
function App() {
return (
<div>
<h1>0</h1>
<button>Change!</button>
</div>
);
}

In this above example, this is a simple functional component in which we can import our
first hooks useState for Handel state data.

import React, { useState } from 'react';
function App() {
const value = useState();
console.log(value);
return (
<div>
<h1>0</h1>
<button>Change!</button>
</div>
);}

If we run this code and console the data then we can get a response as below
> [null, ƒ()]
And if we add an argument into use state
const value = useState(true);
we can get a response as below
> [true, ƒ()]
Now we can access state value and render it in <h1> in our component such as


import React, { useState } from 'react';
function App() {
const value = useState(0);
console.log(value); // [0, ƒ()]
return (
<div>
<h1>{value[0]}</h1>
<button>Change!</button>
</div>
);
}

There are 2 types of functionality that store data into use state

1) Object destructuring
2) Array destructuring

Array destructing is almost the same, but uses square brackets [ ] instead of curly
braces { }.
Using array destructuring, we can get the initial value of state from the useState() hook.

import React, { useState } from 'react';
function App() {
// remember, there's a second item from the array that's missing here, but we'll come
right back to use it soon
const [count] = useState(0);
return (
<div>
<h1>{count}</h1>
<button>Change!</button>
</div>
);
}

Right now we can get initial state value but how we can change the value in hooks that
are described in the below example


function App() {
const [count, setCount] = useState(0);
function change() {
setCount(prevCount => prevCount + 1);
}
return (
<div>
<h1>{count}</h1>
<button onClick={change}>Change!</button>
</div>
);
}

Here we first set initial count to use state is 0 then for an update that
counts we can use onclick event listener on button click.
Remember that useState() hook returns an array with 2 members. The second
member is a function that updates the state!

2)useEffect

In class-based components, we needed to know the basics of lifecycle methods and which
method is perfect for different situations. useEffect hook simplified this situation. If you wish to
perform side effects, network request, manual DOM manipulation, event listeners or timeouts
and intervals.
useEffect hook can be imported just like useState.

import React, { useState, useEffect } from 'react';

To make useEffect work, we pass it an anonymous function as an argument. Whenever React
re-renders this component, it will run the function we pass to useEffect

useEffect will run every time the component re-renders, and the component will re-render every
time the state is changed.
So if we write the following code, it will get us stuck in an infinite loop! This is a very common
gotcha with useEffect

If you want to call useEffect on some call function that also possible in react hooks.