· Differences between Functional Components and Class Components in React:
Functional Components: Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function.
Basic Syntax:
const Programmer=()=> {
return <h2>Hi, I am also a Programmer!</h2>;
}
1. A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element.
2. There is no render method used in functional components.
3. Also known as Stateless components as they simply accept data and display them in some form, that they are mainly responsible for rendering UI.
4. React lifecycle methods (for example, componentDidMount) cannot be used in functional components.
5. When you are use functional components you don’t need to extends component.
6. Access props directly without this.
Class Component: This is the bread and butter of most modern web apps built in ReactJS. These components are simple classes (made up of multiple functions that add functionality to the application).
Basic Syntax:
class Programmer extends React.Component {
render() {
return <h2>Hi, I am a Programmer!</h2>;
}
}
1. A class component requires you to extend from React. Component and create a render function which returns a React element.
2. It must have the render() method returning HTML
3. Also known as Stateful components because they implement logic and state.
4. React lifecycle methods can be used inside class components (for example, componentDidMount).
5. When you are using class base components you need to extends the Components.
6. Access state with this
· Difference between Components and elements in React:
Elements in React:
An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. Creating a React element is easy. Once an element is created, it is never mutated.
The object representation of React Element would be as follows:
const element = React.createElement(
‘div’,
{id: ‘login-btn’},
‘Login’
)
The above React.createElement() function returns an object:
{
type: ‘div’,
props: {
children: ‘Login’,
id: ‘login-btn’
}
}
And finally it renders to the DOM using ReactDOM.render():
<div id=’login-btn’>Login</div>
Components in React:
Whereas a component can be declared in several different ways. It can be a class with a render() method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns a JSX tree as the output:
const Button = ({ onLogin }) =>
<div id={‘login-btn’} onClick={onLogin}>Login</div>
Then JSX gets transpiled to a React.createElement() function tree:
const Button = ({ onLogin }) => React.createElement(
‘div’,
{ id: ‘login-btn’, onClick: onLogin },
‘Login’
)
· React Hooks (functional components)
Hooks are the functions which “hook into” React state and lifecycle features from function components. It does not work inside classes.
1. use hook
Hook uses useState() functional component for setting and retrieving state. Let us understand Hook state with the following example.
import React, { useState } from ‘react’;
function CountApp() {
// Declare a new state variable, which we’ll call “count”
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default CountApp;
In the above example, useState is the Hook which needs to call inside a function component to add some local state to it. The useState returns a pair where the first element is the current state value/initial value, and the second one is a function which allows us to update it. After that, we will call this function from an event handler or somewhere else.
2. useEffect Hook:
The Effect Hook allows us to perform side effects (an action) in the function components. It does not use components lifecycle methods which are available in class components. In other words, Effects Hooks are equivalent to componentDidMount(), componentDidUpdate(), and componentWillUnmount() lifecycle methods.
Let us understand Hook useEffect with the following example.
import React, { useState, useEffect } from ‘react’;
function CounterExample() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default CounterExample;
Side effects have common features which the most web applications need to perform, such as:
- Updating the DOM,
- Fetching and consuming data from a server API,
- Setting up a subscription, etc.
· Virtual DOM in React:
Virtual DOM exists which is like a lightweight copy of the actual DOM. The virtual DOM stores a representation of the UI in memory and is synced with the actual DOM with the help of React DOM. We can think virtual DOM is a tree. every node of tree is component. when we change component of state. That time generated a new tree.
In summary, here’s what happens when you try to update the DOM in React:
1.The entire virtual DOM gets updated.
2.The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
3.The changed objects, and the changed objects only, get updated on the real DOM.
4.Changes on the real DOM cause the screen to change.
· React props:
React Props are like function arguments in JavaScript and attributes in HTML.
To send props into a component, use the same syntax as HTML attributes:
Example
Add a “brand” attribute to the Car element:
const myelement = <Car brand=”Ford” />;
The component receives the argument as a props object:
· React Events:
An event is an action that could be triggered as a result of the user action or system generated event. For example, a mouse click, loading of a web page, pressing a key, window resizes, and other interactions are called events.
React has its own event handling system which is very similar to handling events on DOM elements. The react event handling system is known as Synthetic Events. The synthetic event is a cross-browser wrapper of the browser’s native event.
const ActionLink=()=> {
const handleClick(e) {
e.preventDefault();
console.log(‘clicked.’);
}
return (
<a href=”#” onClick={handleClick}>
Click_Me
</a>
);
}