No,JSX is not mandatory for react, but it is highly recommended.

JSX is syntax extension that allows you to write HTML like syntax within Javascript,making it easier to create and visualize structure of react components.

It enhance readability and maintainability of your code.

Is ES6 mandatory for react?

The answer is No, we can use some other imports like create-react-class for using the component functionality.

But it is highly recommended to use ES6 because it introduces several features and syntax improvements that makes it more efficient and readable.

Some Features of ES6:

Arrow Functions: Simplify syntax and automatically bound component instance using this keyword that a normal function can’t do.

Destructuring: Makes it easier to extract values from objects and arrays.

Template Literals: Allow easier to embed variable within string.

Module:It also enable import and export for better code organization.

{TitleComponent} or {<TitleComponent /> or {<TitleComponet></TitleComponent>} in JSX is same or different.

{TitleComponent} or {<TitleComponent /> or {<TitleComponet></TitleComponent>} in JSX is same.

What is <React.Fragment></React.Fragment> and <></>

<></> is shorthand notation of <React.Fragment></React.Fragment>

It is used for when you want to return multiple elements from a component without wrapping them in a parent like a <div>.

What is Reconciliation in React.

Reconciliation is the process by which React update the DOM to match the virtual DOM. When the state or props component change, React create a new virtual DOM tree and compares it with the previous one.This process is called reconciliation.

Why do we need keys in React?

Because, Assume we have a parent container and inside this we have list of same level of react component .Now if you want to add a new React component between two react component then key helps in the organization.

Can we use index as keys?

Using the index as keys in React is possible but it’s generally not recommended.

Keys help React identify which items have changed, been added ,or removed, and they should be unique and stable.

It is useful when list items are reordered or filtered.

What is props in React?

props is (short for properties) are way to pass data from a parent component to child component.

They allow you to configure and child components by providig them the necessary information.

props are read-only, meaning that it can not be modify by child component

Examples:

const ParentComponent = () => {
  return <ChildComponent name="Dastarkhan" age={5} />;
};

const ChildComponent = ({ name, age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
    </div>
  );
};

What is Config Driven UI?

Config-Driven UI is a design pattern where the structure and behaviour of the user defined using configuration files rather than being hard-coded in the application.

These configuration files are typically in formats like JSON or YAML. By separating the UI logic from the code, developers can easily modify the UI without changing the underlying codebase