लोड हो रहा है...

React चीटशीट

React चीटशीट रिएक्ट (React) डेवलपर्स के लिए एक संक्षिप्त लेकिन व्यापक संदर्भ है, जो मुख्य कॉन्सेप्ट्स, मेथड्स और बेस्ट प्रैक्टिसेस को जल्दी समझने और लागू करने में मदद करता है। यह विशेष रूप से उन डेवलपर्स के लिए उपयोगी है जो आधुनिक वेब एप्लिकेशन्स और Single Page Applications (SPAs) में उच्च प्रदर्शन और maintainability सुनिश्चित करना चाहते हैं। चीटशीट में Hooks, component patterns, lifecycle मेथड्स और performance optimization जैसे महत्वपूर्ण पहलुओं का संक्षिप्त सार होता है।
रिएक्ट (React) में components UI के building blocks हैं, जबकि state management dynamic interactions को control करता है। Data flow predictable UI updates सुनिश्चित करता है और lifecycle component के mounting, updating और unmounting को manage करता है। React चीटशीट इन सभी concepts को summarize करता है और developers को prop drilling से बचने, unnecessary re-renders को minimize करने और reusable components बनाने में मदद करता है।
इस चीटशीट का उपयोग करके पाठक सीखेंगे कि useState और useEffect जैसे Hooks को सही तरीके से कैसे implement किया जाए, data flow और lifecycle को कैसे manage किया जाए, और scalable और performant components कैसे डिज़ाइन किए जाएँ। यह एक प्रैक्टिकल और तुरंत लागू होने वाला reference है, जो रिएक्ट (React) डेवलपमेंट के professional context में उपयोगी है।

मूल उदाहरण

jsx
JSX Code 
import React, { useState } from 'react';

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

const increment = () => setCount(prev => prev + 1);
const decrement = () => setCount(prev => prev - 1);

return (
<div style={{ textAlign: 'center', marginTop: '50px' }}> <h2>सिंपल काउंटर</h2> <p>Current Count: {count}</p> <button onClick={increment}>Increase</button> <button onClick={decrement}>Decrease</button> </div>
);
}

export default Counter;

उपरोक्त उदाहरण रिएक्ट (React) में components और state management के core concepts को दिखाता है। Counter component useState Hook का उपयोग करता है ताकि component का local state track किया जा सके। increment और decrement functions state को सुरक्षित रूप से update करते हैं, सीधे mutation से बचते हैं और predictable re-renders सुनिश्चित करते हैं।
यह pattern React best practices का पालन करता है, logic को isolate करता है और component को reusable बनाता है। प्रत्येक state update UI को automatically re-render करता है, जिससे unidirectional data flow को demonstrate किया गया है। यह उदाहरण developers को complex applications में extendable और maintainable solutions बनाने का template देता है।

व्यावहारिक उदाहरण

jsx
JSX Code 
import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
async function fetchUser() {
setLoading(true);
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
const data = await response.json();
setUser(data);
} catch (error) {
console.error('User loading error:', error);
} finally {
setLoading(false);
}
}
fetchUser();
}, [userId]);

if (loading) return <p>Loading...</p>;
if (!user) return <p>User not found</p>;

return ( <div> <h2>User Profile</h2> <p>Name: {user.name}</p> <p>Email: {user.email}</p> </div>
);
}

export default UserProfile;

Advanced रिएक्ट (React) Implementation

jsx
JSX Code 
import React, { useState, useEffect, useCallback } from 'react';

function TodoApp() {
const [todos, setTodos] = useState([]);
const [task, setTask] = useState('');

const addTodo = useCallback(() => {
if (task.trim() === '') return;
setTodos(prev => [...prev, { id: Date.now(), text: task }]);
setTask('');
}, [task]);

const removeTodo = useCallback((id) => {
setTodos(prev => prev.filter(todo => todo.id !== id));
}, []);

useEffect(() => {
console.log('Todos updated:', todos);
}, [todos]);

return ( <div> <h2>Todo Application</h2>
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="Add new task"
/> <button onClick={addTodo}>Add</button> <ul>
{todos.map(todo => ( <li key={todo.id}>
{todo.text} <button onClick={() => removeTodo(todo.id)}>Remove</button> </li>
))} </ul> </div>
);
}

export default TodoApp;

