தீர்க்கப்பட்டது: பொது கோப்புறையிலிருந்து பாணிகளைப் பயன்படுத்தி ரியாக்ட் ரூட்டர்

பொது கோப்புறையில் இருந்து ஸ்டைல்களைப் பயன்படுத்தி ரியாக்ட் ரூட்டருடன் தொடர்புடைய முக்கிய சிக்கல் என்னவென்றால், பாணிகளைக் கண்காணிப்பது மற்றும் அவை சரியாகப் பயன்படுத்தப்படுவதை உறுதிசெய்வது கடினம். பொது கோப்புறை ரியாக்ட் கூறு மரத்தின் பகுதியாக இல்லாததால், எந்த பாணிகள் எப்போது பயன்படுத்தப்படுகின்றன என்பதை அறிவது கடினமாக இருக்கும். கூடுதலாக, பொது கோப்புறையில் இருந்து பல கூறுகள் ஒரே பாணியைப் பயன்படுத்தினால், எழும் சிக்கல்களை பிழைத்திருத்துவது கடினமாக இருக்கும்.

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { createGlobalStyle } from 'styled-components';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
 
const GlobalStyle = createGlobalStyle` 
    body { 
        margin: 0; 

        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 
            "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 
            sans-serif;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;  

    }  

    code {  font-family: sourcecode pro, Menlo, Monaco, Consolas, Courier New, monospace; }  

    *{ boxsizing: borderbox;}  

    img{ maxwidth: 100%;}  

    a{ textdecoration : none;}     `; // Global styles for the entire app. This will be applied to all components. 
     const App = () => ( // The main component of the app. This is where all routes are defined.      <Router>       <div>         <GlobalStyle />          <Route exact path="/" component={HomePage} />          <Route path="/about" component={AboutPage} />       </div>     </Router> ); export default App;

1. 'ரியாக்ட்' இலிருந்து வினையை இறக்குமதி செய்; // எதிர்வினை நூலகத்தை இறக்குமதி செய்கிறது
2. 'react-router-dom' இலிருந்து {BrowserRouter ஐ ரூட்டராகவும், Route } ஐ இறக்குமதி செய்யவும்; // ரியாக்ட்-ரவுட்டர்-டோம் லைப்ரரியில் இருந்து பிரவுசர் ரூட்டர் மற்றும் ரூட் கூறுகளை இறக்குமதி செய்தல்
3. 'styled-components' இலிருந்து {createGlobalStyle} ஐ இறக்குமதி செய்; // பாணியில்-கூறுகள் நூலகத்திலிருந்து createGlobalStyle செயல்பாட்டை இறக்குமதி செய்தல்
4. முகப்புப் பக்கத்தை './pages/HomePage' இலிருந்து இறக்குமதி செய்யவும்; // முகப்புப் பக்க கூறுகளை இறக்குமதி செய்கிறது
5. AboutPage ஐ './pages/AboutPage' இலிருந்து இறக்குமதி செய்யவும்; // AboutPage கூறுகளை இறக்குமதி செய்கிறது
6. const GlobalStyle = createGlobalStyle`...`; // முழு பயன்பாட்டிற்கான உலகளாவிய பாணிகள். இது அனைத்து கூறுகளுக்கும் பயன்படுத்தப்படும்.
7. const ஆப் = () => (...); // பயன்பாட்டின் முக்கிய கூறு. இங்குதான் அனைத்து வழிகளும் வரையறுக்கப்பட்டுள்ளன.
8. ; // முகப்புப் பக்க கூறுகளை வழங்கும் "/" இன் சரியான பாதையுடன் ஒரு வழியை வரையறுத்தல்
9. ; // AboutPage கூறுகளை வழங்கும் "/about" என்ற பாதையுடன் ஒரு வழியை வரையறுத்தல்
10 ஏற்றுமதி இயல்புநிலை ஆப்;// ஆப்ஸை இயல்புநிலையாக ஏற்றுமதி செய்கிறது

பாங்குகளைப் பயன்படுத்துதல்

பயன்பாட்டின் தோற்றத்தையும் உணர்வையும் தனிப்பயனாக்க ரியாக்ட் ரூட்டரில் ஸ்டைல்களைப் பயன்படுத்தலாம். தனிப்பயன் கூறுகளை உருவாக்க, அனிமேஷன்களைச் சேர்க்க மற்றும் பலவற்றிற்கு ஸ்டைல்கள் பயன்படுத்தப்படலாம். வெவ்வேறு திரை அளவுகளுக்கு ஏற்றவாறு பதிலளிக்கக்கூடிய தளவமைப்புகளை உருவாக்கவும் பாங்குகள் பயன்படுத்தப்படலாம். கூடுதலாக, பயனர்கள் தங்கள் அனுபவத்தைத் தனிப்பயனாக்க அனுமதிக்கும் பயன்பாட்டிற்கான தீம்களை உருவாக்க பாணிகளைப் பயன்படுத்தலாம்.

பொது கோப்புறையைப் பயன்படுத்துதல்

ரியாக்ட் ரூட்டரில் உள்ள பொது கோப்புறை என்பது படங்கள், CSS மற்றும் ஜாவாஸ்கிரிப்ட் போன்ற நிலையான கோப்புகளை சேமிக்க பயன்படும் ஒரு சிறப்பு கோப்புறை ஆகும். இந்தக் கோப்புகள் ரியாக்ட் அப்ளிகேஷன் மூலம் செயலாக்கப்படாமல் பொது கோப்புறையிலிருந்து நேரடியாக வழங்கப்படுகின்றன. இது விரைவான ஏற்றுதல் நேரத்தை அனுமதிக்கிறது மற்றும் பயன்பாட்டின் பல பக்கங்களில் சொத்துக்களை நிர்வகிப்பதை எளிதாக்குகிறது. பொது கோப்புறை Git போன்ற பதிப்பு கட்டுப்பாட்டு அமைப்புகளுக்கு வெளியே சில கோப்புகளை வைத்திருக்கும் வழியையும் வழங்குகிறது, இது பாதுகாப்பு மற்றும் தனியுரிமையை பராமரிக்க உதவும்.

ரியாக்டில் உள்ள பொது கோப்புறையிலிருந்து CSS கோப்பை எவ்வாறு இறக்குமதி செய்வது

ரியாக்ட் ரூட்டரில், இணைப்பு கூறுகளைப் பயன்படுத்தி பொது கோப்புறையிலிருந்து CSS கோப்பை இறக்குமதி செய்யலாம். இணைப்பு கூறு உங்களை href பண்புக்கூறில் கோப்புக்கான பாதையைக் குறிப்பிட அனுமதிக்கிறது. உதாரணத்திற்கு:

இது உங்கள் பொது கோப்புறையிலிருந்து styles.css கோப்பை உங்கள் ரியாக்ட் ரூட்டர் பயன்பாட்டில் இறக்குமதி செய்யும்.

தொடர்புடைய இடுகைகள்:

ஒரு கருத்துரையை