React Bootstrap Kya Hai? | React Bootstrap Tutorial In Hindi

By
admin
-
0
434
react bootstrap kya hai
react bootstrap kya hai

React Bootstrap Kya Hai ? | What is React Bootstrap : Hello Friends ! इस Article में आपको React-Bootstrap के बारे में बताने वाले है ,जो शायद ही आपका पता पता होगा। इस Article में हम आपको इसकी पूरी जानकारी देंगे। तो उसके लिए आप इस Article को पूरा Read करे।

पिछले कुछ सालों से Single Page Application में Popular होने वाले , बहुत से Front – end Framework Introduce किये गए है। जैसे की Angular, React, Vue.js, Ember, etc. जिसका Result ये रहा है, की अब jQuery की जरुरत धीरे धीरे ख़त्म होती जा रही है। jQuery की अब कोई ज्यादा Requirement नहीं होती है Web Apps को बनाने के लिए।

अगर आप एक Frontend Developer हैं, तो आपने Bootstrap, Foundation, and Bulma, और सभी Responsive (Mobile-First) CSS frameworks का Use तो किया ही होगा या फिर कभी न कभी नाम तो सुना ही होगा।

जिस तरह से Web Applications को बनाने के लिए React सबसे ज्यादा Use किया जाने वाला JavaScript Framework है। उसी तरह Bootstrap भी सबसे ज्यादा Popular CSS Framework है Internet पर लाखों Website बनाने के लिए।

इस Article में , हम आपको बताएंगे की रिएक्ट और बूटस्ट्रैप का Use कैसे करें ( How to Use React and Bootstrap), रिएक्ट ऐप में बूटस्ट्रैप कैसे जोड़ें ( How to Add Bootstrap to a React app), How to Install React Bootstrap Packages , React app कैसे बनाएं बूटस्ट्रैप के साथ ( How to Create a React App with Bootstrap).

React Bootstrap Kya Hai? | React Bootstrap Tutorial In Hindi

React Bootstrap Kya Hai ? (What is React Bootstrap)

React-Bootstrap ने Bootstrap की JavaScript को Replace किया है। इसमें हर एक Component को As a True React Component की तरह बनाया गया है , Scratch करके बिना किसी jQuery पर Depend होते हुए।

बूटस्ट्रैप Stylesheet पर पूरी तरह भरोसा करके, React-Bootstrap सिर्फ उन हजारों Bootstrap Themes के साथ काम करता है जिन्हें आप पहले से पसंद करते हैं। React Component Model हमें हर एक Component के Function और Form पर ज्यादा Control देता है।

Each Component को Accessibility के साथ Implement किया जाता है। जिसका Result ये है की Accessible-by-default Components का एक सेट है, जो Plain Bootstrap से Possible है।

Bootstrap के साथ React का Use कैसे करें? ( How to Use React With Bootstrap )

Add Bootstrap to React

  • Use BootstrapCDN
  • Import Bootstrap in React as a dependency
  • Install a React Bootstrap package (such as bootstrap-react or reactstrap)
react bootstrap

1. Using BootstrapCDN

BootstrapCDN सबसे आसान तरीका है , Bootstrap को अपने React app में जोड़ने का। कोई Installs या Downloads की आवश्यकता नहीं है। बस अपने ऐप के सेक्शन में एक डालें, जैसा कि नीचे Code में दिखाया गया है।

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"  integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"  crossorigin="anonymous">

यदि आप Bootstrap के साथ ship करने वाले JavaScript Components का Use करने में रुचि रखते हैं, तो आपको नीचे दिए हुए Code को टैग Closing </body> टैग से ठीक पहले रखना होगा, ताकि उन्हें Enable किया जा सके।

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"  crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"  integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"  crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"  integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"  crossorigin="anonymous"></script>

जैसा कि आप देख सकते हैं, Bootstrap 4 को इसके JavaScript Components के लिए jQuery और Popper.js की आवश्यकता है। ऊपर दिए हुए Code में, हमने jQuery के Slim Version का उपयोग किया है, Although आप Full Version का भी उपयोग कर सकते हैं।

आपके React app के लिए, ये Code Usually आपके ऐप के index page में जोड़े जाएंगे। यदि आपने अपना ऐप बनाने के लिए create-react-app का उपयोग किया है, तो आपका public/index.html होगा।

<!DOCTYPE html> 
<html lang="en">  
 <head>    
 <meta charset="utf-8">   
  <meta name="viewport" content="width=device-width, initial-scale=1>        
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"      integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"      crossorigin="anonymous">          <title>React App</title>   
</head>   
<body>    
          <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"      crossorigin="anonymous"></script>      
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"      crossorigin="anonymous"></script>      
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"      integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"      crossorigin="anonymous"></script>      
  </body> 
</html>