React चीटशीट की best practices में modular और reusable components, hooks के माध्यम से safe state management और clear unidirectional data flow शामिल हैं। आम गलतियां, जिन्हें avoid करना चाहिए, उनमें prop drilling, direct state mutation और unnecessary re-renders शामिल हैं।

📊 संपूर्ण संदर्भ

रिएक्ट (React) Element/Method Description Syntax Example Notes
Component UI के reusable units बनाता है function MyComponent() {} function MyComponent() { return <div>Hello</div>; } Core building block
useState Local state management const [state, setState] = useState(initial); const [count, setCount] = useState(0); Avoids prop drilling
useEffect Side effects और lifecycle useEffect(() => {}, [deps]); useEffect(() => { console.log(count); }, [count]); Lifecycle management
useReducer Complex state logic const [state, dispatch] = useReducer(reducer, initial); const [state, dispatch] = useReducer(reducer, {}); Alternative to useState
props Component को data pass करना <Component propName={value} /> <Greeting name="Anna" /> Read-only
context Global data sharing React.createContext() const ThemeContext = React.createContext(); Avoids deep prop drilling
React.memo Performance optimization export default React.memo(Component); export default React.memo(MyComponent); Prevents unnecessary re-renders
useCallback Function memoization const memoFn = useCallback(fn, [deps]); const add = useCallback(() => {}, []); Prevents redefinition
useMemo Value memoization const memoValue = useMemo(() => compute(), [deps]); const total = useMemo(() => calcTotal(), [items]); Performance optimization
key List items के लिए unique ID <li key={id}>Item</li> <li key={todo.id}>{todo.text}</li> List rendering
event handling Event handling onClick, onChange <button onClick={handleClick}>Click</button> Use separate handlers
refs DOM या component access const ref = useRef(); const inputRef = useRef(); Direct DOM access
lazy Lazy loading React.lazy(() => import('./Component')) const LazyComp = React.lazy(() => import('./Comp')); Reduce bundle size
Suspense Fallback for lazy components <Suspense fallback={<Loading />}><LazyComp /></Suspense> <Suspense fallback={<p>Loading...</p>}><LazyComp /></Suspense> Use with lazy
forwardRef Ref forwarding React.forwardRef((props, ref) => {}) const Input = React.forwardRef((props, ref) => <input ref={ref} />) External access
error boundaries Error handling class ErrorBoundary extends React.Component {} class ErrorBoundary extends React.Component { render() { return this.props.children; }} Catch errors

📊 Complete रिएक्ट (React) Properties Reference

Property Values Default Description रिएक्ट (React) Support
useState any null Local state management v16.8+
useEffect function null Side effects & lifecycle v16.8+
useReducer function null Complex state logic v16.8+
props any {} Pass data to component v0.14+
context object null Global data sharing v16.3+
key string/number null Unique list ID v0.14+
ref object null DOM or component access v16.3+
memo HOC null Performance optimization v16.6+
lazy function null Lazy loading v16.6+
Suspense component null Fallback for lazy components v16.6+
forwardRef function null Ref forwarding v16.3+
ErrorBoundary class null Component error handling v16+

सारांश और अगले कदम:
React चीटशीट रिएक्ट (React) में efficient और maintainable applications बनाने के लिए एक प्रैक्टिकल और संक्षिप्त reference प्रदान करता है। मुख्य takeaways में modular components, safe state management, clear data flow और lifecycle management शामिल हैं। इन techniques को अपनाकर scalable SPAs विकसित की जा सकती हैं।
अगले कदमों में global state management के लिए Redux या Zustand, performance optimization के लिए React Profiler, और React Router या Axios के साथ complex SPAs का निर्माण शामिल है। चीटशीट के उदाहरणों को वास्तविक प्रोजेक्ट्स में लागू करके ज्ञान को मजबूत किया जा सकता है, जबकि official documentation और advanced tutorials लगातार learning resources के रूप में काम कर सकते हैं।

संबंधित खोज शब्द

उपयोगकर्ता इन शब्दों का उपयोग करके भी इस सामग्री की खोज करते हैं:

React चीटशीट React संदर्भ React Hooks guide React components tutorial useState उदाहरण React useEffect उपयोग React React performance optimization Prop Drilling रोकें React Reusable components React State management React React SPA optimization Advanced React patterns React DevTools टिप्स React best practices React project guide

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓
4
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 1 का 1
React ट्यूटोरियल