01. React is a library, not a framework

Unfortunately, react js is not a framework. It cannot provide you a complete solution for your projects. You have to use another library with react. On the other hand, the framework is a complete solution. It will give you a structure to complete a project. However, there are disadvantages also for example we can say that frameworks are not flexible. Frameworks are usually large and full of features if you want to use a small part of them then you have to implement the whole.

02. React JSX

If you see react code you must watched jsx also. At first let’s look a simple react code

const RootElement = (
<div>
<h1 style={{color: red}}>The world is yours</h1>
<p>Say hello to my little friend</p>
</div>
)ReactDOM.render(RootElement, document.getElementById(‘app’))

Jsx stands for JavaScript xml. It allows us write html in react. Actually, jsx converts html tag into react elements. It is not a rule that you have to write jsx. Behind the scenes bable js converts jsx into plain javascript. You can write react code can in plain js also. Let’s see an example of plain js code in react

const rootElement =
React.createElement(‘div’, {},
React.createElement(‘h1’, {style: {color: ‘red’}},
‘The world is yours’),
React.createElement(‘p’, {},
‘hi fahim hassan mollah’)
)ReactDOM.render(rootElement, document.getElementById(‘app’))

03. What is React Components

React components are JavaScript functions. It is reusable bits of code. We can say the component is a blueprint or template. Components are two types. Class & functional components.

04. What is Class Component in React

As we know that in react components are two types one is class and another is functional. Let’s discuss class components. In react js component’s name’s first letter must be upper case. To make a class component we must extend React.Component. Let’s see an example of react class components.

class Bus extends React.Component {
render() {
return <h3> I am a Bus </h3>;
}
}// To display componentsReactDOM.render(<Bus />, document.getElementById(‘root’));

05. What is Function Component in React

We write class components in object oriented style(Class based) but in functional component we make component using function. Just like class components function name’s first letter must be upper case. Let’s see an example of react functional components.

function Bus() {
return <h5> I am a Bus!</h5>;
}// To display componentReactDOM.render(<Bus />, document.getElementById(‘root’));

06. Lifecycle of React Components

React component has a lifecycle. We can control react components during its three main lifecycles.

They are: Mounting, Updating, and Unmounting.

· Mount: Create of component
1. constructor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()

· Update: update of component
1.static getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

· Unmount: Remove or delete of component
1. componentWillUnmount()

07. What is React Props

If we want to pass data to components then we use the term props. Prop is immutable. React props looks are like function arguments and attributes in HTML. Sending a prop into a component is just like an html attribute. Let’s see an example of sending props

const myelement = <Bus brand=”Ford” />;

after sending props to Car components, we will receive the props as an object. Let’s see an example

class Bus extends React.Component {
render() {
return <h4>I am {this.props.brand}!</h4>;
}
}

08. What is React Hooks

It is a new feature introduced in the React 16.8 version. It will help you to write state and other react features in functional components. Hooks are nothing but a special function. We can’t use hooks in class components, hooks are for functional components only.

Normal Hooks: useState, useEffect, useContext

Other Hooks: useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue

09. Basic Rules of Hooks

When using Hooks, we should follow this rule given below

1. Don’t call hooks from inside a loop, condition, or nested function

2. Call hooks at the top

3. Call hooks only in functional components

4. Don’t call a hook from a regular function

10. What is Virtual Dom in React

The virtual dom works in three phases

1. When we change in react app then the full UI is re-rendered in virtual dom

2. Now the difference between the updated dom and the previous dom is calculated.

3. After calculation only the change’s part is updated in real dom

Full Stack Developer (MERN)