טוטאָריאַל וועגן שאַפֿן אַ וועב אַפּלאַקיישאַן ניצן React.js

React.js איז א פאפולערע פראנט-ענד אנטוויקלונג ביבליאטעק גענוצט צו בויען אינטעראקטיווע באנוצער אינטערפייסעס (UIs). אנטוויקלט דורך פעיסבוק, React.js איז גענוצט געווארן דורך אסאך גרויסע פירמעס, אריינגערעכנט אינסטאגראם, Airbnb, און וואטסאפ. אויב איר זוכט צו בויען עפעקטיווע, שנעלע, און רעספאנסיוו וועב אפליקאציעס, קען React.js זיין די ריכטיגע ברירה פאר אייך.

הקדמה

איידער מיר הייבן אן, זייט זיכער אז איר האט Node.js און npm (Node Package Manager) אינסטאלירט אויף אייער קאמפיוטער. Node.js און npm זענען וויכטיג ווייל זיי צושטעלן די סביבה און די מכשירים וואס זענען נויטיג צו אנטוויקלען וועב אפליקאציעס ניצנדיג React.js.

שריט 1: איניציאַליזירן דעם רעאַקט פּראָיעקט

צו שאַפֿן אַ נייע React.js אַפּליקאַציע, קענען מיר נוצן Create React App, אַן אַפּליקאַציע שאַפֿונג געצייַג וואָס מינימיזירט די ערשטע קאָנפיגוראַציע. לויפֿט די פֿאָלגנדיקע באַפֿעל אין דיין טערמינאַל אָדער באַפֿעל פּראָמפּט:

"באַש
npx שאַפֿן-רעאַגירן-אַפּ מיין-אַפּ
cd מיין-אַפּ
נפּם אָנהייב
““

די קאמאנדע וועט שאפן א נייע דירעקטארי מיטן נאמען `my-app`, אראפלאדן און אינסטאלירן אלע נויטיגע אפהענגיקייטן, און אנפאנגען דעם אנטוויקלונג סערווער. איר קענט יעצט עפענען א בלעטערער און צוקומען צו `http://localhost:3000` צו זען די דיפאלט React.js אפליקאציע.

שריט 2: טעקע סטרוקטור

לאָמיר נעמען אַ קוק אויף די טעקע סטרוקטור וואָס Create React App האט באשאפן:

““
מיין-אַפּ/
├── נאָוד_מאָדולן/
├── עפנטלעך/
│ └── אינדעקס.html
└── מקור/
├── אַפּ.קסס
├── אַפּ.דזשעי.עס.
├── אַפּ.טעסט.דזשעי.עס
├── אינדעקס.css
├── אינדעקס.דזשעי.עס
לאָגאָ.svg
““

– `node_modules/`: אנטהאלט אלע אייערע פראיעקט אפהענגיקייטן.
– `public/`: אנטהאלט סטאטישע טעקעס, אריינגערעכנט `index.html` וואס איז דער אפליקאציע'ס אריינגאנג פונקט.
– `src/`: וואו איר וועט פארברענגען רובֿ פון אייער צייט. אנטהאלט רעאַקט קאָמפּאָנענטן, CSS טעקעס און אַנדערע רעסורסן.

שריט 3: אויסמעקן אומנייטיקע טעקעס

צו אָנהייבן מיט אַ ריינע טאַפֿל, לאָמיר אויסמעקן עטלעכע אומנייטיקע טעקעס. אויסמעקן `logo.svg` און `App.test.js` אינעווייניק פֿון דער `src/` טעקע. דערנאָך, עפֿנט `App.css` און `index.css`, אויסמעקנדיק דעם גאַנצן CSS קאָד אינעווייניק צו אָנהייבן מיט אַ ריינע סטילשיט.

שריט 4: שאַפֿן דיין ערשטער קאָמפּאָנענט

React.js איז קאָמפּאָנענט-באַזירט. קאָמפּאָנענטן זענען די יסודות פון אייער וועב אַפּלאַקיישאַן. לאָמיר מאָדיפיצירן `App.js` צו שאַפֿן אונדזער ערשטן קאָמפּאָנענט.

עפֿנט `src/App.js` און פֿאַרבײַט עס מיטן פֿאָלגנדיקן קאָד:

"דזשסקס
אַרייַנפיר רעאַגירן פון 'רעאַגירן';
אימפארט './App.css';

פונקציע אַפּ () {
צוריקקומען (

);
}

עקספּאָרטירן די פעליקייַט אַפּ;
““

איניציאליזירט דעם רעאַקט קאָד אינעווייניק `App.js` ניצנדיק JSX (דזשאַוואַסקריפּט XML), וואָס ערלויבט אונדז צו שרייבן HTML-ענלעכע סינטאַקס אין דזשאַוואַסקריפּט. ראַטעוועט אייערע ענדערונגען און זעט די רעזולטאַטן אין אייער בלעטערער.

שריט 5: צולייגן נייע קאמפאנענטן

איצט לאָמיר צולייגן עטלעכע נייע קאָמפּאָנענטן. שאַפֿן אַ נייע טעקע מיטן נאָמען `components` אין דער `src` טעקע. דערנאָך שאַפֿן אַ נייע טעקע `HelloWorld.js` אין דער `components` טעקע.

"דזשסקס
אַרייַנפיר רעאַגירן פון 'רעאַגירן';

פונקציע העלא וועלט () {
צוריקקומען (

);
}

עקספּאָרטירן פעליקייַט העלא וועלט;
““

עפֿנט `App.js` און אימפּאָרטירט דעם `HelloWorld` קאָמפּאָנענט וואָס מיר האָבן נאָר וואָס באַשאַפֿן:

