fswd u5 react components,state,props

 

1. React Components

1.1 Definition
1.2 Types of Components
 1.2.1 Functional Components
 1.2.2 Class Components
1.3 Features of Components
1.4 Component Structure
1.5 Creating and Exporting Components
1.6 Importing Components
1.7 Nested Components
1.8 Rendering Components
1.9 Advantages of Components

2. React State

2.1 Definition
2.2 Characteristics of State
2.3 Declaring State in Class Components (this.state)
2.4 Updating State using setState()
2.5 Using State in Functional Components (useState Hook)
2.6 Event Handling and State Change
2.7 Multiple State Variables
2.8 State Lifecycle
2.9 Rules for Using State
2.10 Advantages of Using State

3. React Props

3.1 Definition
3.2 Characteristics of Props
3.3 Passing Data using Props
3.4 Receiving Props in Child Components
3.5 Default Props
3.6 PropTypes Validation
3.7 Props vs State
3.8 Nested Props
3.9 Reusability with Props
3.10 Advantages of Props

4. Combined Example (Integration)

4.1 Using Components with State and Props
4.2 Parent-Child Communication
4.3 Updating State and Passing via Props
4.4 Dynamic Rendering with State and Props



 React Components – Formal Definition

A React Component is a reusable, independent block of code that defines the structure (HTML), behavior (JavaScript), and presentation (CSS) of a part of the user interface.
Each component in React returns a piece of JSX (JavaScript XML) that represents how a section of the UI should appear. Components can be functional or class-based, and they help in dividing a complex UI into smaller, manageable parts.

Example:

function Welcome() {
  return <h1>Welcome to React</h1>;
}

In simple terms:
Components are like functions or classes that return HTML elements to render on the screen.

2. React State – Formal Definition

State is a built-in JavaScript object used to store dynamic data within a component that determines how the component behaves and renders.
When the state of a component changes, React automatically re-renders that part of the UI to reflect the new data.
State is mutable, meaning it can be changed using the setState() method in class components or useState() Hook in functional components.

Example:

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In short:
State represents data that can change over time and controls component re-rendering.

3. React Props – Formal Definition

Props (short for Properties) are read-only attributes used to pass data from one component (usually a parent) to another component (usually a child).
Props enable components to be dynamic and reusable, allowing information to flow unidirectionally (from parent to child).
Props are immutable, meaning they cannot be modified by the child component.

Example:

function Student(props) {
  return <h3>Name: {props.name}</h3>;
}

function App() {
  return (
    <div>
      <Student name="Rahul" />
    </div>
  );
}

In short:
Props are input parameters that make components reusable and flexible by passing data between them.


Final Note (for Exams):

In React, Components are the building blocks of the UI, State represents data that can change, and Props are read-only values used for communication between components.
Together, they form the core architecture of React applications, enabling modular, reusable, and dynamic user interfaces.




React JS is an open-source JavaScript library developed by Facebook for building dynamic and interactive user interfaces (UI), especially for Single Page Applications (SPA).
It uses a component-based architecture, allowing developers to break down the UI into smaller, reusable parts called components.
React uses a Virtual DOM to enhance performance by updating only the changed portions of the page instead of reloading the entire DOM.

2. React Components

Definition:
A Component in React is a reusable piece of code that controls a part of the user interface.
Each component has its own structure (HTML), style (CSS), and logic (JavaScript). Components are like functions that return HTML elements.

Types of Components:

  1. Functional Components

  2. Class Components

(a) Functional Components

Functional components are simple JavaScript functions that return JSX (JavaScript XML).
They are preferred in modern React because of Hooks like useState and useEffect.

Example:

function Welcome() {
  return <h1>Welcome to React Components</h1>;
}

export default Welcome;

Explanation:

  • The Welcome function is a component.

  • It returns a JSX element (<h1> tag).

  • It can be reused anywhere in the application.

(b) Class Components

Class components are ES6 classes that extend from React.Component and must contain a render() method.

