अध्याय 12: प्रोजेक्ट डेमो (Project Demo)

इस अध्याय में, हम एक प्रोजेक्ट डेमो के माध्यम से रिएक्ट.js में सीखी गई सभी अवधारणाओं और तकनीकों को व्यावहारिक रूप से लागू करेंगे। यह प्रोजेक्ट डेमो आपको वास्तविक समय के एप्लिकेशन विकास का अनुभव प्रदान करेगा, जिसमें हम विभिन्न रिएक्ट.js फीचर्स, परफॉर्मेंस ऑप्टिमाइजेशन, स्टेट मैनेजमेंट, राउटिंग, और अन्य महत्वपूर्ण टॉपिक्स को शामिल करेंगे। इस डेमो के माध्यम से, आप रिएक्ट.js में एक संपूर्ण प्रोजेक्ट बनाने और उसे डिप्लॉय करने की प्रक्रिया को समझ पाएंगे।

इस अध्याय में, आप निम्नलिखित विषयों को सीखेंगे:

• प्रोजेक्ट सेटअप और स्ट्रक्चर (Project Setup and Structure): प्रोजेक्ट की फाइल संरचना और आवश्यक सेटअप।
• मुख्य फीचर्स का इंप्लीमेंटेशन (Implementation of Key Features): रिएक्ट.js के प्रमुख फीचर्स का प्रोजेक्ट में उपयोग।
• स्टेट मैनेजमेंट (State Management): एप्लिकेशन स्टेट को प्रबंधित करने के लिए Redux या Context API का उपयोग।
• राउटिंग (Routing): रिएक्ट राउटर का उपयोग करके एप्लिकेशन में नेविगेशन को संभालना।
• परफॉर्मेंस ऑप्टिमाइजेशन (Performance Optimization): एप्लिकेशन की परफॉर्मेंस को बेहतर बनाने की तकनीकें।
• प्रोजेक्ट का डिप्लॉयमेंट (Project Deployment): प्रोजेक्ट को लाइव सर्वर पर डिप्लॉय करना।

इस प्रोजेक्ट डेमो के माध्यम से, आप रिएक्ट.js में अपने ज्ञान को मजबूत कर सकेंगे और एक पूर्ण एप्लिकेशन विकसित करने का आत्मविश्वास प्राप्त करेंगे।

छोटा प्रोजेक्ट: टू-डू लिस्ट (Small Project: To-Do List)

इस अध्याय में, हम एक छोटा और सरल रिएक्ट.js प्रोजेक्ट बनाएंगे: एक टू-डू लिस्ट एप्लिकेशन। यह प्रोजेक्ट आपको रिएक्ट.js की बुनियादी अवधारणाओं और तकनीकों को व्यावहारिक रूप से लागू करने में मदद करेगा। हम प्रोजेक्ट को सेटअप करेंगे, स्टेट मैनेजमेंट करेंगे, और इंटरैक्टिव फीचर्स जोड़ेंगे ताकि आप एक उपयोगी टू-डू लिस्ट एप्लिकेशन बना सकें।

इस अध्याय में, आप निम्नलिखित विषयों को सीखेंगे:

• प्रोजेक्ट सेटअप (Project Setup): एक नया रिएक्ट प्रोजेक्ट बनाना और आवश्यक डिपेंडेंसीज इंस्टॉल करना।
• मुख्य कंपोनेंट्स (Main Components): टू-डू लिस्ट के लिए आवश्यक मुख्य कंपोनेंट्स को बनाना।
• स्टेट मैनेजमेंट (State Management): एप्लिकेशन स्टेट को प्रबंधित करना और इंटरैक्टिव फीचर्स जोड़ना।
• इवेंट हैंडलिंग (Event Handling): उपयोगकर्ता इनपुट को हैंडल करना और टू-डू आइटम्स को जोड़ना, हटाना और मार्क करना।
• स्टाइलिंग (Styling): एप्लिकेशन को स्टाइल करना ताकि यह आकर्षक दिखे।

इस प्रोजेक्ट के माध्यम से, आप रिएक्ट.js में एक सरल लेकिन प्रभावी एप्लिकेशन बनाने की प्रक्रिया को समझ पाएंगे और अपने कौशल को मजबूत कर सकेंगे।

प्रोजेक्ट सेटअप (Project Setup)

