Top 10 React JS Fundamental with Performance Boosting
Is react a framework or library? Everyone in this world who are beginner they have such kind of question. Now I will tell you:
1. What is React ?
A JavaScript library for building user interfaces. React is a JavaScript library, not a complete framework. It has developed by facebook in 2011. Currently it has the more popular JavaScript library for building user interfaces.
2. Benefits of React —
i) Speed / Fast rendering
ii) Flexibility/ Easy to learn
iii) Performance
iv) Usability
v) Mobile app development
vi) Uplifts developers productivity
3. Component —
The heart of all react applications are component. The component is essentially a piece of the user interface. Every react application has at least one component which prefer to as the root component. This component represents the entire application and contains other child component so.
So every react application is essentially a tree of components. If you worked with angular or Vue it sounds familiar. Components is similar in look but different in data.
There are two components in react one is class based component and second is function based component.
4. React Components & Elements —
A react element is what gets returned from components. It’s an object that virtually describes the DOM nodes that components represent. In a function component, this object is returned by the function and in a class component, this object is returned by the components render method.
A react component is a template, a blueprint, a global definition. It can be either function or a class.
5. Benefits of components:
components make code readable, and easier to work with. It can be reused in the same application across multiple applications. We can also reuse it by using a different set of props.
6. DOM and Virtual Dom —
Basically DOM means Document Object Model. DOM connects web pages to scripts or programming languages by representing the structure of a document. Such as HTML representing a web page.
Document — Html document
Object — Elements like h1, head, body, paragraph etc
Model — Complete Document
let newElement = document.createElement("h2");
newElement.textContent ="Hi I'm Abid Nuri";
document.querySelector("body").appendChild(newElement);Now come to the Virtual DOM — simply Virtual DOM is the replica of our existing DOM. It’s a copy of original HTML document. React keeps a lightweight representation of the Dom in memory.
When we change the state of a component we get a new react element react will then compare this element and his children with the previous one it figures out what is changed and then it will update a part of the real DOM to keep it in sync with the virtual DOM. React will automatically update the DOM to match the state.
7. JSX —
JSX means JavaScript XML. It’s a syntax extension for react JS.JSX is a javascript extension that allows us to write function calls in an HTML like syntax. Basically, JSX is really just a mix of HTML & JavaScript. You don’t have to use it to use React, but you will want to. JSX lets you add bits of HTML to your JavaScript.
JSX just provides syntactic sugar for the
React.createElement(component, props, ...children)
function.
8. Expressions in JSX —
You need to use a pair of curly brackets to write a JavaScript expression. You don’t use if condition but you can use a ternary expression.
Props and State —
One of the greatest things about react is it’s ability to manage your data and properly re-render your application when your data changes. There are two main ways in react to think about data they are props and state —
9. Props —
Props, you can think about as like arguments to a function when you create a component inside a react and you want to render it you are going to pass it the props that you want to give to it. A react elements received a list of attributes when it gets rendered. This attribute is known as props. A function component receives this list as its first argument as an object with keys. receiving props is optional. Components must return a value. It cannot return undefined but null to cause the rendered to ignore its output. Simply props is reuse of functional component with custom value.
10. UseState
UseState functions return an array with two items. One is used to keep initial data and store data over time and the other is using to set the data when needed.
11. Hooks:
Hooks is a special type of react function that can add extra features and declare states. All Hooks functions start with use. Some of them used to provide a statefull element like useState and others managed the side effects. React Hooks are so much powerful. It can only be used in function components, not in-class components.