REACT COMPONENTS

React Components
A React component is a JavaScript function or class that returns
a React element, describing how a section of the UI (User Interface)
should appear. Components can manage their own state and receive
data as props, making it possible to create reusable and dynamic UI
elements.
In simpler terms, a React component is like a JavaScript function that
returns HTML-like code (JSX) to render something on the web page.
Types of Components in React
In React, we mainly have two types of components:
 Functional Components
 Class based Components
Functional Component in React
Functional components are just like JavaScript functions that accept
properties and return a React element.
We can create a functional component in React by writing a JavaScript
function. These functions may or may not receive data as parameters,
Syntax:
function demoComponent() {
return (<h1>
Welcome Message!
</h1>);
}
Example: Create a function component called welcome.
function welcome() {
return <h1>Hello, Welcome to Tamilnadu!</h1>;
}
Class Component in React
The class components are a little more complex than the functional
components. A class component can show inheritance and access data
of other components.
Class Component must include the line “extends React.Component”
to pass data from one class component to another class component. We
can use JavaScript ES6 classes to create class-based components in
React.
Syntax:
class Democomponent extends React.Component {
render() {
return <h1>Welcome Message!</h1>;
}
}
Example: Create a class component called welcome.
class Welcome extends Component {
render() {
return <h1>Hello, Welcome to Tamilnadu!</h1>;
}
}
Functional Component vs Class Component
A functional component is best suited for cases where the component
doesn’t need to interact with other components or manage complex
states. Functional components are ideal for presenting static UI
elements or composing multiple simple components together under a
single parent component.
While class-based components can achieve the same result, they are
generally less efficient compared to functional components. Therefore,
it’s recommended to not use class components for general use.
Rendering React Components
Rendering Components means turning your component code into the
UI that users see on the screen.
React is capable of rendering user-defined components. To render a
component in React we can initialize an element with a user-defined
component and pass this element as the first parameter
to ReactDOM.render() or directly pass the component as the first
argument to the ReactDOM.render() method.
The below syntax shows how to initialize a component to an element:
const elementName = <ComponentName />;
In the above syntax, the ComponentName is the name of the user-
defined component.
Note: The name of a component should always start with a capital letter.
This is done to differentiate a component tag from an HTML tag.
Example: This example renders a component named Welcome to the
Screen.
import React from "react";
import ReactDOM from "react-dom";

// This is a functional component

const Welcome = () => {
return <h1>Hello World!</h1>;
};

ReactDOM.render(
<Welcome />,
document.getElementById("root")
);
Output: This output will be visible on the http://localhost:3000/ on the
browser window.

 We call the ReactDOM.render() as the first parameter.

 React then calls the component Welcome, which returns <h1>Hello
World!</h1>; as the result.
 Then the ReactDOM efficiently updates the DOM to match with the
returned element and renders that element to the DOM element with
id as “root”.
Props
 Props(short for properties) are a way to pass data from the parent
component to the child component.
 Props are like function arguments, you can use them as attributes
in components.
Example:
function Message(props) {
return <h2>{props.text}</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Message text="Hello, world!" />);

Components in Components
We can call components inside another component
Example:
import React from "react";
import ReactDOM from "react-dom";

const Greet = () => {

return <h1>Hello Geek</h1>
}

// This is a functional component

const Welcome = () => {
return <Greet />;
};

ReactDOM.render(
<Welcome />,
document.getElementById("root")
);
REACT STATE
What is State in ReactJS?
State in ReactJS refers to an object that stores a component’s dynamic
data and determines how the component behaves. It is an instance of
the React Component Class that can be defined as an object of a set
of observable properties that control the behaviour of the component.
Whenever state changes, React re-renders the component to reflect the
updated data. This enables you to build dynamic UIs that respond to user
interactions.
Creating State Object
Creating a state is essential to building dynamic and interactive
components. We can create a state object within the constructor of the
class component.
import React from 'react';

class MyComponent extends React.Component {

constructor(props) {
super(props);
 this.state = {
brand: 'Ford', // Example property in the state
};
}

render() {
return (
<div>
<h1>My Car</h1>
{/* Other component content */}
</div>
);
}
}

export default MyComponent;

Conventions of Using State in React
 The state of a component should prevail throughout its lifetime, thus
we must first have some initial state, to do so we should define
the State in the constructor of the component’s class.
 The state should never be updated explicitly. React uses an
observable object as the state that observes what changes are made
to the state and helps the component behave accordingly.
 React provides its own method setState(). setState() method takes a
single parameter and expects an object which should contain the set
of values to be updated.
 State updates should be independent. The state object of a
component may contain multiple attributes and React allows to use
setState() function to update only a subset of those attributes as well
as using multiple setState() methods to update each attribute value
independently.
 The only time we are allowed to define the state explicitly is in the
constructor to provide the initial state.
Updating State in React
In React, a State object can be updated using setState() method.
React may update multiple setState() updates in a single go. Thus using
the value of the current state may not always generate the desired
result.
For example, let us take a case where we must keep a count (Likes of a
Post). Many developers may miswrite the code as below.
this.setState({counter: this.state.count + this.props.diff});
Correct Method to Update State
In the below code, we are using the ES6 thick arrow function format to
take the previous state and props of the component as parameters and
are updating the counter. The same can be written using the default
functional way as follows.
this.setState((prevState, props) => ({
counter: prevState.count + props.diff
}));
Managing state effectively is crucial in React applications. It allows
components to react to user input dynamically.
Example
This example demonstrates the use of React JS state creating a simple
counter application.
import React from "react";
import ReactDOM from "react-dom/client";

class App extends React.Component {

constructor(props) {
super(props);
this.state = {
count: 0,
};
}

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

decrement = () => {
this.setState((prevState) => ({
count: prevState.count - 1,
}));
};

render() {
return (
<div>
<h1>
The current count is :{" "}
{this.state.count}
</h1>
<button onClick={this.increment}>
Increase
</button>
<button onClick={this.decrement}>
Decrease
</button>
</div>
);
}
}

const root = ReactDOM.createRoot(

document.getElementById("root")
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);