Fundamental React Concept Learn Once, Write Anywhere.

Hello developer, I am Shakil Ahmed today I will shortly discuss the fundamental concept of React 🤩 so stay with me and read properly A to Z learn once, write anywhere 👨‍💻.

What Is React? Library OR Framework

React is not a framework it is a library. So React is a library for building a user interface. With react we get to be declarative for HTML UIs that represent dynamic data, not static data. When react released it comes with a new idea of virtual DOM.

DOM (Document Object Model)

The Document Object Model (DOM) is an application programming interface (API) for HTML and XML documents. Below the DOM Structure

it is very hard to something change on real DOM. Here react gives us a virtual DOM it is totally flavor or real DOM and more friendly.

JSX (JavaScript XML)

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. It’s neither a string nor HTML funny syntax 😄

it’s not an HTML

Tree reconciliation

when reloading our page then it creates a tree and then where any changed state or another thing then it changes that specific element which is change and it is stored first virtual DOM then it is updated that particular element in the tree. Any operation on the DOM is done in the same single thread that’s responsible for everything else that’s happening in the browser.

Hooks

Hook is a most important thing when hook is come in ES5 then in react it;s newly represent to react developer. Hooks solve a wide variety of seemingly unconnected problems in React. hook starts with use keyword and hook also written camelCase. Call Hooks from React function components. some hook name below

1. useState
2. useEffect
3. useRef

Function Vs Class

before the class component was very useful than the function component. Functional Components are also known as Stateless components. Class Component was also known as Stateful component. when releasing ES6 then it has come with some hook and it makes a function component stateful. function component receive parameter (props)- optional. and class component has a local state.

Component Vs Element

A React Element is just a plain old JavaScript object without its own methods. It has essentially four properties type, string, ref, props. A React Element is not an instance of a React Component. element just describe how to arrange type or HTML tag.

We are creating a custom function component It’s an object that virtually describes the DOM nodes that a component represents If a React Component is instantiated it expects props object and returns an instance, which is referred to as a React Component Instance.

Optimizing Performance

Performance optimization, also known as “performance tuning”, is usually an iterative approach to making and then monitoring modifications to an application. so now I say 2 points to get more performance at React app

1. Avoid Reconciliation
2. shouldComponentUpdate In Action

Conditional rendering

we are conditional rendering in react jsx. it is written in the {} bracket and then uses the ternary operator for conditional rendering. remember in react we are using if condition with ternary oparater

return (
<div>
{
showSomething ? ‘yes there is some data’ : ‘call other component’
}
</div>
)

Finally, list some topic name

1. React is all About Component
2. JSX
3. We can use JS expression anywhere is JSX
4. Event in react