React.js-ի միջոցով վեբ հավելված ստեղծելու ձեռնարկ

React.js-ը հայտնի front-end մշակման գրադարան է, որն օգտագործվում է ինտերակտիվ օգտագործողի ինտերֆեյսներ (UI) կառուցելու համար: Facebook-ի կողմից մշակված React.js-ը օգտագործվել է բազմաթիվ խոշոր ընկերությունների կողմից, այդ թվում՝ Instagram-ի, Airbnb-ի և WhatsApp-ի: Եթե դուք ցանկանում եք ստեղծել արդյունավետ, արագ և արագ արձագանքող վեբ հավելվածներ, React.js-ը կարող է ճիշտ ընտրություն լինել ձեզ համար:

Պենդահուլուան

Նախքան սկսելը, համոզվեք, որ ձեր համակարգչում տեղադրված են Node.js-ը և npm-ը (Node Package Manager): Node.js-ը և npm-ը կարևոր են, քանի որ դրանք ապահովում են React.js-ի միջոցով վեբ հավելվածներ մշակելու համար անհրաժեշտ միջավայրը և գործիքները:

Քայլ 1. React նախագծի նախնականացում

Նոր React.js հավելված ստեղծելու համար կարող ենք օգտագործել Create React App-ը, որը հավելված ստեղծելու գործիք է, որը նվազագույնի է հասցնում սկզբնական կարգավորումը: Գործարկեք հետևյալ հրամանը ձեր տերմինալում կամ հրամանի տողում.

«Բաշ
npx ստեղծել-արձագանքել-հավելվածը իմ-հավելվածը
cd իմ հավելվածը
npm սկիզբը
««

Այս հրամանը կստեղծի նոր գրացուցակ՝ `my-app` անունով, կներբեռնի և կտեղադրի բոլոր անհրաժեշտ կախվածությունները և կմեկնարկի մշակման սերվերը։ Այժմ կարող եք բացել զննարկիչ և մուտք գործել `http://localhost:3000`՝ տեսնելու համար լռելյայն React.js հավելվածը։

Քայլ 2. Թղթապանակի կառուցվածք

Եկեք նայենք Create React App-ի կողմից ստեղծված թղթապանակների կառուցվածքին.

««
իմ-հավելվածը/
├── հանգույցի_մոդուլներ/
├── հանրային/
│ └── index.html
└── src/
├── Հավելված.css
├── Հավելված.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
««

– `node_modules/`: Պարունակում է ձեր նախագծի բոլոր կախվածությունները։
– `public/`: Պարունակում է ստատիկ ֆայլեր, այդ թվում՝ `index.html`-ը, որը ծրագրի մուտքի կետն է։
– `src/`: Որտեղ դուք կանցկացնեք ձեր ժամանակի մեծ մասը: Պարունակում է React բաղադրիչներ, CSS ֆայլեր և այլ ակտիվներ:

Քայլ 3. Անտեղի ֆայլերի ջնջում

Սկսելու համար մաքուր թերթիկից, եկեք ջնջենք մի քանի ավելորդ ֆայլեր։ Ջնջեք `logo.svg`-ն և `App.test.js`-ը `src/` թղթապանակից։ Այնուհետև բացեք `App.css`-ը և `index.css`-ը՝ ջնջելով դրանց մեջ եղած ամբողջ CSS կոդը՝ մաքուր ոճաթերթից սկսելու համար։

Քայլ 4. Առաջին բաղադրիչի ստեղծումը

React.js-ը հիմնված է բաղադրիչների վրա: Կոմպոնենտները ձեր վեբ հավելվածի շինանյութերն են: Եկեք փոփոխենք `App.js`-ը՝ մեր առաջին բաղադրիչը ստեղծելու համար:

Բացեք `src/App.js` ֆայլը և փոխարինեք այն հետևյալ կոդով՝

«`jsx
ներմուծել React-ը 'react'-ից;
ներմուծել './App.css';

ֆունկցիա App() {
վերադարձ (

);
}

արտահանել լռելյայն հավելվածը;
««

Սկզբնավորեք React կոդը `App.js`-ի ներսում՝ օգտագործելով JSX (JavaScript XML), որը թույլ է տալիս մեզ գրել HTML-անման շարահյուսություն JavaScript-ի ներսում: Պահպանեք ձեր փոփոխությունները և դիտեք արդյունքները ձեր զննարկիչում:

Քայլ 5. Նոր բաղադրիչների ավելացում

Հիմա եկեք ավելացնենք մի քանի նոր բաղադրիչներ։ Ստեղծեք նոր պանակ՝ `components` անունով՝ `src` պանակում։ Այնուհետև ստեղծեք նոր ֆայլ՝ `HelloWorld.js`՝ `components` պանակում։

«`jsx
ներմուծել React-ը 'react'-ից;

ֆունկցիա HelloWorld() {
վերադարձ (

);
}

արտահանման լռելյայն HelloWorld;
««

Բացեք `App.js`-ը և ներմուծեք մեր ստեղծած `HelloWorld` բաղադրիչը։

