Kuanza Kusoma Mitindo na CSS modules katika React

Katika somo hili na linalofuata, tuta angalia mbinu nyingine ya kisasa na ufanisi za kutumia mitindo kwa viambajengo vya React - matumizi ya moduli za CSS.

Moduli za CSS katika mbinu hii - ni faili za CSS zilizokusanywa tofauti, ambapo majina ya madarasa na animesheni yako katika eneo la ndani la kuonekana, jambo ambalo hukuruhusu kuepuka migogoro kati ya majina ya madarasa kutoka kwa viambajengo tofauti.

Ili kuanza, tutaunda na kuzindua programu yetu rahisi ya React buttons. Kwa hili, tutaunda folda tupu test, kuingia ndani yake na kwenye terminali kuandika amri zifuatazo:

terminalnpx create-react-app buttons
cd buttons
npm start

Ikiwa una toleo jipya la React, yaani inasaidia Create React App v2 na kuendelea, basi hakuna usanidi wa ziada unahitajika, kwa sababu katika kesi hii moduli za CSS zitasaidiwa kiotomatiki. Ili kuthibitisha angalia package.json, ikiwa utegemezi react-scripts ni toleo 2.x.x na kuendelea, basi yote yako sawa. Vinginevyo sasisha React yako.

Programu yetu ya kutumia mitindo kwa njia ya moduli za CSS itakuwa na vitufe vitatu.

Faili za CSS tutazitaaja, kufuata makubaliano, kama ifuatavyo: [name].module.css.

Acha sasa tuunde folda components katika src, na ndani yake tuongeze faili Buttons.module.css na mitindo ya CSS kwa vitufe vyetu:

Buttons.module.css.btn1 {
  background-color: orange;
  border: 2px solid brown;
  color: white;
}

.btn2 {
  background-color: red;
  border: 2px solid green;
  color: yellow;
}

.btn3 {
  background-color: brown;
  border: 2px solid yellowgreen;
  color: orange;
}

Pia katika folda components, tuunde faili tupu ya kikiambajengo cha React Buttons.js, wakati huu usiiguse faili iliyotengenezwa App.js, tutaishughulikia baadaye!

Katika Buttons.js ni lazima tuingize faili iliyo na mitindo ya CSS, na pia tutumie mitindo hii kwa kila kitufe kwa kutumia sifa class:

Buttons.jsimport styles from "./Buttons.module.css"; 

const Buttons = () => (
  <>
    <button class={styles.btn1}>btn1</button>
    <button class={styles.btn2}>btn2</button>
    <button class={styles.btn3}>btn3</button>
  </>
);

export default Buttons;

Kwa njia, si lazima kutumia neno styles kwa jina la kitu kilichoingizwa kilicho na mitindo, unaweza kukiita, jinsi inavyokufaa.

Katika somo linalofuata tutamaliza programu yetu.