1. नया रिएक्ट प्रोजेक्ट बनाना:

   npx create-react-app todo-list
   cd todo-list
   npm start
   

    

2. मुख्य कंपोनेंट्स बनाना:
   • App.js

     import React, { useState } from 'react';
     import './App.css';
     
     function App() {
       const [todos, setTodos] = useState([]);
       const [newTodo, setNewTodo] = useState('');
     
       const handleAddTodo = () => {
         if (newTodo.trim() !== '') {
           setTodos([...todos, { text: newTodo, completed: false }]);
           setNewTodo('');
         }
       };
     
       const handleDeleteTodo = (index) => {
         const updatedTodos = todos.filter((_, i) => i !== index);
         setTodos(updatedTodos);
       };
     
       const handleToggleTodo = (index) => {
         const updatedTodos = todos.map((todo, i) =>
           i === index ? { ...todo, completed: !todo.completed } : todo
         );
         setTodos(updatedTodos);
       };
     
       return (
         <div className="App">
           <h1>To-Do List</h1>
           <div className="input-container">
             <input
               type="text"
               value={newTodo}
               onChange={(e) => setNewTodo(e.target.value)}
               placeholder="Add a new task"
             />
             <button onClick={handleAddTodo}>Add</button>
           </div>
           <ul>
             {todos.map((todo, index) => (
               <li key={index} className={todo.completed ? 'completed' : ''}>
                 <span onClick={() => handleToggleTodo(index)}>{todo.text}</span>
                 <button onClick={() => handleDeleteTodo(index)}>Delete</button>
               </li>
             ))}
           </ul>
         </div>
       );
     }
     
     export default App;
     

      

3. स्टाइलिंग (Styling):
   • App.css:

     .App {
       text-align: center;
       font-family: Arial, sans-serif;
     }
     
     .input-container {
       margin: 20px;
     }
     
     input {
       padding: 10px;
       width: 200px;
       margin-right: 10px;
     }
     
     button {
       padding: 10px;
     }
     
     ul {
       list-style-type: none;
       padding: 0;
     }
     
     li {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 10px;
       border-bottom: 1px solid #ccc;
     }
     
     li.completed span {
       text-decoration: line-through;
     }
     
     span {
       cursor: pointer;
     }
     

      

बड़ा प्रोजेक्ट: ब्लॉगिंग एप्लिकेशन (Large Project: Blogging Application)

इस अध्याय में, हम एक बड़ा और अधिक जटिल रिएक्ट.js प्रोजेक्ट बनाएंगे: एक ब्लॉगिंग एप्लिकेशन। यह प्रोजेक्ट आपको रिएक्ट.js की उन्नत अवधारणाओं और तकनीकों को व्यावहारिक रूप से लागू करने में मदद करेगा। हम एक पूर्ण ब्लॉगिंग प्लेटफॉर्म बनाएंगे, जिसमें उपयोगकर्ता प्रोफाइल, पोस्ट्स, टिप्पणियां, और विभिन्न अन्य फीचर्स शामिल होंगे। इस प्रोजेक्ट के माध्यम से, आप एक वास्तविक समय के एप्लिकेशन विकास का अनुभव प्राप्त करेंगे।

इस अध्याय में, आप निम्नलिखित विषयों को सीखेंगे:

• प्रोजेक्ट सेटअप और संरचना (Project Setup and Structure): प्रोजेक्ट की फाइल संरचना और आवश्यक सेटअप।
• यूजर ऑथेंटिकेशन (User Authentication): उपयोगकर्ता लॉगिन और रजिस्ट्रेशन प्रक्रिया।
• पोस्ट क्रिएशन और मैनेजमेंट (Post Creation and Management): उपयोगकर्ताओं द्वारा पोस्ट्स बनाना, संपादित करना, और हटाना।
• टिप्पणियाँ (Comments): पोस्ट्स पर टिप्पणियां जोड़ना और प्रदर्शित करना।
• यूजर प्रोफाइल्स (User Profiles): उपयोगकर्ता प्रोफाइल पेज और जानकारी।
• स्टेट मैनेजमेंट (State Management): एप्लिकेशन स्टेट को प्रबंधित करने के लिए Redux या Context API का उपयोग।
• राउटिंग (Routing): रिएक्ट राउटर का उपयोग करके एप्लिकेशन में नेविगेशन को संभालना।
• परफॉर्मेंस ऑप्टिमाइजेशन (Performance Optimization): एप्लिकेशन की परफॉर्मेंस को बेहतर बनाने की तकनीकें।
• प्रोजेक्ट का डिप्लॉयमेंट (Project Deployment): प्रोजेक्ट को लाइव सर्वर पर डिप्लॉय करना।