अब आप अपने React app components में built-in Bootstrap Classes and JavaScript Components का उपयोग शुरू कर सकते हैं।

2. Import Bootstrap as a dependency

यदि आप एक Build Tool या Module Bundler जैसे webpack का उपयोग कर रहे हैं, तो यह आपके React Application में Bootstrap जोड़ने का Preferred Option है। आपको अपने App के लिए Bootstrap को एक Dependency के रूप में Install करना होगा।

npm install bootstrap

या यदि आप yarn का उपयोग कर रहे हैं : 

yarn add bootstrap

एक बार जब आप Bootstrap Installed, कर लेते हैं, तो आगे बढ़ें और इसे अपने app’s entry JavaScript file में Include करें। अगर आप create-react-app को Use करते हैं, तो यह आपकी src/index.js file होनी चाहिए।

import 'bootstrap/dist/css/bootstrap.min.css';

अब, हम React Application में CSS Classes and Utilities का Use कर सकते हैं। इसके अलावा, यदि हम JavaScript Components का Use करना चाहते हैं, तो हमें npm से jQuery और popper.js packages को Install करने की जरुरत पड़ती है। Packages को Install करने के लिए, Terminal Window में इन Command को चलाएँ।

$ npm install jquery popper.js  

इसके बाद, src/index.js फ़ाइल पर जाएँ और impoAdd करे।

import $ from 'jquery';  
import Popper from 'popper.js';  
import 'bootstrap/dist/js/bootstrap.bundle.min'; 

अब, हम React application. में Bootstrap JavaScript Components का use कर सकते हैं।

React Bootstrap Package

React Bootstrap Package सबसे लोकप्रिय तरीका है React Application में Bootstrap को Add करने का । Community के Through Built कई Bootstrap Packages हैं, जिनका Aim Bootstrap Components को React components के रूप में Rebuild करना है। The two most popular Bootstrap packages are:

1. react-bootstrap :

ये Bootstrap Components as React components के रूप में एक Complete re-implementation है। इसे bootstrap.js or jQuery जैसी किसी dependencies की आवश्यकता नहीं है। अगर React setup and React-Bootstrap installed है, तो हमारे पास वह सब कुछ है जो हमें चाहिए।

2. reactstrap:

ये एक library होती है जिसमें React Bootstrap 4 components होते हैं जो composition and control का favor लेते हैं। यह jQuery या Bootstrap JavaScript पर depend नहीं करता है। हालांकि, Tooltips, Popovers, and auto-flipping Dropdowns जैसी content की advanced positioning के लिए react-popper की आवश्यकता होती है।

React Bootstrap Installation

आइए create-react-app command का Use करके एक नया React app बनाएं।

$ npx create-react-app react-bootstrap-app  

React app बनाने के बाद, Bootstrap को install करने का सबसे अच्छा तरीका npm पैकेज है। Bootstrap को install करने के लिए, React app folder में navigate करें, और इन दी गयी कमांड को चलाएँ।

$ npm install react-bootstrap bootstrap --save  

Importing Bootstrap

अब, src/index.js फ़ाइल खोलें और बूटस्ट्रैप फ़ाइल import करने के लिए दिए गए कोड को Add करे।

import 'bootstrap/dist/css/bootstrap.min.css';  

हम ”react-bootstrap’ से { SplitButton, Dropdown } जैसे individual components को भी import कर सकते हैं; entire library के बजाय। ये specific components provides करता है, जिन्हें हमें Use करने की आवश्यकता होती है, और code का amount को काफी कम कर सकता है।

React app में, src डायरेक्टरी में ThemeSwitcher.js नाम की एक new file बनाएं और ये Code डालें।

import React, { Component } from 'react';  
import { SplitButton, Dropdown } from 'react-bootstrap';  
  
class ThemeSwitcher extends Component {  
  
  state = { theme: null }  
    
  chooseTheme = (theme, evt) => {  
    evt.preventDefault();  
    if (theme.toLowerCase() === 'reset') { theme = null }  
    this.setState({ theme });  
  }  
    
  render() {  
    const { theme } = this.state;  
    const themeClass = theme ? theme.toLowerCase() : 'default';  
      
    const parentContainerStyles = {  
      position: 'absolute',  
      height: '100%',  
      width: '100%',  
      display: 'table'  
    };  
      
    const subContainerStyles = {  
      position: 'relative',  
      height: '100%',  
      width: '100%',  
      display: 'table-cell',  
    };  
      
    return (  
      <div style={parentContainerStyles}>  
        <div style={subContainerStyles}>  
          
          <span className={`h1 center-block text-center text-${theme ? themeClass : 'muted'}`} style={{ marginBottom: 25 }}>{theme || 'Default'}</span>  
            
          <div className="center-block text-center">  
            <SplitButton bsSize="large" bsStyle={themeClass} title={`${theme || 'Default Block'} Theme`}>  
              <Dropdown.Item eventKey="Primary Block" onSelect={this.chooseTheme}>Primary Theme</Dropdown.Item>  
              <Dropdown.Item eventKey="Danger Block" onSelect={this.chooseTheme}>Danger Theme</Dropdown.Item>  
              <Dropdown.Item eventKey="Success Block" onSelect={this.chooseTheme}>Success Theme</Dropdown.Item>  
              <Dropdown.Item divider />  
              <Dropdown.Item eventKey="Reset Block" onSelect={this.chooseTheme}>Default Theme</Dropdown.Item>  
            </SplitButton>  
          </div>    
        </div>  
      </div>  
    );   
  }   
}  
export default ThemeSwitcher;  

