React Fundamental Core Concept.
I will try to cover the most important fundamental concepts of React js. I have been trying to understand how virtual DOM works and thought on a high level it was clear.
01. “React is all about components”
React components are javascript functions.
Components are like functions that return HTML elements. React is designed around the concept of reusable components. Components are independent and reusable bits of code. You define small components and All components small or big are reusable, even across different projects. They serve the same purpose as JavaScript functions….
02. “Class Component”
As we know that in react components are two type one is class and another is functional. Let’s discuss class components.
Let’s see an example of react class components.
class language extends React.Component {
render() {
return <h3> programming by language</h3>;
}
}// To display componentsReactDOM.render(<language/>, document.getElementById('root'));03. “Function Component”
We write class components in object-oriented style(Class-based) but in the 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 language() {
return <h5> programming language!</h5>;
}// To display componentReactDOM.render(<language/>, document.getElementById('root'));04. “Component Lifecycle”
React component has a lifecycle. We can control react components during its three main lifecycles.
05. “It is a library, It’s not a framework”
React is just a library and you need to make all decisions by yourself. unfortunately, react js is not a framework. It can not provide you with a complete solution for your projects. an open-source, front end, JavaScript library for building user interfaces or UI components. each is a library for helping developers build user interfaces (UIs) as a tree of small pieces called components.
It focuses on helping you to build user interfaces using components.
“Framework solves the problem of its creators” ~one of my mentors
06. “JSX”
If you see react code you must watch JSX also. When looking at React examples you’ve probably seen JSX in action already.
const RootElement = (
<div>
<h1 style={{color: black}}>Enjoy the promramming hero batch 03</h1>
<p>Enjoy Programmer Bangladesh!</p>
</div>
)ReactDOM.render(RootElement, document.getElementById('app'))JSX stands for javascript XML. It allows us to write HTML in react. Actually, JSX converts HTML tag into React elements .
07. “Virtual Dom”
The virtual dom works in three phases
- 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 changes part is updated in real dom
I have been trying to understand how virtual DOM works and thought on a high level it was clear. I was looking for something that could explain to me in more detail.
08. “Optimizing Performance”
Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. Nevertheless, there are several ways you can speed up your React application.
09. “Hooks”
It is a new feature introduced in the React 16.8 version. It will help you to write state and other react feature 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
10. “You don’t need Flux”
Probably the most common misconception among React newcomers is that you need to use it with Redux or some other Flux implementation.
