React — A Front-End Revolution

Why, Where, and When to use React…

What is React.js?

What is React.js? A Framework? or A Library? Ok, React is a small library of Javascript. A framework is basically a complete solution to the full development process with its own strict rule. Whereas a library is a small package focused on any single task and flexibility of usage. React is basically for UI development and It is doing it wonderfully. React is about unbeaten in dynamic UI design. A pure example of Simplicity is the best.

Why it is named React?

It an interesting question but the answer is simple. As it reacts when we interact and changes itself according to the interaction so it is named React. I will try to explain some magical features react has so that you can understand the importance react can create in the development field.

Virtual DOM

In our traditional development sector, we use HTML, CSS to show the website UI and plain Javascript to make the UI interactive. So when we need to update a part of UI, we had to basically update the whole DOM API. So it consumes more time and sometimes causes application crushes. But react introduce a new concept here and that is virtual DOM. When we interact or have to update a specific part of UI first the virtual DOM takes the command and then compares the change with the native DOM API. Then makes the changes on that specific node. So all other nodes remain untouched and it saves time. It also prevents the whole UI from re-rendering.

JSX

JSX- Javascript XML. Mainly for this, we don't have to write react codes in react’s language. We can write in our previously known HTML language. And the React API converts it into a browser suitable language.

Component

React mainly breaks the code writing system. In React you can break the code into different parts. The advantage is we can make a different component for specific work. So basically the total UI is broken down into pieces based on the task the part does. It makes the code clean, easier to understand and we can reuse the components. So if a webpage has 5 same parts we will write code once and then just call the component 5 times.

Let's say a webpage has a clock to display in a small part. We can make a component called Clock and can use it when we need it.

const Clock=()=>{
  <p>${new Date().toLocalTimeString()</p>
}

Nesting

A react component must return something and this something should be only one node. We cannot render two components next to each other. We can also render a component as a child of another component. The wrapper component is called the parent component. This is much useful for state sharing. State from parent component can be easily passed to the child component. Or we can wrap them with div. If we don’t want to create another div node we can use React Fragment. It will not make the child component a child node.

<React.Fragment>
 <Button />
 <Display />
 </React.Fragment>

We can use a shortcut for this

<>
 <Button />
 <Display />
 </>

<> </> This tag also represents the React Fragment Tag

Element vs Component

We do a big mistake by thinking that react component and element are the same things. But it's not true. Component is a part of the total project, which is independent and reusable. On the other hand, the element is what a Component returns. So basically element is a part of a component.

Props

Props are the inputs for a component. And the output is UI. If we want to pass data from one component to another we will get the data in the receiver component as props. It is object mainly. We have to pass data as attributes of HTML.

Let’s see an example,

const PropsExample = (props) => {
  <div>
    {props.example}
  </div>
}
<PropsExample example={example} />

We can also use the object destructuring method. It will be more convenient. As we can easily identify what properties we will use and can ensure no extra data is receiving.

const PropsExample = ({example2}) => {
  <div>
    {example2}
  </div>
}
<PropsExample example1={example1} example2={example2} />

Here we see that we didn’t import the example1 as we don't need this.

States

As we previously said react is wonderful for interactive UI making. We can add, delete or update UI elements depending on our interaction. For this, we need to store our data to show the modified version. States are useful in this case. States are like variables of javascript.

const StateExample = () => {
let state="something";
<div>
    {state} //something
  </div>
}
<PropsExample />

It will show something text in UI. But here we have no clue to change or update the state. For this, we can use the useState hook.

const StateExample = () => {
const [state,setState} = useState("something")
<div>
    {state} //something
  </div>
}
<PropsExample />

useState hook is an array of state holders and a function for state updating, Like here we assign “something” as an initial value in the state and setState can be used for updating it. Like id we execute setState(“new Something”) the state will be updated with this new String.

Life cycle

Component has 3 stages of executing.

1. Mount
2. Update
3. Unmount.

When a state of the component is updated or changed the component is re-rendered to show the updated UI. In the class component, we have three methods to define what to do in these three stages, and in Functional component, we have useEffect hook to manage the life cycle method.