अब, src/index.js file को update करें

import 'bootstrap/dist/css/bootstrap.min.css';  
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
import './index.css';  
import ThemeSwitcher from './ThemeSwitcher';  
  
ReactDOM.render(<ThemeSwitcher />, document.getElementById('root'));  

Output

जब हम React app को execute करते हैं, तो हमें नीचे दिए गए output मिलना चाहिए।

react bootstrap

Dropdown Menu Click करें। हमें फिर ये स्क्रीन मिलेगी।

reactbootstrap3

Using reactstrap

आइए create-react-app Command का Use करके एक New React app बनाएं।

$ npx create-react-app reactstrap-app  

अगला, npm package के माध्यम से reactstrap install करें। reactstrap install करने के लिए, React app folder में navigate करें, और दिए गए कमांड चलाएँ।

$ npm install bootstrap reactstrap --save  

Importing Bootstrap

अब, src/index.js file खोलें और Bootstrap file import करने के लिए दिए गए कोड को Add करे।

import 'bootstrap/dist/css/bootstrap.min.css';  

हम ”reactstrap‘ से { SplitButton, Dropdown } जैसे individual components को भी import कर सकते हैं; entire library के बजाय। ये specific components provides करता है, जिन्हें हमें Use करने की आवश्यकता होती है, और code का amount को काफी कम कर सकता है।

React app में, src डायरेक्टरी में ThemeSwitcher.js नाम की एक new file बनाएं और ये Code डालें।

import React, { Component } from 'react';  
import { Button, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';  
  
class ThemeSwitcher extends Component {  
  
  state = { theme: null, dropdownOpen: false }  
    
  toggleDropdown = () => {  
    this.setState({ dropdownOpen: !this.state.dropdownOpen });  
  }  
    
  resetTheme = evt => {  
    evt.preventDefault();  
    this.setState({ theme: null });  
  }  
    
  chooseTheme = (theme, evt) => {  
    evt.preventDefault();  
    this.setState({ theme });  
  }  
  render() {  
    const { theme, dropdownOpen } = this.state;  
    const themeClass = theme ? theme.toLowerCase() : 'secondary';  
      
    return (  
      <div className="d-flex flex-wrap justify-content-center align-items-center">  
        
        <span className={`h1 mb-4 w-100 text-center text-${themeClass}`}>{theme || 'Default'}</span>  
          
        <ButtonDropdown isOpen={dropdownOpen} toggle={this.toggleDropdown}>  
          <Button id="caret" color={themeClass}>{theme || 'Custom'} Theme</Button>  
          <DropdownToggle caret size="lg" color={themeClass} />  
          <DropdownMenu>  
            <DropdownItem onClick={e => this.chooseTheme('Primary', e)}>Primary Theme</DropdownItem>  
            <DropdownItem onClick={e => this.chooseTheme('Danger', e)}>Danger Theme</DropdownItem>  
            <DropdownItem onClick={e => this.chooseTheme('Success', e)}>Success Theme</DropdownItem>  
            <DropdownItem divider />  
            <DropdownItem onClick={this.resetTheme}>Default Theme</DropdownItem>  
          </DropdownMenu>  
        </ButtonDropdown>  
          
      </div>  
    );    
  }  
}  
export default ThemeSwitcher;  

अब, src/index.js file को update करें

import 'bootstrap/dist/css/bootstrap.min.css';  
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
import './index.css';  
import ThemeSwitcher from './ThemeSwitcher';  
  
ReactDOM.render(<ThemeSwitcher />, document.getElementById('root'));  

Output

जब हम React app को execute करते हैं, तो हमें नीचे दिए गए output मिलना चाहिए।

bootstrap react

Dropdown Menu Click करें। हमें फिर ये स्क्रीन मिलेगी।

bootstrap react

Conclusion

इस Tutorial में, हमने कुछ अलग अलग तरीके से Explored किया है , जिसमें हम Bootstrap को अपने React apps.के साथ Integrate कर सकते हैं। हमने यह भी देखा है कि कैसे हम दो सबसे Most Popular React Bootstrap Libraries, का उपयोग कर सकते हैं, Namely react-bootstrap and reactstrap.

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here