तो स्वागत है आपका। 👋
अगर आप Modern Web Development सीखना चाहते हैं, तो React JS सबसे लोकप्रिय JavaScript Libraries में से एक है। इसकी मदद से आप Fast, Interactive और Reusable User Interfaces (UI) बना सकते हैं।
इस Complete Cheat Sheet में आपको React JS के 300+ महत्वपूर्ण Concepts आसान भाषा में एक ही जगह मिलेंगे। चाहे आप Beginner हों, Student हों या Frontend Developer बनने की तैयारी कर रहे हों, यह Guide आपके लिए बहुत उपयोगी होगी।
💡 मेरा अनुभव
जब मैंने React JS सीखना शुरू किया, तो मुझे JSX, Components, Props और Hooks समझने में थोड़ा समय लगा। लेकिन जब मैंने छोटे-छोटे Projects जैसे Todo App, Calculator और Weather App बनाना शुरू किया, तब React काफी आसान लगने लगा।
अगर आप भी सिर्फ पढ़ने की बजाय Practice करेंगे, तो React जल्दी समझ आएगा।
React JS क्या है?
React JS एक JavaScript Library है जिसे Interactive User Interfaces बनाने के लिए इस्तेमाल किया जाता है। इसे Meta (Facebook) ने बनाया और Open Source के रूप में उपलब्ध कराया।
React की सबसे बड़ी खासियत है कि इसमें UI को छोटे-छोटे Reusable Components में बाँटा जाता है।
React JS क्यों सीखें?
React सीखने के फायदे—
Fast UI Rendering
Reusable Components
Virtual DOM
Large Community
High Demand Jobs
Easy API Integration
Cross Platform Development (React Native)
💡 मेरी सलाह
React सीखने से पहले आपको अच्छी तरह आना चाहिए—
HTML
CSS
JavaScript (ES6)
DOM
Functions
Objects
Arrays
Promises
Async/Await
React Installation
Create React App
npx create-react-app my-app
Project Start करें
npm start
Production Build
npm run build
Folder Structure
src/
│
├── assets/
├── components/
├── pages/
├── hooks/
├── context/
├── services/
├── App.js
├── index.js
└── styles/
JSX
JSX का मतलब JavaScript XML है।
Example
function App() {
return <h1>Hello React</h1>;
}
Components
दो प्रकार के Components होते हैं—
Functional Component
Class Component
Functional Component
function Home() {
return <h2>Home Page</h2>;
}
Props
Props का उपयोग Parent Component से Child Component को Data भेजने के लिए किया जाता है।
function User(props) {
return <h2>{props.name}</h2>;
}
State
State Component का Internal Data होता है।
const [count, setCount] = useState(0);
React Hooks
सबसे महत्वपूर्ण Hooks—
useState()
useEffect()
useContext()
useRef()
useMemo()
useCallback()
useReducer()
useLayoutEffect()
useImperativeHandle()
useId()
useState()
const [name, setName] = useState("");
useEffect()
useEffect(() => {
console.log("Component Loaded");
}, []);
useRef()
const inputRef = useRef();
useMemo()
const result = useMemo(() => {
return calculate();
}, []);
useCallback()
const handleClick = useCallback(() => {
console.log("Clicked");
}, []);
useContext()
const value = useContext(UserContext);
useReducer()
const [state, dispatch] = useReducer(reducer, initialState);
Event Handling
<button onClick={handleClick}>
Click
</button>
Conditional Rendering
{
isLogin ? <Home/> : <Login/>
}
Lists
users.map(user=>(
<h2>{user.name}</h2>
))
Forms
Controlled Component
<input
value={name}
onChange={handleChange}
/>
React Router
Install
npm install react-router-dom
Basic Route
<Route path="/" element={<Home/>}/>
API Call
Fetch
fetch(url);
Axios Install
npm install axios
Axios Example
axios.get(url);
Context API
Use for
Theme
Login
Language
Global State
Styling Methods
CSS
CSS Modules
Tailwind CSS
Bootstrap
Styled Components
Lifecycle (Functional)
Mount
Update
Unmount
Handled using:
useEffect()
Performance Optimization
React.memo()
useMemo()
useCallback()
Lazy Loading
Code Splitting
Common React Packages
npm install react-router-dom
npm install axios
npm install redux
npm install react-icons
npm install framer-motion
State Management
Context API
Redux Toolkit
Zustand
Recoil
Project Ideas
Todo App
Calculator
Weather App
Blog Website
Notes App
Quiz App
Expense Tracker
Chat App
Portfolio Website
E-commerce Store
React Best Practices
Components छोटे रखें।
Reusable Components बनाएँ।
Hooks का सही उपयोग करें।
Props को Modify न करें।
State को Minimum रखें।
Folder Structure साफ रखें।
API Calls को अलग File में रखें।
Environment Variables का उपयोग करें।
⚠️ Note
कभी भी API Keys, Tokens या Secret Values को सीधे React Code में Hardcode न करें। Frontend Code Browser में दिखाई देता है। Sensitive जानकारी हमेशा Backend या सुरक्षित Environment Variables के माध्यम से संभालें।
Quick Summary
| Topic | Includes |
|---|---|
| Basics | JSX, Components |
| Data | Props, State |
| Hooks | useState, useEffect, useRef |
| Routing | React Router |
| APIs | Fetch, Axios |
| Styling | CSS, Tailwind |
| State Management | Context API, Redux |
| Performance | Memo, Lazy Loading |
💡 Pro Tip
React सीखने का सबसे अच्छा तरीका है हर नया Concept सीखने के बाद एक छोटा Project बनाना। जैसे Counter App, Todo App, Weather App, Calculator या Blog Website। इससे Concepts लंबे समय तक याद रहते हैं और Interview की तैयारी भी मजबूत होती है।
Conclusion
React JS आज Frontend Development की सबसे लोकप्रिय Libraries में से एक है। इसकी मदद से आप Modern, Fast और Interactive Web Applications बना सकते हैं।
अगर आप इस Cheat Sheet में दिए गए सभी Concepts की Practice करते हैं और Projects बनाते हैं, तो React सीखना काफी आसान हो जाएगा। इस Guide को Bookmark कर लें ताकि भविष्य में जल्दी Revision कर सकें।
FAQs
1. React JS क्या है?
React JS एक JavaScript Library है जिसका उपयोग Interactive User Interfaces और Single Page Applications (SPA) बनाने के लिए किया जाता है।
2. क्या React सीखने से पहले JavaScript आना ज़रूरी है?
हाँ। React सीखने के लिए JavaScript (विशेषकर ES6) की अच्छी समझ होना बहुत ज़रूरी है।
3. JSX क्या होता है?
JSX, JavaScript और HTML जैसी Syntax का मिश्रण है, जिससे React Components लिखना आसान हो जाता है।
4. Hooks क्या हैं?
Hooks ऐसे Functions हैं जो Functional Components में State और Lifecycle जैसी सुविधाएँ इस्तेमाल करने की अनुमति देते हैं।
5. Props और State में क्या अंतर है?
Props Parent Component से Data प्राप्त करते हैं, जबकि State Component का अपना Internal Data होता है जिसे बदला जा सकता है।
6. React Router का उपयोग क्यों किया जाता है?
React Router का उपयोग Single Page Application में अलग-अलग Pages या Routes को Manage करने के लिए किया जाता है।
7. Beginner को React में सबसे पहले कौन-सा Project बनाना चाहिए?
शुरुआत Counter App, Todo App, Calculator, Weather App या Notes App जैसे छोटे Projects से करें। इससे React के Basics अच्छी तरह समझ में आते हैं।