Example:

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello from Class Component</h1>;
  }
}

export default Welcome;

Explanation:

  • Class components have state and lifecycle methods.

  • The render() method returns the JSX to display.

Features of React Components:

  • Reusability: Components can be used multiple times across an app.

  • Readability: Helps in organizing UI into smaller, understandable parts.

  • Maintainability: Easier to update and debug.

  • Modularity: Each component handles its own logic and appearance.

1.4 Component Structure

  • A React component typically contains:

    • Import statements (React, CSS, or other components)

    • Function/Class definition

    • JSX return statement

    • Export statement

Example Structure:

import React from 'react';

function Example() {
  return (
    <div>
      <h2>This is a component structure example</h2>
    </div>
  );
}

export default Example;

1.5 Creating and Exporting Components

  • Components can be created as functions or classes.

  • Use the export keyword to make them available for use in other files.

Example:

export function Header() {
  return <h1>Header Component</h1>;
}

// or
export default Header;

1.6 Importing Components

  • Components are imported into other files using the import statement.

Example:

import Header from './Header';

1.7 Nested Components

  • When a component is used inside another component, it’s called nesting.

  • This helps build a component hierarchy.

Example:

function App() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  );
}

1.8 Rendering Components

  • Components are rendered inside the root element using ReactDOM.createRoot() and render().

Example:

import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

3. React State

Definition:
State is a built-in object used to store dynamic data about the component.
It allows components to create and manage their own data which can change over time.
When the state changes, the component re-renders automatically, showing updated data in the UI.

Using State in Class Components:

import React, { Component } from 'react';

class Counter extends Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }

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

  render() {
    return (
      <div>
        <h2>Count: {this.state.count}</h2>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Explanation:

  • The state object holds the variable count.

  • setState() updates the value.

  • Each update re-renders the component automatically.

Using State in Functional Components (using Hooks):

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count Value: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

Explanation:

  • useState(0) initializes state variable count with 0.

  • setCount function updates the count.

  • The component re-renders when the state changes.

Key Points about State:

  • Mutable: State can be changed using setState() or Hooks.

  • Local: Each component can have its own state.

  • Causes Re-render: Changing state triggers a re-render automatically.

  • Private: State is local to the component and cannot be accessed by others directly.


2.6 Event Handling and State Change

  • React handles events using camelCase syntax (e.g., onClick, onChange).

  • Event functions update the state dynamically.

Example:

function ButtonClick() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
  );
}

2.7 Multiple State Variables

  • Multiple states can be used within the same component using useState.

Example:

const [name, setName] = useState('');
const [age, setAge] = useState(18);

2.8 State Lifecycle

  • React component states go through three main phases:

    1. Initialization: Define the initial state.

    2. Updation: State is modified using setState() or useState.

    3. Unmounting: Component is removed from the DOM.

2.9 Rules for Using State

  • Only call Hooks (like useState) at the top level of the component.

  • Only call Hooks inside React functions.

  • Do not modify state directly (always use setState or setFunction).

  • Keep state as simple and minimal as possible.

4. React Props (Properties)

Definition:
Props are read-only attributes used to pass data from parent component to child component.
They make components dynamic and reusable by sending values as parameters.

Example of Props:

function Student(props) {
  return (
    <div>
      <h3>Student Name: {props.name}</h3>
      <p>Roll Number: {props.roll}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Student name="Arjun" roll="101" />
      <Student name="Meera" roll="102" />
    </div>
  );
}

export default App;

Explanation:

  • App is the parent component, and Student is the child component.

  • Data is passed through props like name and roll.

  • Props make the Student component reusable for multiple students.

Key Characteristics of Props:

  • Immutable: Props cannot be modified inside the child component.

  • Used for Communication: Props allow data flow from parent to child.

  • Reusable Components: Different values can be passed to create multiple instances.


3.5 Default Props

  • Default values can be defined for props using defaultProps property.

