What is JSX?

A syntax extension for JavaScript used in React. It allows developers to write HTML-like code inside JavaScript files, making it easier to visualize the structure of the user interface. JSX is not valid JavaScript, so it needs to be transformed into regular JavaScript (usually using Babel) before it can be understood by browsers.

How Does the JS Engine Understand JSX?

Since JSX is not standard JavaScript, browsers and JavaScript engines cannot understand it directly. Tools like Parcel use Babel to transpile JSX into standard JavaScript code. For example, <Button /> in JSX might be transformed into React.createElement(Button, null) by Babel, which the JavaScript engine can then execute.

What is Babel?

A JavaScript compiler that transforms newer JavaScript syntax (like ES6+ and JSX) into a version of JavaScript that is compatible with older browsers or environments. Babel allows developers to write modern JavaScript without worrying about browser compatibility.

What are Components?

Reusable building blocks in modern web development, particularly in frameworks like React. Components encapsulate logic, UI, and behavior, making it easier to build and maintain complex applications by breaking them into smaller, manageable pieces.

Class-Based Components

A type of component in React defined using ES6 classes. They can have state and lifecycle methods, allowing for more complex behavior.

Functional Components

Functional Components: A simpler type of component defined as a JavaScript function. Initially, they were stateless, but with the introduction of hooks in React, functional components can now manage state and use lifecycle features.

why component’s name starts with capital letter?

When you use JSX, you must start a tag with a capital letter to render your own custom component. In other words, <Something /> is equivalent to createElement(Something), but <something /> (lowercase) is equivalent to createElement('something') (note: it’s a string, so it will be treated as a built-in HTML tag).

What is Component Composition?

  • Component Composition: The practice of combining multiple components to create a more complex UI or application. In React, components can be nested, reused, and combined in various ways to build an application. For example, a Form component might be composed of multiple Input, Button, and Label components. Component composition promotes code reusability, modularity, and maintainability.

What are Props?

Short for “properties,” props are a mechanism for passing data from a parent component to a child component in React. Props are immutable and can be used to configure the child component’s appearance or behavior. For example, if you have a Button component, you might pass a label prop to define the button’s text:

<Button label="Click Me" />

In the Button component, you can access this prop using this.props.label (in class components) or props.label (in functional components).

What is Config-Driven UI?

A design pattern where the user interface (UI) is generated based on a configuration file or object. Instead of hardcoding the UI elements, you define them in a configuration, which the application reads to render the UI dynamically. This approach makes it easier to change the UI by updating the configuration rather than modifying the code. It’s often used in form builders, dashboards, or any scenario where the UI needs to be highly customizable.

What is the UI Layer & Data Layer?

UI Layer Refers to the part of the application that handles the presentation of data, including the user interface components like buttons, forms, and displays. It focuses on how the application looks and how users interact with it.

Data Layer Refers to the part of the application that manages data, including fetching, storing, and processing it. This layer communicates with databases, APIs, and other data sources, and provides the necessary data to the UI layer. The data layer is responsible for the logic that underpins the UI, ensuring that the right data is displayed and that any user actions are correctly processed.

Why Do We Need Unique Keys in React?

Keys are a special attribute used by React to identify which items in a list have changed, been added, or removed. When rendering a list of elements, each item should have a unique key to help React optimize the rendering process by efficiently updating only the elements that have changed.

What is Wrong with Using Index as a Key?

Using the index of the list item as a key can lead to performance issues and bugs, especially when the list is dynamic (i.e., items are added, removed, or reordered). When the index is used as a key, React may not be able to correctly identify changes in the list, leading to incorrect UI updates. If the items in the list are reordered, React may incorrectly update the wrong items since it associates keys with indices. React’s reconciliation algorithm relies on stable and unique keys to efficiently update the DOM. Using indices can lead to unnecessary re-renders, reducing performance. If the list contains stateful components, using the index as a key can cause the state to be incorrectly associated with different components when the list changes.

It’s better to use a unique identifier related to the item’s data (like an ID) as the key to avoid these issues.