2023-11-17 10:54:47 +05:00
|
|
|
---
|
2024-07-24 17:22:59 +08:00
|
|
|
title: React
|
2023-11-17 10:54:47 +05:00
|
|
|
date: 2023-11-17 10:12:25
|
|
|
|
|
background: bg-[#1289D8]
|
|
|
|
|
tags:
|
2024-05-22 02:17:43 -07:00
|
|
|
- react
|
|
|
|
|
- web
|
2023-11-17 10:54:47 +05:00
|
|
|
categories:
|
|
|
|
|
- Programming
|
|
|
|
|
intro: |
|
2024-07-24 17:22:59 +08:00
|
|
|
A React cheat sheet with the most important concepts, functions, methods, and more. A complete quick reference for beginners.
|
2023-11-17 10:54:47 +05:00
|
|
|
plugins:
|
2024-05-22 02:17:43 -07:00
|
|
|
- copyCode
|
2025-01-05 17:12:31 +02:00
|
|
|
- runCode
|
2023-11-17 10:54:47 +05:00
|
|
|
---
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
## Getting Started
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
### JSX
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let element = <h1>Hello, world!</h1>;
|
|
|
|
|
|
|
|
|
|
let emptyHeading = <h1 />;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### JSX Expressions
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
let name = 'Josh Perez';
|
2023-11-17 10:54:47 +05:00
|
|
|
let element = <h1>Hello, {name}</h1>;
|
|
|
|
|
|
|
|
|
|
function fullName(firstName, lastName) {
|
2025-06-18 14:06:41 +08:00
|
|
|
return firstName + ' ' + lastName;
|
2023-11-17 10:54:47 +05:00
|
|
|
}
|
2025-06-18 14:06:41 +08:00
|
|
|
let element = <h1>Hello, {fullName('Julie', 'Johnson')}</h1>;
|
2023-11-17 10:54:47 +05:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### JSX Attributes
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
const element = <img src={user.avatarUrl} />;
|
|
|
|
|
const element = <button className="btn">Click me</button>;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### JSX Functions
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
name() {
|
|
|
|
|
return "Julie";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<h1>
|
|
|
|
|
Hi {name()}!
|
|
|
|
|
</h1>
|
|
|
|
|
)
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
### JSX Conditional Rendering {.col-span-2}
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React from 'react';
|
2025-01-05 17:12:31 +02:00
|
|
|
function Weather(props) {
|
2023-11-17 10:54:47 +05:00
|
|
|
if (props.temperature >= 20) {
|
|
|
|
|
return (
|
|
|
|
|
<p>
|
|
|
|
|
It is {props.temperature}°C (Warm) in {props.city}
|
|
|
|
|
</p>
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
return (
|
|
|
|
|
<p>
|
|
|
|
|
It is {props.temperature}°C in {props.city}
|
|
|
|
|
</p>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-01-05 17:12:31 +02:00
|
|
|
|
|
|
|
|
export default () => <Weather city="New York" temperature={24} />;
|
2023-11-17 10:54:47 +05:00
|
|
|
```
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
Note: A component must always return something.
|
2023-11-17 10:54:47 +05:00
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
## Components
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
### Functional Component
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React from 'react';
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
export default function UserProfile() {
|
|
|
|
|
return (
|
2024-05-22 02:17:43 -07:00
|
|
|
<div className="UserProfile">
|
|
|
|
|
<div>Hello</div>
|
|
|
|
|
<div>World</div>
|
|
|
|
|
</div>
|
2023-11-17 10:54:47 +05:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
Note: Every component needs one root element
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
### Embed an internal Component
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React from 'react';
|
|
|
|
|
import UserAvatar from './UserAvatar';
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
export default function UserProfile() {
|
|
|
|
|
return (
|
2024-05-22 02:17:43 -07:00
|
|
|
<div className="UserProfile">
|
|
|
|
|
<UserAvatar />
|
|
|
|
|
<UserAvatar />
|
|
|
|
|
</div>
|
2023-11-17 10:54:47 +05:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
Note: Assuming UserAvatar is declared in UserAvatar.js
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
### Embed an external Component
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React from 'react';
|
|
|
|
|
import ComponentName from 'component-name';
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
export default function UserProfile() {
|
|
|
|
|
return (
|
2024-05-22 02:17:43 -07:00
|
|
|
<div className="UserProfile">
|
|
|
|
|
<ComponentName />
|
|
|
|
|
</div>
|
2023-11-17 10:54:47 +05:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
Note: External components are found on npmjs.com and need to be imported first.
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
### Advanced Functional Components
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React from 'react';
|
2023-11-17 10:54:47 +05:00
|
|
|
|
2025-01-05 17:12:31 +02:00
|
|
|
function Hello(props) {
|
2023-11-17 10:54:47 +05:00
|
|
|
function fullName() {
|
|
|
|
|
return `${props.firstName} ${props.lastName}`;
|
|
|
|
|
}
|
2024-05-22 02:17:43 -07:00
|
|
|
return <p>{fullName()}</p>;
|
2023-11-17 10:54:47 +05:00
|
|
|
}
|
|
|
|
|
|
2025-01-05 17:12:31 +02:00
|
|
|
export default () => <Hello firstName="Matt" lastName="Delac" />;
|
2023-11-17 10:54:47 +05:00
|
|
|
```
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
## Properties {.cols-2}
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
### Passing Properties to a Component
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
<!-- prettier-ignore -->
|
2023-11-17 10:54:47 +05:00
|
|
|
```javascript
|
2024-05-22 02:17:43 -07:00
|
|
|
<Student
|
|
|
|
|
firstName="Julie"
|
|
|
|
|
lastName="Johnson"
|
|
|
|
|
age={23}
|
|
|
|
|
pro={true}
|
|
|
|
|
/>
|
2023-11-17 10:54:47 +05:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Assigning the Properties from a Component
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React from 'react';
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
export default function Student(props) {
|
|
|
|
|
return (
|
|
|
|
|
<h1>
|
|
|
|
|
{props.firstName} {props.lastName} is {props.age}.
|
|
|
|
|
</h1>
|
2024-05-22 02:17:43 -07:00
|
|
|
);
|
2023-11-17 10:54:47 +05:00
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
## States {.cols-1}
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
### React State
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React, { useState } from 'react';
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
export default function Hello(props) {
|
2025-06-18 14:06:41 +08:00
|
|
|
let [name, setName] = useState('Julie');
|
2023-11-17 10:54:47 +05:00
|
|
|
function updateName() {
|
2025-06-18 14:06:41 +08:00
|
|
|
let newName = prompt('What is your name?');
|
2023-11-17 10:54:47 +05:00
|
|
|
setName(newName);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
2024-05-22 02:17:43 -07:00
|
|
|
<h1>{name}</h1>
|
|
|
|
|
<button onClick={updateName}>Update name</button>
|
2023-11-17 10:54:47 +05:00
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
## Events {.cols-1}
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
### Event Listener
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React from 'react';
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
export default function Hello() {
|
|
|
|
|
function handleClick(event) {
|
|
|
|
|
event.preventDefault();
|
2025-06-18 14:06:41 +08:00
|
|
|
alert('Hello World');
|
2023-11-17 10:54:47 +05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<a href="/" onClick={handleClick}>
|
|
|
|
|
Say Hi
|
|
|
|
|
</a>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
Note: The most common event listeners are onClick for links/buttons and onSubmit for forms.
|
2023-11-17 10:54:47 +05:00
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
## Loops {.cols-2}
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
### Looping through an Array
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
let elements = ['one', 'two', 'three'];
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<ul>
|
2024-05-22 02:17:43 -07:00
|
|
|
{elements.map(function (value, index) {
|
|
|
|
|
return <li key={index}>{value}</li>;
|
2023-11-17 10:54:47 +05:00
|
|
|
})}
|
|
|
|
|
</ul>
|
|
|
|
|
);
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
Note: Each list item inside a map loop needs a key attribute with a unique value which is generally the index.
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
### Looping through an Array of Objects
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let elements = [
|
|
|
|
|
{
|
2025-06-18 14:06:41 +08:00
|
|
|
name: 'one',
|
|
|
|
|
value: 1
|
2023-11-17 10:54:47 +05:00
|
|
|
},
|
|
|
|
|
{
|
2025-06-18 14:06:41 +08:00
|
|
|
name: 'two',
|
|
|
|
|
value: 2
|
2023-11-17 10:54:47 +05:00
|
|
|
},
|
|
|
|
|
{
|
2025-06-18 14:06:41 +08:00
|
|
|
name: 'three',
|
|
|
|
|
value: 3
|
|
|
|
|
}
|
2023-11-17 10:54:47 +05:00
|
|
|
];
|
|
|
|
|
return (
|
|
|
|
|
<ul>
|
|
|
|
|
{elements.map(function (element, index) {
|
|
|
|
|
return (
|
|
|
|
|
<li key={index}>
|
|
|
|
|
The value for {element.name} is {element.value}
|
|
|
|
|
</li>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</ul>
|
|
|
|
|
);
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
Note: Each list item inside a map loop needs a key attribute with a unique value which is generally the index.
|
2023-11-17 10:54:47 +05:00
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
## Forms {.cols-1}
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
### React Forms
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React, { useState } from 'react';
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
export default function LoginForm() {
|
2025-06-18 14:06:41 +08:00
|
|
|
let [username, setUsername] = useState('');
|
|
|
|
|
let [password, setPassword] = useState('');
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
function handleSubmit(event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
alert(`Loging in with ${username} and ${password}`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateUsername(event) {
|
|
|
|
|
setUsername(event.target.value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updatePassword(event) {
|
|
|
|
|
setPassword(event.target.value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
|
|
|
<input type="text" placeholder="Username" onChange={updateUsername} />
|
|
|
|
|
<input type="password" placeholder="Password" onChange={updatePassword} />
|
|
|
|
|
<input type="submit" value="Login" />
|
|
|
|
|
</form>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
## CSS {.cols-1}
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
### CSS in a React Component
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React from 'react';
|
|
|
|
|
import './Student.css';
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
export default function Student() {
|
2024-05-22 02:17:43 -07:00
|
|
|
return <div className="Student">Julie Johnson</div>;
|
2023-11-17 10:54:47 +05:00
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
Note: You'll then have to crate a css file called Student.css
|
2023-11-17 10:54:47 +05:00
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
## AJAX {.cols-1}
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
### AJAX Request with Axios
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React from 'react';
|
|
|
|
|
import axios from 'axios';
|
2023-11-17 10:54:47 +05:00
|
|
|
|
|
|
|
|
export default function Weather(props) {
|
|
|
|
|
function handleResponse(response) {
|
|
|
|
|
console.log(response);
|
|
|
|
|
}
|
2024-05-22 02:17:43 -07:00
|
|
|
|
2023-11-17 10:54:47 +05:00
|
|
|
if (notifications) {
|
2024-05-22 02:17:43 -07:00
|
|
|
return <p>notifications</p>;
|
2023-11-17 10:54:47 +05:00
|
|
|
} else {
|
|
|
|
|
let url = `https://notifications.com`;
|
|
|
|
|
axios.get(url).then(handleResponse);
|
|
|
|
|
return <p>Loading notifications..</p>;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
2024-03-19 02:00:34 +05:30
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
Note: Make sure to import Axios first to your project.
|
2024-03-19 02:00:34 +05:30
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
## Hooks {.cols-2}
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
### useState Hook
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React, { useState } from 'react';
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
function Counter() {
|
|
|
|
|
const [count, setCount] = useState(0);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<p>Count: {count}</p>
|
|
|
|
|
<button onClick={() => setCount(count + 1)}>Increment</button>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Counter;
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
Note: The useState Hook is a built-in React Hook that allows functional components to manage local state. It provides a
|
|
|
|
|
way to declare state variables and update them within a functional component. Example code illustrating how to use it
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
### Multiple State Variable Declaration
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React, { useState } from 'react';
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
function Counter() {
|
|
|
|
|
const [count, setCount] = useState(0);
|
2025-06-18 14:06:41 +08:00
|
|
|
const [name, setName] = useState('');
|
2024-03-19 02:00:34 +05:30
|
|
|
const [isCompleted, setIsCompleted] = useState(false);
|
|
|
|
|
|
|
|
|
|
const handleIncrement = () => {
|
|
|
|
|
setCount(count + 1);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleNameChange = (event) => {
|
|
|
|
|
setName(event.target.value);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const toggleCompletion = () => {
|
|
|
|
|
setIsCompleted(!isCompleted);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<p>Count: {count}</p>
|
|
|
|
|
<button onClick={handleIncrement}>Increment</button>
|
|
|
|
|
|
2025-06-18 14:06:41 +08:00
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
value={name}
|
|
|
|
|
onChange={handleNameChange}
|
|
|
|
|
placeholder="Enter your name"
|
|
|
|
|
/>
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
<label>
|
2025-06-18 14:06:41 +08:00
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
checked={isCompleted}
|
|
|
|
|
onChange={toggleCompletion}
|
|
|
|
|
/>
|
2024-03-19 02:00:34 +05:30
|
|
|
Completed
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Counter;
|
|
|
|
|
```
|
2024-05-22 02:17:43 -07:00
|
|
|
|
|
|
|
|
Note: You can declare multiple state variables using the useState Hook by calling it multiple times in a functional
|
|
|
|
|
component. Each call to useState manages a separate piece of state.
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
### Input State Management
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import { useState } from 'react';
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
function FormExample() {
|
2025-06-18 14:06:41 +08:00
|
|
|
const [formData, setFormData] = useState({
|
|
|
|
|
name: '',
|
|
|
|
|
email: '',
|
|
|
|
|
message: ''
|
|
|
|
|
});
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
const handleChange = (event) => {
|
|
|
|
|
const { name, value } = event.target;
|
|
|
|
|
setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleSubmit = (event) => {
|
|
|
|
|
event.preventDefault();
|
2025-06-18 14:06:41 +08:00
|
|
|
alert(
|
|
|
|
|
`Name: ${formData.name}, Email: ${formData.email}, Message: ${formData.message}`
|
|
|
|
|
);
|
2024-05-22 02:17:43 -07:00
|
|
|
};
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
|
|
|
<label htmlFor="name">Name:</label>
|
2025-06-18 14:06:41 +08:00
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
id="name"
|
|
|
|
|
name="name"
|
|
|
|
|
value={formData.name}
|
|
|
|
|
onChange={handleChange}
|
|
|
|
|
/>
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
<label htmlFor="email">Email:</label>
|
2025-06-18 14:06:41 +08:00
|
|
|
<input
|
|
|
|
|
type="email"
|
|
|
|
|
id="email"
|
|
|
|
|
name="email"
|
|
|
|
|
value={formData.email}
|
|
|
|
|
onChange={handleChange}
|
|
|
|
|
/>
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
<label htmlFor="message">Message:</label>
|
2025-06-18 14:06:41 +08:00
|
|
|
<textarea
|
|
|
|
|
id="message"
|
|
|
|
|
name="message"
|
|
|
|
|
value={formData.message}
|
|
|
|
|
onChange={handleChange}
|
|
|
|
|
/>
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
<button type="submit">Submit</button>
|
|
|
|
|
</form>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default FormExample;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### useEffect Hook
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React, { useState, useEffect } from 'react';
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
function Timer() {
|
|
|
|
|
const [seconds, setSeconds] = useState(0);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const interval = setInterval(() => {
|
|
|
|
|
setSeconds((prevSeconds) => prevSeconds + 1);
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
return () => clearInterval(interval);
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return <div>Seconds: {seconds}</div>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Timer;
|
|
|
|
|
```
|
2024-05-22 02:17:43 -07:00
|
|
|
|
|
|
|
|
Note: The useEffect Hook in React is used for performing side effects in functional components. It allows you to execute
|
|
|
|
|
code based on component lifecycle events like mounting, updating, and unmounting.
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
### Fetch API using useEffect
|
|
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
|
import axios from 'axios';
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
function UserList() {
|
|
|
|
|
const [users, setUsers] = useState([]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
2024-05-22 02:17:43 -07:00
|
|
|
axios
|
2025-06-18 14:06:41 +08:00
|
|
|
.get('https://jsonplaceholder.typicode.com/users')
|
2024-05-22 02:17:43 -07:00
|
|
|
.then((response) => {
|
2024-03-19 02:00:34 +05:30
|
|
|
setUsers(response.data);
|
|
|
|
|
})
|
2024-05-22 02:17:43 -07:00
|
|
|
.catch((error) => {
|
2025-06-18 14:06:41 +08:00
|
|
|
console.error('Error fetching users:', error);
|
2024-03-19 02:00:34 +05:30
|
|
|
});
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<h2>User List</h2>
|
|
|
|
|
<ul>
|
2024-05-22 02:17:43 -07:00
|
|
|
{users.map((user) => (
|
2024-03-19 02:00:34 +05:30
|
|
|
<li key={user.id}>{user.name}</li>
|
|
|
|
|
))}
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default UserList;
|
|
|
|
|
```
|
2024-05-22 02:17:43 -07:00
|
|
|
|
2024-03-19 02:00:34 +05:30
|
|
|
Note: Make sure to import Axios first to your project.
|
|
|
|
|
|
2024-05-22 02:17:43 -07:00
|
|
|
### Custom Hook creation useLocalStorage
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import { useState, useEffect } from 'react';
|
2024-03-19 02:00:34 +05:30
|
|
|
|
|
|
|
|
function useLocalStorage(key, initialValue) {
|
|
|
|
|
const [value, setValue] = useState(() => {
|
|
|
|
|
const storedValue = localStorage.getItem(key);
|
|
|
|
|
return storedValue !== null ? JSON.parse(storedValue) : initialValue;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
localStorage.setItem(key, JSON.stringify(value));
|
|
|
|
|
}, [key, value]);
|
|
|
|
|
|
|
|
|
|
return [value, setValue];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default useLocalStorage;
|
|
|
|
|
```
|
2024-05-22 02:17:43 -07:00
|
|
|
|
|
|
|
|
Note: Custom Hooks are reusable functions in React that contain logic shared across multiple components. They allow you
|
|
|
|
|
to extract stateful logic from components into standalone functions.
|
2024-07-24 13:54:16 +05:30
|
|
|
|
|
|
|
|
### Creating Refs in Class Components
|
2025-01-05 17:12:31 +02:00
|
|
|
|
2024-07-24 13:54:16 +05:30
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React, { Component } from 'react';
|
2024-07-24 13:54:16 +05:30
|
|
|
|
|
|
|
|
class MyComponent extends Component {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.myRef = React.createRef();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
console.log(this.myRef.current); // Access the DOM element
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
return <div ref={this.myRef}>Hello, world!</div>;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default MyComponent;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Using Refs in Functional Components
|
|
|
|
|
|
2025-01-05 17:12:31 +02:00
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React, { useRef, useEffect } from 'react';
|
2024-07-24 13:54:16 +05:30
|
|
|
|
|
|
|
|
function MyComponent() {
|
|
|
|
|
const myRef = useRef(null);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
console.log(myRef.current); // Access the DOM element
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return <div ref={myRef}>Hello, world!</div>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default MyComponent;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Callback Refs
|
|
|
|
|
|
2025-01-05 17:12:31 +02:00
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React, { Component } from 'react';
|
2024-07-24 13:54:16 +05:30
|
|
|
|
|
|
|
|
class MyComponent extends Component {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.myRef = null;
|
2025-01-05 17:12:31 +02:00
|
|
|
this.setRef = (element) => {
|
2024-07-24 13:54:16 +05:30
|
|
|
this.myRef = element;
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
console.log(this.myRef); // Access the DOM element
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
return <div ref={this.setRef}>Hello, world!</div>;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default MyComponent;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Forwarding Refs
|
2025-01-05 17:12:31 +02:00
|
|
|
|
2024-07-24 13:54:16 +05:30
|
|
|
```javascript
|
|
|
|
|
Copy code
|
|
|
|
|
import React from "react";
|
|
|
|
|
|
|
|
|
|
const FancyButton = React.forwardRef((props, ref) => (
|
|
|
|
|
<button ref={ref} className="FancyButton">
|
|
|
|
|
{props.children}
|
|
|
|
|
</button>
|
|
|
|
|
));
|
|
|
|
|
|
|
|
|
|
// Usage
|
|
|
|
|
const ref = React.createRef();
|
|
|
|
|
<FancyButton ref={ref}>Click me!</FancyButton>;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Accessing DOM Elements with Refs
|
2025-01-05 17:12:31 +02:00
|
|
|
|
2024-07-24 13:54:16 +05:30
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React, { useRef, useEffect } from 'react';
|
2024-07-24 13:54:16 +05:30
|
|
|
|
|
|
|
|
function FocusInput() {
|
|
|
|
|
const inputRef = useRef(null);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// Focus the input element when the component mounts
|
|
|
|
|
inputRef.current.focus();
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return <input ref={inputRef} type="text" />;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default FocusInput;
|
|
|
|
|
```
|
2025-06-18 14:06:41 +08:00
|
|
|
|
|
|
|
|
Note: Refs are often used to access and interact with DOM elements directly. Here's an example where we focus an input
|
|
|
|
|
element using a ref.
|
2024-07-24 13:54:16 +05:30
|
|
|
|
|
|
|
|
### Managing Focus with Refs
|
2025-01-05 17:12:31 +02:00
|
|
|
|
2024-07-24 13:54:16 +05:30
|
|
|
```javascript
|
2025-06-18 14:06:41 +08:00
|
|
|
import React, { useRef } from 'react';
|
2024-07-24 13:54:16 +05:30
|
|
|
|
|
|
|
|
function Form() {
|
|
|
|
|
const firstInputRef = useRef(null);
|
|
|
|
|
const secondInputRef = useRef(null);
|
|
|
|
|
|
|
|
|
|
const handleKeyDown = (e) => {
|
2025-06-18 14:06:41 +08:00
|
|
|
if (e.key === 'Enter') {
|
2024-07-24 13:54:16 +05:30
|
|
|
secondInputRef.current.focus();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<input ref={firstInputRef} type="text" onKeyDown={handleKeyDown} />
|
|
|
|
|
<input ref={secondInputRef} type="text" />
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Form;
|
2024-07-24 17:22:59 +08:00
|
|
|
```
|
2025-06-18 14:06:41 +08:00
|
|
|
|
2025-04-08 12:48:38 +05:30
|
|
|
Note: You can also manage focus between multiple elements using refs.
|
