React: Introduction, Components, and State Management

Introduction to React

React is a JavaScript library used for building user interfaces, particularly single-page applications
where UI updates dynamically. It is developed by Facebook and follows a component-based
architecture.

Key Features of React:

 Component-Based: UI is divided into reusable components.

 Virtual DOM: Enhances performance by updating only changed elements.

 Declarative UI: Makes it easier to develop interactive UI.

 Unidirectional Data Flow: Ensures predictable state changes.

 JSX (JavaScript XML): Allows writing HTML-like syntax within JavaScript.

Setting Up React in VSCode

1. Install Node.js (Required for running React)

o Download and install from Node.js Official Site

o Verify installation using:

o node -v

o npm -v

2. Create a React App:

3. npx create-react-app my-app

4. cd my-app

5. code .

6. Start Development Server:

7. npm start

This opens the app in the browser at http://localhost:3000/.

Components in React

1. React Class Components

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

import React, { Component } from 'react';

class Welcome extends Component {

render() {
return <h1>Welcome to React!</h1>;

export default Welcome;

2. Composing Components

Composition in React allows combining multiple components into a single UI structure.

import React from 'react';

import Welcome from './Welcome';

function App() {

return (

<div>

<Welcome />

<h2>This is a composed component.</h2>

</div>

);

export default App;

3. Passing Data using Properties (Props)

Props allow passing data between components.

function Greeting(props) {

return <h1>Hello, {props.name}!</h1>;

function App() {

return <Greeting name="John" />;

4. Children Props

The children prop allows components to wrap other components or elements.

function Card(props) {

return <div className="card">{props.children}</div>;

function App() {

return (

<Card>

<h2>Card Content</h2>

</Card>

);

Dynamic Composition

Dynamic composition enables modifying components dynamically based on conditions or loops.

function ListItems(props) {

return (

<ul>

{props.items.map((item, index) => (

<li key={index}>{item}</li>

))}

</ul>

);

function App() {

const fruits = ["Apple", "Banana", "Cherry"];

return <ListItems items={fruits} />;

React State Management

1. Initial State

State is a built-in React object used for managing component data.

class Counter extends React.Component {

constructor(props) {

super(props);

this.state = { count: 0 };

render() {

return <h1>Count: {this.state.count}</h1>;

2. Async State Initialization

State can be initialized asynchronously in class components.

class FetchData extends React.Component {

constructor(props) {

super(props);

this.state = { data: null };

componentDidMount() {

setTimeout(() => {

this.setState({ data: "Loaded Data" });

}, 2000);

render() {

return <h1>{this.state.data || "Loading..."}</h1>;

3. Updating State

State should be updated using setState().

class Counter extends React.Component {

constructor(props) {
super(props);

this.state = { count: 0 };

increment = () => {

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

};

render() {

return (

<div>

<h1>Count: {this.state.count}</h1>

<button onClick={this.increment}>Increase</button>

</div>

);

Event Handling

Events in React follow camelCase syntax and require functions as event handlers.

function ClickMe() {

function handleClick() {

alert("Button clicked!");

return <button onClick={handleClick}>Click Me</button>;

Stateless Components

A stateless functional component does not use this.state.

function Message(props) {

return <h1>{props.text}</h1>;

}
Designing Components

Best Practices

 Use reusable and modular components.

 Keep state minimal and controlled.

 Use functional components whenever possible.

 Separate logic and UI.

Example: Todo List

function TodoList(props) {

return (

<ul>

{props.tasks.map((task, index) => (

<li key={index}>{task}</li>

))}

</ul>

);

function App() {

const tasks = ["Learn React", "Practice Components", "Build a Project"];

return <TodoList tasks={tasks} />;

Conclusion

This guide covers the fundamentals of React, including components, props, state, and event
handling. By practicing these examples, you can build interactive UI elements efficiently. Happy
coding! 🚀

React: Components - React Classes & Composing Components

Introduction to React Components

React is a JavaScript library used for building user interfaces. A component in React is a reusable
piece of UI that helps to break an application into smaller, manageable parts.

There are two main types of React components:

1. Class Components
2. Function Components (not covered in this section, but commonly used in modern React
development)

React Class Components

A class component is a React component written using ES6 classes. It must extend the
React.Component class and have a render() method that returns JSX (the UI of the component).

Features of Class Components:

 Can hold and manage state.

 Can use lifecycle methods.

 Require a render() method to display UI.

Syntax of a Class Component:

import React, { Component } from 'react';

class Welcome extends Component {

render() {

return <h1>Hello, Welcome to React!</h1>;

export default Welcome;

Step-by-Step Execution in VSCode:

1. Ensure Node.js is Installed: Run node -v in the terminal to check if Node.js is installed.

2. Create a React App: Open VSCode and run:

3. npx create-react-app my-app

4. cd my-app

5. code .

6. Modify App.js to Use the Class Component:

7. import React from 'react';

8. import Welcome from './Welcome';

9.

10. function App() {

11. return (

12. <div>
13. <Welcome />

14. </div>

15. );

16. }

17.

18. export default App;

19. Run the Application:

20. npm start

This will start a development server, and the output will be visible in the browser at
http://localhost:3000/.

Composing Components

Composition in React means building complex UIs by combining multiple components.

Why Use Component Composition?

 Makes the code modular and easier to manage.

 Allows reusability of components.

 Separates concerns, improving readability and debugging.

Example of Composing Components:

import React from 'react';

function Header() {

return <h1>This is the Header</h1>;

function Footer() {

return <h3>This is the Footer</h3>;

function App() {

return (

<div>

<Header />
<p>Main content of the application</p>

<Footer />

</div>

);

export default App;

Steps to Execute:

1. Create Separate Files for Each Component:

o Create Header.js and Footer.js inside the src folder.

o Copy and paste the respective components into these files.

2. Import and Use Them in App.js.

3. Run npm start to See the Output.

Summary:

 Class components are ES6 classes that extend React.Component.

 They must include a render() method that returns JSX.

 Component composition allows breaking down the UI into smaller, reusable parts.

 Components can be imported and used within other components.

By following the above steps, even a beginner with no prior React knowledge can start building basic
UI components in React using class-based components and composition. 🚀

React: Components - React Classes, Function Components & Composing Components

What is an ES6 Class?

ES6 (ECMAScript 2015) introduced the class keyword in JavaScript, which provides a more structured
and clear way to create objects and manage inheritance compared to traditional constructor
functions.

Features of ES6 Classes:

 Encapsulation: Methods and properties are bundled within a single unit (class).

 Inheritance: A class can inherit properties and methods from another class using extends.
 Constructor Function: A special method constructor() is used for initializing object
properties.

 Methods: Functions inside a class are defined without the function keyword.

 Encapsulation of Logic: Allows keeping related functionality together inside a class.

Syntax of an ES6 Class:

class Animal {

constructor(name) {

this.name = name;

speak() {

console.log(`${this.name} makes a noise.`);

const dog = new Animal("Dog");

dog.speak(); // Output: Dog makes a noise.

React Class Components

A class component is a React component written using ES6 classes. It must extend the
React.Component class and have a render() method that returns JSX (the UI of the component).

Features of Class Components:

 Can hold and manage state.

 Can use lifecycle methods.

 Require a render() method to display UI.

Example 1: A Simple Class Component

import React, { Component } from 'react';

class Welcome extends Component {

render() {

return <h1>Hello, Welcome to React!</h1>;

}
export default Welcome;

Line-by-Line Explanation:

1. Import React and Component: We import React and { Component } from the React library to
use class components.

2. Define a Class Named Welcome: The Welcome class extends Component, which means it
inherits React's functionality.

3. Render Method: The render() method is required in every class component. It returns JSX
(HTML-like syntax) inside return.

4. Export the Component: export default Welcome; makes this component available to be
imported elsewhere.

Lifecycle Methods in Class Components

Lifecycle methods are special methods in React class components that allow developers to execute
code at specific points in a component's lifecycle (mounting, updating, and unmounting).

Lifecycle Phases:

1. Mounting (Component Creation & Insertion into the DOM)

o constructor() – Initializes the component.

o render() – Returns JSX (UI of the component).

o componentDidMount() – Executes after the component is inserted into the DOM.

2. Updating (Re-rendering due to State/Props Changes)

o shouldComponentUpdate() – Determines if re-rendering is necessary.

o componentDidUpdate() – Executes after the component updates.

3. Unmounting (Component Removal from the DOM)

o componentWillUnmount() – Executes before removing the component from the

DOM.

Example of Lifecycle Methods:

import React, { Component } from 'react';

class LifecycleExample extends Component {

constructor() {

super();

this.state = { count: 0 };

console.log("Constructor: Component is initializing");

}

componentDidMount() {

console.log("ComponentDidMount: Component is inserted into the DOM");

componentDidUpdate() {

console.log("ComponentDidUpdate: Component has updated");

componentWillUnmount() {

console.log("ComponentWillUnmount: Component is being removed");

increment = () => {

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

};

render() {

console.log("Render: Component is rendering");

return (

<div>

<h1>Count: {this.state.count}</h1>

<button onClick={this.increment}>Increment</button>

</div>

);

export default LifecycleExample;

Explanation:
1. constructor() – Initializes state.

2. componentDidMount() – Runs once after the component mounts.

3. render() – Displays JSX content.

4. componentDidUpdate() – Runs every time the state updates.

5. componentWillUnmount() – Runs just before the component is removed.

The Render Method in Detail

The render() method is responsible for returning the JSX that determines the component's UI.

Rules of the render() Method:

 It must return JSX (or null if no UI is needed).

 It should be pure and free of side effects (no modifying state inside render()).

 It runs whenever props or state change.

Example:

class RenderExample extends React.Component {

render() {

return <h1>Hello, this is rendered by the render method!</h1>;

Summary:

 Lifecycle methods allow control over a component's behavior at different stages (mounting,
updating, unmounting).

 The render() method determines what gets displayed in the UI.

 Best practice: Avoid changing state inside render() to prevent infinite loops.

By understanding lifecycle methods and render(), developers can efficiently manage React class
components. 🚀

React: Components - React Classes, Function

Components & Composing Components
What is an ES6 Class?
ES6 (ECMAScript 2015) introduced the class keyword
in JavaScript, which provides a more structured and
clear way to create objects and manage inheritance
compared to traditional constructor functions.
Features of ES6 Classes:
 Encapsulation: Methods and properties are
bundled within a single unit (class).
 Inheritance: A class can inherit properties and
methods from another class using extends.
 Constructor Function: A special method
constructor() is used for initializing object
properties.
 Methods: Functions inside a class are defined
without the function keyword.
 Encapsulation of Logic: Allows keeping related
functionality together inside a class.
Syntax of an ES6 Class:
class Animal {
constructor(name) {
this.name = name;
}

speak() {
console.log(`${this.name} makes a noise.`);
}
}

const dog = new Animal("Dog");

dog.speak(); // Output: Dog makes a noise.
React Class Components
A class component is a React component written using
ES6 classes. It must extend the React.Component class
and have a render() method that returns JSX (the UI of
the component).
Features of Class Components:
 Can hold and manage state.
 Can use lifecycle methods.
 Require a render() method to display UI.
Example 1: A Simple Class Component
import React, { Component } from 'react';

class Welcome extends Component {

render() {
return <h1>Hello, Welcome to React!</h1>;
}
}

export default Welcome;

Line-by-Line Explanation:
1. Import React and Component: We import React
and { Component } from the React library to use
class components.
2. Define a Class Named Welcome: The Welcome
class extends Component, which means it inherits
React's functionality.
3. Render Method: The render() method is required
in every class component. It returns JSX (HTML-
like syntax) inside return.
4. Export the Component: export default Welcome;
makes this component available to be imported
elsewhere.
Step-by-Step Execution in VSCode:
1. Ensure Node.js is Installed: Run node -v in the
terminal to check if Node.js is installed.
2. Create a React App: Open VSCode and run:
3. npx create-react-app my-app
4. cd my-app
5. code .
6. Modify App.js to Use the Class Component:
7. import React from 'react';
8. import Welcome from './Welcome';
9.
10. function App() {
11. return (
12. <div>
13. <Welcome />
14. </div>
15. );
16. }
17.
18. export default App;
19. Run the Application:
20. npm start
This will start a development server, and the output will
be visible in the browser at http://localhost:3000/.
Example 2: A Class Component with Props
import React, { Component } from 'react';

class Greeting extends Component {

render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

export default Greeting;

Line-by-Line Explanation:
1. Import React and Component: This allows us to
create a class component.
2. Define a Class Named Greeting: This class
extends Component, enabling it to use React
features.
3. Using this.props: this.props.name allows us to
pass dynamic values when calling this component.
4. Export the Component: The Greeting component
is exported for reuse.
Modify App.js to Use Props:
import React from 'react';
import Greeting from './Greeting';

function App() {
return (
<div>
<Greeting name="John" />
<Greeting name="Alice" />
</div>
);
}

export default App;

Expected Output:
Hello, John!
Hello, Alice!
Steps to Execute:
1. Create Greeting.js in the src folder and paste the
code inside.
2. Modify App.js to use the Greeting component as
shown above.
3. Run npm start to view the output in the
browser.
React Function Components
A function component is a simpler way to create
components in React. It is a JavaScript function that
returns JSX.
Features of Function Components:
 Easier to write and read than class components.
 Do not use this keyword.
 Can accept props as arguments.
 Can use Hooks like useState to manage state
(introduced in React 16.8).
Syntax of a Function Component:
import React from 'react';

function Welcome() {
return <h1>Hello, Welcome to React using Function
Components!</h1>;
}

export default Welcome;

Composing Components
Composition in React means building complex UIs by
combining multiple components.
Why Use Component Composition?
 Makes the code modular and easier to manage.
 Allows reusability of components.
 Separates concerns, improving readability and
debugging.
Example of Composing Components:
import React from 'react';

function Header() {
return <h1>This is the Header</h1>;
}

function Footer() {
return <h3>This is the Footer</h3>;
}

function App() {
return (
<div>
<Header />
<p>Main content of the application</p>
<Footer />
</div>
);
}

export default App;

Steps to Execute:
1. Create Separate Files for Each Component:
o Create Header.js and Footer.js inside the src
folder.
o Copy and paste the respective components into
these files.
2. Import and Use Them in App.js.
3. Run npm start to See the Output.
Summary:
 ES6 classes provide a structured way to create
objects and handle inheritance in JavaScript.
 Class components are ES6 classes that extend
React.Component.
 Function components are simpler JavaScript
functions that return JSX.
 Function components are now widely used with
React Hooks for state management.
 Component composition allows breaking down the
UI into smaller, reusable parts.
 Components can be imported and used within other
components.
By following the above steps, even a beginner with no
prior React knowledge can start building basic UI
components in React using class-based and function
components. 🚀