Contents

1. What is React?

React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and efficiently manage the state of their applications.

2. What are the key features of React?

Some key features of React include:

• Component-Based Architecture: React applications are composed of reusable UI components.
• Virtual DOM: React uses a virtual DOM to efficiently update the UI without re-rendering the entire page.
• JSX: JSX is a syntax extension for JavaScript that allows developers to write HTML-like code within their JavaScript files.
• One-Way Data Binding: React follows a unidirectional data flow, where data flows from parent components to child components.
• Hook: Introduced in React 16.8, hooks are functions that allow developers to use state and other React features in functional components.

3. How do you define a React component?

In React, components can be defined as classes or functions. Here's an example of a functional component:

import React from 'react';

function MyComponent() {
  return <div>Hello, World!</div>;
}

export default MyComponent;

4. What are props in React?

In React, "props" (short for properties) are a fundamental concept used for passing data from one component to another. Props are a way of making components dynamic and reusable. They are similar to function arguments in JavaScript.

Here's how props work in React:

1. Passing Props: You can pass props from a parent component to a child component by including attributes in the child component's JSX tag. These attributes then become properties of the props object in the child component.

   // ParentComponent.js
   import ChildComponent from './ChildComponent';
   
   function ParentComponent() {
       return <ChildComponent name="John" />;
   }
   

   // ChildComponent.js
   function ChildComponent(props) {
       return <p>Hello, {props.name}!</p>;
   }
   

2. Accessing Props: In the child component, you can access the passed props through the props object.

3. Immutable Data: Props are immutable, meaning that child components cannot modify the props passed to them from their parent. Props are read-only.

4. Default Props: You can also specify default values for props using the defaultProps property.

   function ChildComponent(props) {
       return <p>Hello, {props.name}!</p>;
   }
   
   ChildComponent.defaultProps = {
       name: 'Guest'
   };
   

5. Using Props for Dynamic Rendering: Props can be used to render components dynamically based on different data passed from the parent component.

   function UserGreeting(props) {
       return <h1>Welcome back, {props.username}!</h1>;
   }
   
   function GuestGreeting(props) {
       return <h1>Please sign up.</h1>;
   }
   
   function Greeting(props) {
       const isLoggedIn = props.isLoggedIn;
       if (isLoggedIn) {
           return <UserGreeting username={props.username} />;
       }
       return <GuestGreeting />;
   }
   

Overall, props provide a way to pass data between React components, enabling a flexible and reusable component architecture.

5. What is State in React?

In React, "state" is a built-in object used for storing component-specific data that may change over time. Unlike props, which are passed from parent to child and remain immutable within the child component, state is managed internally within a component and can be updated using the setState() method. State allows components to manage and track their own data, making them dynamic and interactive.

Here are the key points about state in React:

1. Declaring State: You can declare state in a React component by initializing the state property within the component's constructor.

   import React, { Component } from 'react';
   
   class MyComponent extends Component {
       constructor(props) {
           super(props);
           this.state = {
               count: 0,
               message: 'Hello, World!'
           };
       }
   }
   

2. Accessing State: You can access state data using this.state within the component's methods.

   render() {
       return (
           <div>
               <p>Count: {this.state.count}</p>
               <p>Message: {this.state.message}</p>
           </div>
       );
   }
   

3. Updating State: State should be updated using the setState() method provided by React. Directly modifying this.state will not trigger re-rendering.

   handleClick = () => {
       this.setState({ count: this.state.count + 1 });
   }
   

4. Async State Updates: setState() can accept a function as an argument to handle asynchronous updates correctly.

   handleClick = () => {
       this.setState((prevState) => {
           return { count: prevState.count + 1 };
       });
   }
   

5. Immutable State: Similar to props, state in React components is immutable. You should never modify state directly; always use setState() to update it.

6. Local to Component: State is local to the component in which it is declared. It cannot be accessed or modified by other components.

Overall, state in React provides a way for components to manage and update their own data, making them dynamic and responsive to user interactions. It's a key concept in building interactive user interfaces with React.