प्रोजेक्ट सेटअप और संरचना (Project Setup and Structure)

1. नया रिएक्ट प्रोजेक्ट बनाना:

   npx create-react-app blogging-app
   cd blogging-app
   npm start
   

    

2. फोल्डर संरचना:

   blogging-app/
   ├── public/
   ├── src/
   │   ├── components/
   │   │   ├── Auth/
   │   │   ├── Posts/
   │   │   ├── Comments/
   │   │   ├── Profiles/
   │   ├── pages/
   │   │   ├── Home.js
   │   │   ├── Login.js
   │   │   ├── Register.js
   │   │   ├── Profile.js
   │   │   ├── Post.js
   │   ├── App.js
   │   ├── index.js
   ├── package.json
   

    

यूजर ऑथेंटिकेशन (User Authentication)

1. AuthContext.js:

   import React, { createContext, useState } from 'react';
   
   export const AuthContext = createContext();
   
   export const AuthProvider = ({ children }) => {
     const [user, setUser] = useState(null);
   
     const login = (userData) => {
       setUser(userData);
     };
   
     const logout = () => {
       setUser(null);
     };
   
     return (
       <AuthContext.Provider value={{ user, login, logout }}>
         {children}
       </AuthContext.Provider>
     );
   };
   

    

2. Login.js:

   import React, { useContext, useState } from 'react';
   import { AuthContext } from '../contexts/AuthContext';
   
   const Login = () => {
     const { login } = useContext(AuthContext);
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
   
     const handleLogin = () => {
       // Replace with real login logic
       login({ email });
     };
   
     return (
       <div>
         <h2>Login</h2>
         <input
           type="email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           placeholder="Email"
         />
         <input
           type="password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           placeholder="Password"
         />
         <button onClick={handleLogin}>Login</button>
       </div>
     );
   };
   
   export default Login;
   

    

3. Register.js:

   import React, { useState } from 'react';
   
   const Register = () => {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
   
     const handleRegister = () => {
       // Replace with real registration logic
       console.log('User registered:', { email, password });
     };
   
     return (
       <div>
         <h2>Register</h2>
         <input
           type="email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           placeholder="Email"
         />
         <input
           type="password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           placeholder="Password"
         />
         <button onClick={handleRegister}>Register</button>
       </div>
     );
   };
   
   export default Register;
   

    

पोस्ट क्रिएशन और मैनेजमेंट (Post Creation and Management)

1. CreatePost.js:

   import React, { useState } from 'react';
   
   const CreatePost = () => {
     const [title, setTitle] = useState('');
     const [content, setContent] = useState('');
   
     const handleCreatePost = () => {
       // Replace with real post creation logic
       console.log('Post created:', { title, content });
     };
   
     return (
       <div>
         <h2>Create Post</h2>
         <input
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           placeholder="Title"
         />
         <textarea
           value={content}
           onChange={(e) => setContent(e.target.value)}
           placeholder="Content"
         />
         <button onClick={handleCreatePost}>Create Post</button>
       </div>
     );
   };
   
   export default CreatePost;
   

    

2. Post.js:

   import React from 'react';
   
   const Post = ({ post }) => {
     return (
       <div>
         <h2>{post.title}</h2>
         <p>{post.content}</p>
       </div>
     );
   };
   
   export default Post;
   

    

टिप्पणियाँ (Comments)

1. Comments.js:

   import React, { useState } from 'react';
   
   const Comments = ({ postId }) => {
     const [comments, setComments] = useState([]);
     const [newComment, setNewComment] = useState('');
   
     const handleAddComment = () => {
       if (newComment.trim() !== '') {
         setComments([...comments, { text: newComment }]);
         setNewComment('');
       }
     };
   
     return (
       <div>
         <h3>Comments</h3>
         <ul>
           {comments.map((comment, index) => (
             <li key={index}>{comment.text}</li>
           ))}
         </ul>
         <input
           type="text"
           value={newComment}
           onChange={(e) => setNewComment(e.target.value)}
           placeholder="Add a comment"
         />
         <button onClick={handleAddComment}>Add Comment</button>
       </div>
     );
   };
   
   export default Comments;
   

    