"דזשסקס
אַרייַנפיר רעאַגירן פון 'רעאַגירן';
אימפארט './App.css';
אימפארטירן העלא וועלט פון './components/HelloWorld';

פונקציע אַפּ () {
צוריקקומען (

);
}

עקספּאָרטירן די פעליקייַט אַפּ;
““

איצט, `App.js` רענדערט דעם `HelloWorld` קאָמפּאָנענט אויף דער הויפּט בלאַט.

שריט 6: צולייגן שטאַט פאַרוואַלטונג מיט useState

רעאַקט האט זייער שטאַרקע כוקס (hooks) פֿאַר פאַרוואַלטן דעם שטאַט. לאָמיר צולייגן עטלעכע שטאַט צו אונדזער אַפּליקאַציע. למשל, לאָמיר צולייגן אַ ציילער וואָס וואַקסט יעדעס מאָל ווען מען קליקט אויף אַ קנעפּל.

עפֿנט `HelloWorld.js` און לייגט צו state און `useState` hook:

"דזשסקס
אימפארטירן רעאַקט, { useState } פון 'רעאַקט';

פונקציע העלא וועלט () {
קאנסט [צייל, סעט צייל] = ניצן שטאַט(0);

קאָנסט פאַרגרעסערונג צייל = () => {
סעט צייל(צייל + 1);
}

צוריקקומען (

);
}

עקספּאָרטירן פעליקייַט העלא וועלט;
““

דער `count` צושטאנד ווערט איניציאליזירט מיט א ווערט פון 0, און יעדעס מאל וואס מען קליקט אויף דעם קנעפל, וועט די `incrementCount` פונקציע פארגרעסערן דעם ווערט.

שריט 7: צולייגן סטיילינג

כדי צו לייגן סטיילינג, קענען מיר ניצן CSS אין דער `App.css` טעקע אדער מיר קענען ניצן א CSS-אין-JS ביבליאטעק ווי styled-components. לאמיר זיך האלטן צום סטאנדארט CSS פאר יעצט.

עפֿנט `App.css` און לייגט צו עטלעכע סטיילינג:

"קסס
.אַפּ {
טעקסט-אַריין: צענטער;
}

.אַפּ-כעדער {
הינטערגרונט-קאליר: 282c34;
מינימום-הייך: 100vh;
אַרויסווייַזן: פלעקס;
פלעקס-דירעקטיאָן: זייַל;
אַליינ-ייטאַמז: צענטער;
באַרעכטיקן-אינהאַלט: צענטער;
שריפט-גרייס: קאַלק(10 פּיקסעל + 2 וו מין);
קאָליר: ווייַס;
}

קנעפּל {
padding: 10px 20px;
גרענעץ-שפּיץ: קסנומקספּקס;
שריפֿט-גרייס: קסנומקספּקס;
}
““

שריט 8: צולייגן רוטינג מיט רעאַקט ראָוטער

כדי צו לייגן צו נאַוויגאַציע צווישן פֿאַרשידענע בלעטער אין אונדזער אַפּליקאַציע, קענען מיר נוצן React Router. אינסטאַלירן React Router דורך לויפֿן די פֿאָלגנדיקע באַפֿעל:

"באַש
npm ינסטאַלירן רעאַקט-ראָוטער-דאָם
““

דערנאך, שאפט צוויי נייע קאמפאנענטן: `Home.js` און `About.js` אין דער `components` טעקע.

`היים.דזשעי`:
"דזשסקס
אַרייַנפיר רעאַגירן פון 'רעאַגירן';

פונקציע היים() {
צוריקקומען (

);
}

עקספּאָרטירן פעליקייַט היים;
““

`וועגן.דזשעי`:
"דזשסקס
אַרייַנפיר רעאַגירן פון 'רעאַגירן';

פונקציע וועגן() {
צוריקקומען (

);
}

עקספּאָרט פעליקייַט וועגן;
““

דערנאך, עפֿנט `App.js` און שטעלט אויף רוטינג:

"דזשסקס
אַרייַנפיר רעאַגירן פון 'רעאַגירן';
אימפארט { בראַוזערראָוטער ווי ראָוטער, רוט, לינק, סוויטש } פון 'רעאַקט-ראָוטער-דאָם';
אימפארט './App.css';
אימפארטירן העלא וועלט פון './components/HelloWorld';
אימפארטירן היים פון './components/Home';
אימפארטירן וועגן פון './components/About';

פונקציע אַפּ () {
צוריקקומען (

);
}

עקספּאָרטירן די פעליקייַט אַפּ;
““

מיט דעם, האָבן מיר צוגעגעבן גרונטלעכע נאַוויגאַציע צווישן פֿאַרשידענע בלעטער אין אונדזער אַפּליקאַציע.

קלאָוזינג

דאָס איז אַ גרונטלעכער טוטאָריאַל פֿאַר שאַפֿן אַ וועב אַפּליקאַציע ניצנדיק React.js. מיר האָבן באַדעקט פּראָיעקט סעטאַפּ, קאָמפּאָנענט שאַפֿונג, שטאַט פאַרוואַלטונג, סטיילינג און רוטינג. React.js האָט אַ רייכע עקאָסיסטעם מיט צאָלרייכע לייברעריז און מכשירים וואָס קענען אײַך העלפֿן בויען מער קאָמפּליצירטע וועב אַפּליקאַציעס.

זאָל זײַן מיט גליק, און איך האָף אַז די טוטאָריאַל וועט אײַך העלפֿן אָנהייבן אײַער רייזע מיט React.js!