«`jsx
ներմուծել React-ը 'react'-ից;
ներմուծել './App.css';
ներմուծել HelloWorld-ը './components/HelloWorld' ֆայլից;

ֆունկցիա App() {
վերադարձ (

);
}

արտահանել լռելյայն հավելվածը;
««

Այժմ `App.js`-ը արտապատկերում է `HelloWorld` բաղադրիչը գլխավոր էջում։

Քայլ 6. Օգտագործման Ստատեի միջոցով State Management-ի ավելացում

React-ը շատ հզոր կեռիկներ ունի վիճակը կառավարելու համար։ Եկեք մեր ծրագրին ավելացնենք որոշ վիճակ։ Օրինակ, եկեք ավելացնենք հաշվիչ, որը մեծանում է ամեն անգամ, երբ կոճակը սեղմվում է։

Բացեք `HelloWorld.js`-ը և ավելացրեք state և `useState` կեռիկը՝

«`jsx
ներմուծել React, { useState }-ը 'react'-ից;

ֆունկցիա HelloWorld() {
const [հաշվարկ, setCount] = useState(0);

const incrementCount = () => {
սահմանելՀաշիվ(հաշվարկ + 1);
}

վերադարձ (

);
}

արտահանման լռելյայն HelloWorld;
««

`count` վիճակը սկզբնականացվում է 0 արժեքով, և ամեն անգամ, երբ կոճակը սեղմվում է, `incrementCount` ֆունկցիան կմեծացնի այս արժեքը։

Քայլ 7. Ստիլինգի ավելացում

Ստիլինգ ավելացնելու համար կարող ենք օգտագործել CSS `App.css` ֆայլում կամ կարող ենք օգտագործել CSS-in-JS գրադարան, ինչպիսին է styled-components-ը: Առայժմ մնանք ստանդարտ CSS-ի վրա:

Բացեք `App.css`-ը և ավելացրեք որոշ ոճավորումներ՝

«css
.App {
տեքստային դասավորված. կենտրոն;
}

.App-վերնագիր {
ֆոնի գույնը՝ 282c34;
նվազագույն բարձրություն՝ 100 վ/ժ;
ցուցադրում ՝ ֆլեքս;
flex-direction՝ սյունակ;
հավասարեցնել տարրերը `կենտրոն;
հիմնավորում-բովանդակություն՝ կենտրոն;
տառատեսակի չափսը՝ calc(10px + 2vmin);
գույնը `սպիտակ;
}

կոճակ {
լիցք `10px 20px;
margin-top: 20px;
font-size: 16px;
}
««

Քայլ 8. React Router-ի միջոցով երթուղայնացման ավելացում

Մեր ծրագրում տարբեր էջերի միջև նավիգացիա ավելացնելու համար կարող ենք օգտագործել React Router-ը։ Տեղադրեք React Router-ը՝ կատարելով հետևյալ հրամանը.

«Բաշ
npm տեղադրել react-router-dom
««

Այնուհետև, ստեղծեք երկու նոր բաղադրիչ՝ `Home.js` և `About.js` `components` թղթապանակում։

`Home.js`:
«`jsx
ներմուծել React-ը 'react'-ից;

ֆունկցիա Home() {
վերադարձ (

);
}

արտահանման լռելյայն Գլխավոր էջ;
««

`About.js`:
«`jsx
ներմուծել React-ը 'react'-ից;

ֆունկցիա՝ About() {
վերադարձ (

);
}

արտահանման լռելյայն մասին;
««

Հաջորդը, բացեք `App.js`-ը և կարգավորեք երթուղայնացումը՝

«`jsx
ներմուծել React-ը 'react'-ից;
ներմուծել { BrowserRouter-ը որպես Router, Route, Link, Switch } 'react-router-dom'-ից;
ներմուծել './App.css';
ներմուծել HelloWorld-ը './components/HelloWorld' ֆայլից;
ներմուծել Home ֆայլը './components/Home' ֆայլից;
ներմուծել «About»-ը «./components/About»-ից;

ֆունկցիա App() {
վերադարձ (

);
}

արտահանել լռելյայն հավելվածը;
««

Դրանով մենք մեր հավելվածում ավելացրել ենք տարբեր էջերի միջև հիմնական նավիգացիա։

Penutup

Սա React.js-ի միջոցով վեբ հավելված ստեղծելու հիմնական ձեռնարկ է: Մենք անդրադարձել ենք նախագծի կարգավորմանը, բաղադրիչների ստեղծմանը, վիճակի կառավարմանը, ոճավորմանը և երթուղայնացմանը: React.js-ն ունի հարուստ էկոհամակարգ՝ բազմաթիվ գրադարաններով և գործիքներով, որոնք կարող են օգնել ձեզ կառուցել ավելի բարդ վեբ հավելվածներ:

Հաջողություն, և հուսով եմ, որ այս ձեռնարկը կօգնի ձեզ սկսել ձեր ճանապարհորդությունը React.js-ի հետ։