यूजर प्रोफाइल्स (User Profiles)

1. Profile.js:

   import React, { useContext } from 'react';
   import { AuthContext } from '../contexts/AuthContext';
   
   const Profile = () => {
     const { user } = useContext(AuthContext);
   
     if (!user) {
       return <p>Please log in to view your profile.</p>;
     }
   
     return (
       <div>
         <h2>Profile</h2>
         <p>Email: {user.email}</p>
       </div>
     );
   };
   
   export default Profile;
   

    

स्टेट मैनेजमेंट (State Management)

Redux का उपयोग करके स्टेट मैनेजमेंट को सरल और व्यवस्थित किया जा सकता है।

1. Redux सेटअप:

   npm install redux react-redux
   

    

2. Redux स्टोर और एक्शन सेटअप:

   // store.js
   import { createStore } from 'redux';
   
   const initialState = {
     posts: [],
   };
   
   const reducer = (state = initialState, action) => {
     switch (action.type) {
       case 'ADD_POST':
         return {
           ...state,
           posts: [...state.posts, action.payload],
         };
       default:
         return state;
     }
   };
   
   const store = createStore(reducer);
   
   export default store;
   

   // actions.js
   export const addPost = (post) => ({
     type: 'ADD_POST',
     payload: post,
   });
   

   // App.js
   import React from 'react';
   import { Provider } from 'react-redux';
   import store from './store';
   import HomePage from './pages/Home';
   import Login from './pages/Login';
   import Register from './pages/Register';
   import Profile from './pages/Profile';
   import CreatePost from './components/Posts/CreatePost';
   
   const App = () => {
     return (
       <Provider store={store}>
         <div className="App">
           <HomePage />
           <Login />
           <Register />
           <Profile />
           <CreatePost />
         </div>
       </Provider>
     );
   };
   
   export default App;
   

    

राउटिंग (Routing)

React Router का उपयोग करके एप्लिकेशन में नेविगेशन को संभालना।

1. React Router सेटअप:

   npm install react-router-dom
   

    

2. राउटिंग सेटअप:

   // App.js
   import React from 'react';
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   import HomePage from './pages/Home';
   import Login from './pages/Login';
   import Register from './pages/Register';
   import Profile from './pages/Profile';
   import CreatePost from './components/Posts/CreatePost';
   
   const App = () => {
     return (
       <Router>
         <div className="App">
           <Switch>
             <Route path="/" exact component={HomePage} />
             <Route path="/login" component={Login} />
             <Route path="/register" component={Register} />
             <Route path="/profile" component={Profile} />
             <Route path="/create-post" component={CreatePost} />
           </Switch>
         </div>
       </Router>
     );
   };
   
   export default App;
   

    

GitHub पर डिप्लॉयमेंट (Deployment on GitHub)

GitHub पर डिप्लॉयमेंट आपके रिएक्ट.js एप्लिकेशन को ऑनलाइन प्रकाशित करने का एक सरल और प्रभावी तरीका है। GitHub Pages एक मुफ्त सर्विस है जो आपको अपने स्टेटिक वेबसाइट्स को GitHub रिपॉजिटरी से सीधे होस्ट करने की अनुमति देती है। इस अध्याय में, हम रिएक्ट.js एप्लिकेशन को GitHub पर डिप्लॉय करने के चरणों को कवर करेंगे।

GitHub पर डिप्लॉयमेंट का परिचय (Introduction to Deployment on GitHub)

GitHub Pages का उपयोग करके, आप अपने रिएक्ट एप्लिकेशन को आसानी से होस्ट कर सकते हैं। यह प्रक्रिया सरल है और इसमें निम्नलिखित चरण शामिल हैं:

1. अपने एप्लिकेशन का प्रोडक्शन बिल्ड बनाना।
2. GitHub रिपॉजिटरी बनाना।
3. GitHub Pages पर डिप्लॉय करना।

GitHub पर डिप्लॉयमेंट के चरण (Steps for Deployment on GitHub)

1. अपने रिएक्ट एप्लिकेशन का प्रोडक्शन बिल्ड बनाना: सबसे पहले, अपने रिएक्ट एप्लिकेशन का प्रोडक्शन बिल्ड बनाएं। यह बिल्ड फ़ोल्डर में तैयार कोड को संग्रहित करेगा।

   npm run build
   

    

