What is js react ?

React is a JavaScript library for building user interfaces. It allows developers to build reusable UI
components and manage the state of their application in an efficient and easy-to-understand way.It is
often used in combination with other JavaScript libraries and frameworks, such as Redux, to build
complex web applications.

React Components
In React, a component is a piece of code that represents a part of a user interface. Components are
typically written as JavaScript classes or functions, and they can be reused throughout an application.

EXAMPLE:

import React from 'react';

function HelloWorld() {

return <h1>Hello, World!</h1>;

export default HelloWorld;

React State
In React, state refers to the data or variables that determine a component's behavior and render the
component's view. It is an object that holds the component's data and determines how the component
will behave and render. Unlike props, which are passed down from a parent component, a component's
state is managed and updated by the component itself.

import React, { Component } from 'react';

class Counter extends Component {

constructor(props) {

super(props);

this.state = { count: 0 };
 }

handleClick = () => {

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

render() {

return (

<div>

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

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

</div>

);

export default Counter;

React State
In React, props (short for properties) are a way to pass data from a parent component to a child
component. Props are passed as attributes to a component when it is rendered, and they can be used to
customize the behavior or appearance of a component.

import React from 'react';

function Greeting(props) {

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

}
export default Greeting;

React Props
React Props validation is the process of checking if the props passed to a component meet certain
conditions.

React provides a library called PropTypes that allows you to define the types and validation rules for a
component's props.

import React from 'react';

import PropTypes from 'prop-types';

function Greeting(props) {

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

Greeting.propTypes = {

name: PropTypes.string.isRequired

};

export default Greeting;

What is Constructor?
In React, the constructor is a special method that is called when a new instance of a component is
created. It is used to initialize the component's state, bind event handlers to the component's instance,
and perform any other setup that is needed before the component is rendered.

import React, { useState } from 'react';

function Counter() {

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

 return (

<div>

<button onClick={() => setCount(count + 1)}>Increment</button>

<p>Count: {count}</p>

</div>

);

export default Counter;

React Component API

The React Component API refers to the methods and properties that are available to a React component
when it is rendered. These methods and properties are provided by the React library and allow you to
manipulate the component's state, update the component's view, and interact with other parts of the
application.

we are going to explain the three most important methods available in the React component
API.

1. setState()
2. forceUpdate()
3. findDOMNode()

setState()

This method is used to update the component's state and re-render the component with the new state.
When setState() is called, React will merge the new state with the existing state and re-render the
component. The callback function is invoked after the component finishes re-rendering.

forceUpdate()

This method is used to force a component to re-render without updating its state. This is useful when
the component's state is derived from some other source and the component needs to be updated to
reflect those changes
 FindDOM Node()

This method returns the actual DOM element that represents a component. This is useful when you
need to access the DOM element directly, for example, to read or modify its attributes or styles.

import React, { Component } from 'react';

import PropTypes from 'prop-types';
class App extends React.Component {
constructor() {
super();
this.state = {
msg: "Welcome to JavaTpoint"
};
this.updateSetState = this.updateSetState.bind(this);
}
updateSetState() {
this.setState({
msg:"Its a best ReactJS tutorial"
});
}
render() {
return (
<div>
<h1>{this.state.msg}</h1>
<button onClick = {this.updateSetState}>SET STATE</button>
</div>
);
}
}
export default App;

React Component Life-Cycle

In React, a component's "lifecycle" refers to the sequence of events that occur from the moment a
component is created to the moment it is destroyed. React provides a set of lifecycle methods that allow
you to perform specific actions at specific points in a component's lifecycle.
lifecycle of the component is divided into four phases. They are:

1. Initial Phase
2. Mounting Phase
3. Updating Phase
4. Unmounting Phase

import React, { Component } from 'react';

class MyComponent extends Component {

constructor(props) {

super(props);

console.log('Initial phase: constructor method called');

this.state = { count: 0 };

componentDidMount() {

console.log('Mounting phase: componentDidMount method called');

// fetch data, setup timers, add event listeners

State and Lifecycle

In React, a component's "state" refers to the data or variables that determine how the
component should render and behave. A component's state can change over time, and when it
does, the component re-renders to reflect the new state.
React provides a way to manage and update a component's state through the useState Hook
and the setState method.

The useState Hook allows a component to keep track of a piece of state and update it. It takes
in a default value as an argument and returns an array with two elements: the current state
value and a function

class MyComponent extends React.Component {

componentDidMount() {

// Perform an action after the component has rendered

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

function tick() {

const element = (

<div>

<h1>Hello, world!</h1>

<h2>It is {new Date().toLocaleTimeString()}.</h2>

</div>

);

root.render(element);}

setInterval(tick, 1000);
 react form

In React, forms are used to handle user input and interact with the application's state. To create
a form in React, you can use the form element and various form controls such as input, select,
and textarea.

import React, { useState } from 'react';

function FormExample() {

const [inputValue, setInputValue] = useState('');

const handleSubmit = event => {

event.preventDefault();

console.log(inputValue);

};

return (

<form onSubmit={handleSubmit}>

<label>

Name:

<input

type="text"

value={inputValue}
 onChange={event => setInputValue(event.target.value)}

/>

</label>

<input type="submit" value="Submit" />

</form>

);

export default FormExample;

ref link:

https://www.javatpoint.com/react-forms

https://reactjs.org/docs/state-and-lifecycle.html

https://reactjs.org/docs/state-and-lifecycle.html

how to run

open command panel in your terminal

and write cd reactrproject

and write npm start