Example:

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

Greeting.defaultProps = {
  name: 'Guest'
};

3.6 PropTypes Validation

  • Used to validate data types of props using the PropTypes library.

Example:

import PropTypes from 'prop-types';

function User(props) {
  return <h2>{props.age}</h2>;
}

User.propTypes = {
  age: PropTypes.number.isRequired
};

3.8 Nested Props

  • Passing objects or multiple data types as props (nested structure).

Example:

function Student(props) {
  return <h3>{props.info.name} - {props.info.age}</h3>;
}

<Student info={{ name: 'Arun', age: 20 }} />;

5. Difference Between State and Props

BasisStateProps
DefinitionManages internal data of the componentUsed to pass data from parent to child
MutabilityMutable (can be changed)Immutable (cannot be changed)
OwnershipOwned by the componentOwned by the parent component
UpdationCan be updated using setState() or useState()Cannot be updated directly
UsageUsed for dynamic dataUsed for passing fixed or variable data
ExampleCounter value changingPassing name or ID to a component

6. Example Combining Components, State, and Props

import React, { useState } from 'react';

function Message(props) {
  return <h3>{props.text}</h3>;
}

function App() {
  const [message, setMessage] = useState("Welcome to React!");

  return (
    <div>
      <Message text={message} />
      <button onClick={() => setMessage("You clicked the button!")}>
        Change Message
      </button>
    </div>
  );
}

export default App;

Explanation:

  • The App component manages the message using state.

  • The Message component receives the message via props.

  • When the button is clicked, state changes → message updates dynamically → re-render occurs.

7. Advantages of Using Components, States, and Props

  1. Code Reusability: Components can be reused multiple times in different parts of the app.

  2. Maintainability: Easier to debug since each component handles its own logic.

  3. Dynamic UI: State allows components to update dynamically.

  4. Unidirectional Data Flow: Props ensure data consistency by flowing in one direction.

  5. Improved Performance: React updates only changed elements using Virtual DOM.

4.2 Parent-Child Communication

  • Communication is done via props — data flows from parent → child.

Example:

function Child(props) {
  return <h3>{props.message}</h3>;
}

function Parent() {
  return <Child message="Hello from Parent" />;
}

4.3 Updating State and Passing via Props

  • The parent updates state and sends the new value to the child via props.

Example:

function Child({ data }) {
  return <p>Data: {data}</p>;
}

function Parent() {
  const [value, setValue] = useState('Initial');
  return (
    <div>
      <Child data={value} />
      <button onClick={() => setValue('Updated')}>Update</button>
    </div>
  );
}

4.4 Dynamic Rendering with State and Props

  • UI updates automatically when state changes, re-rendering components dynamically.

Example:

function Product(props) {
  return <h4>{props.name} - ${props.price}</h4>;
}

function Shop() {
  const [price, setPrice] = useState(100);
  return (
    <div>
      <Product name="Mobile" price={price} />
      <button onClick={() => setPrice(price + 10)}>Increase Price</button>
    </div>
  );
}

8. Real-World Example

Blog Application Example:

function Post(props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <p>{props.content}</p>
    </div>
  );
}

function BlogApp() {
  const [post, setPost] = useState({
    title: "Introduction to React",
    content: "React is a JavaScript library for building user interfaces."
  });

  return (
    <div>
      <Post title={post.title} content={post.content} />
      <button onClick={() => setPost({ title: "Updated Post", content: "React is fun to learn!" })}>
        Update Post
      </button>
    </div>
  );
}

export default BlogApp;

Output:
Initially:

Title: Introduction to React  
Content: React is a JavaScript library for building user interfaces.

After clicking button:

Title: Updated Post   

Content: React is fun to learn! 






https://mindmapai.app/mind-map/react-js-fundamentals-components-state-and-props-8704e8ab

https://drive.google.com/file/d/1fFLt3T1yDONMbb4W7PtUfjoyv2QZX4bm/view?usp=sharing