React Core Concept

❖ What is JSX?

JSX is JavaScript XML. It is a syntax extension of JavaScript. JSX expressions are like HTML elements. Basically it provides us syntactic sugar. JSX allows us to write the HTML elements in React.
JSX syntax is intended to be used by preprocessors to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

❖ How does JSX work in React?

JSX allows us to write HTML elements in JavaScript. JSX converts HTML tags into react elements. In react, JSX is not compulsory to use but JSX makes it easier to write react applications.
By the way let’s go forward, we have a babel plugin named @babel/plugin-transform-react-jsx that gives us the ability to work with JSX syntax.
you can install @babel/plugin-transform-react-jsx with npm or yarn

npm install --save-dev @babel/plugin-transform-react-jsx
Or
yarn add -D @babel/plugin-transform-react-jsx

React core team replaced the classic React.createElement with the JSX and JSX functions, so we don't need to import React anymore to write JSX. Now, the @babel/plugin-transform-react-jsx uses the JSX function by default now.
Let’s see the below code:

const data = (

{[user.name, user.age]}

By default, babel is going to compile that jsx to this plain javascript.
Let’s see in below-
logJsx for jsx syntax. For the logJsx function, we turn the jsx into a logged statement like "It's a div, Hi Faysal!". Now let's define the logJsx function:

function logJsx(type, props) {
console.log(It's a ${type}, Hi ${props.name});
}

then ,

That's how jsx works, but in React, instead of logging, it gives us an object like this code-

{
type: "title",
key: null,
ref: null,
props: {
name: "Rahaman"
},
_owner: null,
_store: {}
}

❖ lifecycle methods order in mounting:
Mounting is the first phases of React component lifecycle. when an instance of a component is being created and inserted into the DOM, the following methods are called- constructor(), render(), componentDidMount().

❖ Reconciliation:
Reconciliation is When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.
❖ Higher Order Component:
A Higher Order Component is the advanced technique in React for reusing a component logic. Higher order component takes a component and returns a new component. Simply, a higher order component transforms a component into another component. The proper example of higher order components are- redux’s connect and relay’s createContainer.

❖ Redux & Uses:
Redux is a predictable state container for JavaScript apps. Redux is designed to help us write JavaScript apps comfortably. We can use it with any other JavaScript framework or library.
Redux is mostly used as a state management tool with react. By using redux, we can manage our apps state in a single place and keep changes in our app more predictable.
❖ React Component Lifecycle:
React component lifecycle is important things. All React components has a lifecycle, which we can manipulate and monitor. React component lifecycle is complete its cycle with three phases. Which is-
● Mounting: Mounting means that putting the elements into the DOM. when an instance of a component is being created and inserted into the DOM, the following methods are called- constructor(), render(), componentDidMount().
● Updating: The next step is updating. In this step, it will work with state and props.
● Unmounting: after the updating, next step is unmounting. Unmounting is called when a component is removed from the DOM.