React is a JavaScript library for building user interfaces, primarily for single-page applications. The core principles include components, props, state, and life cycle methods.
To start using React, you can use Create React App, which sets up your development environment so you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.
npx create-react-app my-react-app
cd my-react-app
npm start
This will create a new directory named "my-react-app" and start the development server.
Components are reusable, independent pieces of your UI. They can be functional or class-based.
function Welcome(props) {
return Hello, {props.name};
}
class Welcome extends React.Component {
render() {
return Hello, {this.props.name};
}
}
Props are read-only components which must be kept pure, i.e., they must not change.
<Welcome name="Sarah" />
State is used for data that should change over time. The `useState` hook is used for adding state to functional components.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Life Cycle Methods are specially designated methods in the class-based component that run automatically during different stages of the component's life.
class MyComponent extends React.Component {
componentDidMount() {
console.log('Component Did Mount!');
}
render() {
return <div>Hello World!</div>;
}
}
Handling events with React elements is very similar to handling events on DOM elements.
function MyButton() {
function handleClick() {
console.log('Button was clicked!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
You can conditionally render elements in React.
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return Welcome back!;
}
return Please sign up.;
}
React elements can represent collections of items.
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return <ul>{listItems}</ul>;
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
React can also be used to build forms.
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<button type="submit">Submit</button>
</form>
);
}
}
Sharing state between components can be done by "lifting up" the state.
class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(value) {
this.setState({value});
}
render() {
const value = this.state.value;
return (
<div>
<InputComponent value={value} handleChange={this.handleChange} />
<DisplayComponent value={value} />
</div>
);
}
}
function InputComponent(props) {
function handleChange(event) {
props.handleChange(event.target.value);
}
return <input type="text" value={props.value} onChange={handleChange} />;
}
function DisplayComponent(props) {
return <p>{props.value}</p>;
}
UPCET Exam
Click Here
SAAT Exam
Click Here
MHT CET Exam
Click Here
IPU CET Exam
Click Here
KCET Exam
Click Here
COMEDK UG Exam
Click Here
VITEEE Exam
Click Here
BITSAT
Click Here
DSAT: Dayanand Sagar Admission Test
Click Here
Career In Animation in india
Click Here
Merchant Navy Courses in india
Click Here
Interior Design Career in india
Click Here
UGC NET Exam
Click Here
B. Ed Exam
Click Here
AFCAT - Air Force Common Admission Test
Click Here
GATE Exam
Click Here
Joint Entrance Examination (JEE)
Click Here
Common Admission Test (CAT)
Click Here
CDS - Combined Defence Services Exam
Click Here