Know More About React
So let’s begin with the introductory glimpse of React. React is basically a library of JavaScript for building user friendly interfaces
1.Framework: For making it clearer that weather React is a library or framework, we need to discuss about both library and framework. React is a JavaScript library , it’s not exactly a framework. You’ll not get every solution in React instead you’ll need to use more libraries along with react to go to the solution.
On the other hand Frameworks are a complete solution. They serve a great purpose, mostly for the young programmers and startups. In frameworks many smart design decisions are already made for you, which help to stay more focused on making a well versed application-level logic.
There are some disadvantages of framework too. This usually cause to the senior developers and programmers when they go for a large level application and code- bases.
According to some developers, Frameworks are not always handy and user-friendly. The expectation from a framework is that a framework should code everything in a certain way, but it will not. Frameworks are usually large and full of features. If someone need to use any of the features of a framework, they need to include whole thing of that framework.
2.Library: So to discuss about a library, a library is more user-friendly. It follows the unix philosophy because it focuses on just one thing and doing that exact thing in a beautiful way. React follows the same way.
User Interface: User Interface is something what we put in front of a users when they interact with a device. Everything and everywhere there’s interfaces from a cooler to AI car’s dashboard. We command to react whatever we need, React just follows the command instructed by us. Since browsers understand JavaScript, we use React to describe Web User Interfaces.
3.DOM: DOM, which stands for Document Object Model, is a cross platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree.
4.Reconciliation: React provides s declarative API so that you don’t have to worry about exactly what changes on every update. This makes it easier for writing applications but it might not be obvious how this is implemented within react.
5.The Diffing Algorithm: React generally compares two root elements while diffing two trees. This varies depending on the types of the root elements.
6.React & Components: React is designed by components structure. That means React works with a lot of components. We design small components and put all of them together to build a bigger one. The components that are big or small can be used again again and even used in other projects whenever needed. There are some components that are pure but you will find side effects in a component. As for example a component might change the HTML ‘title’ of a web page when it gets mounted in the browser or might scroll the browser view into a certain position.
7.Components and Props: Components basically split the UI into independent, reusable pieces, and think about each piece in isolation. The main concept is that components are like JavaScript functions. They take arbitrary inputs which is called ‘props’ and return React elements describing what should appear on the screen.
Functions & Class Components: The very simplest way to define a component is to write a JavaScript Function
function demo(props){
return(
<div>
<hi>Hello I’m writing a blog on medium. How do you feel about this?</h1>
<h2>Please don’t forget to drop your valuable feedback </h2>
</div>
)
}
The above function is a valid React Component because it accepts a single props which means properties object argument with data and returns a React element. These components are called “function components”. Besides these, we can also use ES6 Class to define a component.
8.Rendering a Component: In the above discussion, we encountered React elements that represent DOM tags.
const element = </div>
Moreover, elements can also represents user-defined components.
const element = <Welcome name= “Salma”/>
Composing Components: Components refer to other components in their output. This lets us use the very same component abstraction for any level of detail. In React, a form, a button , a dialogue, a screen are commonly expressed as components.
Extracting Components: We do split components into smaller components. i.e.
function Delete (props){
return(
<div className=”Delete”>
<div className=”userInfo”>
<img class=”Avatar”
src={props.author.avatarUrl}
alt={props.author.name}
/>
</div>
</div>
)
}
9.Props are read Only: When we declare a component as a function or a class, it should not modify it’s own props. Consider the following function:
function add(x, y) {
return x + y;
}
These types of functions are called “pure” as they do not attempt to change their inputs and always return the same result for the same inputs.
10.Hooks: Hooks let us use state and other React features without writing a class. Hooks are backwards-compatible. i.e.
import React, { useState} from ‘react’;
function Demo () {
declaring a new state variable, which we’ll call “count”
const [count, setCount] = useState(0);
return (
<div>
<p>Counter {count} times</p>
<button onClick={()=> setCount(count + 1)}>Click Here</button>
</div>
);
}
In the above example, useState is a hook which we called inside a function component to add some local state to it. React will preserves this state between re-renders. useState returns a pair where the current state value and a function that let us update it. We can call this function from an event handler or somewhere else. This is somewhat similar to this.setState in a class except it doesn’t merge the old and new state together.
So that’s all from today’s discussion about React.js. Will definitely return to you with another blog. Till then keep exploring.🤷♀️🤷♀️😍😍