2. GitHub रिपॉजिटरी बनाना:
   • GitHub पर जाएं और एक नया रिपॉजिटरी बनाएं।
   • रिपॉजिटरी को my-react-app नाम दें (या जो भी नाम आप चाहें)।
3. रिपॉजिटरी को लोकल प्रोजेक्ट से जोड़ना:

   cd build
   git init
   git remote add origin https://github.com/YOUR_USERNAME/my-react-app.git
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git push -u origin main
   

    

4. gh-pages पैकेज इंस्टॉल करना: gh-pages पैकेज GitHub Pages पर आसानी से डिप्लॉय करने में मदद करता है।

   npm install --save gh-pages
   

    

5. package.json को संशोधित करना: package.json में होमपेज और स्क्रिप्ट्स को अपडेट करें।

   // package.json
   {
     "name": "my-react-app",
     "version": "0.1.0",
     "private": true,
     "homepage": "https://YOUR_USERNAME.github.io/my-react-app",
     "scripts": {
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject",
       "predeploy": "npm run build",
       "deploy": "gh-pages -d build"
     },
     ...
   }
   

    

6. एप्लिकेशन को GitHub Pages पर डिप्लॉय करना:

   npm run deploy
   

   यह कमांड आपके एप्लिकेशन को GitHub Pages पर डिप्लॉय करेगी। आपके एप्लिकेशन को अब https://YOUR_USERNAME.github.io/my-react-app पर देखा जा सकता है।

GitHub पर डिप्लॉयमेंट के लाभ (Benefits of Deployment on GitHub)

1. मुफ्त होस्टिंग (Free Hosting): GitHub Pages मुफ्त होस्टिंग प्रदान करता है, जो छोटे और मध्यम आकार के प्रोजेक्ट्स के लिए आदर्श है।
2. सरलता (Simplicity): GitHub Pages पर डिप्लॉयमेंट प्रक्रिया सरल और सीधी है।
3. सीमलेस इंटीग्रेशन (Seamless Integration): GitHub रिपॉजिटरी के साथ सीमलेस इंटीग्रेशन, जिससे वर्शन कंट्रोल और डिप्लॉयमेंट आसान हो जाता है।
4. विश्वसनीयता (Reliability): GitHub Pages विश्वसनीय और स्थिर होस्टिंग प्रदान करता है, जिससे आपके एप्लिकेशन को उच्च अपटाइम मिलता है।

नेट्लिफाई पर डिप्लॉयमेंट (Deployment on Netlify)

डिप्लॉयमेंट के चरण (Deployment Steps)

1. Netlify अकाउंट बनाएं:
   • Netlify पर जाएं और एक नया अकाउंट बनाएं या अपने GitHub/GitLab/Bitbucket अकाउंट के साथ साइन इन करें।
2. रिपॉजिटरी को GitHub पर पुश करें:
   • यदि आपने पहले से नहीं किया है, तो अपने रिएक्ट प्रोजेक्ट को GitHub पर पुश करें:

     git init
     git add .
     git commit -m "Initial commit"
     git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPOSITORY_NAME.git
     git push -u origin main
     

      

3. Netlify डैशबोर्ड पर जाएं:
   • Netlify डैशबोर्ड में लॉगिन करें और “New site from Git” बटन पर क्लिक करें।
4. Git प्रोवाइडर चुनें:
   • अपने प्रोजेक्ट के Git प्रोवाइडर (GitHub, GitLab, Bitbucket) को चुनें और Netlify को अपने रिपॉजिटरी तक पहुंच प्रदान करें।
5. रिपॉजिटरी का चयन करें:
   • उस रिपॉजिटरी को चुनें जिसमें आपका रिएक्ट प्रोजेक्ट है।
6. बिल्ड सेटिंग्स कॉन्फ़िगर करें:
   • बिल्ड सेटिंग्स में, निम्नलिखित कॉन्फ़िगरेशन करें:
     • Build Command: npm run build
     • Publish Directory: build
7. डिप्लॉय साइट:
   • “Deploy site” बटन पर क्लिक करें। Netlify आपका प्रोजेक्ट बिल्ड और डिप्लॉय करेगा।
8. साइट का URL प्राप्त करें:
   • डिप्लॉयमेंट पूरा होने के बाद, Netlify आपको एक लाइव URL प्रदान करेगा जहां आप अपने रिएक्ट एप्लिकेशन को देख सकते हैं।