Kennsla um að búa til vefforrit með React.js

React.js er vinsælt forritunarsafn fyrir notendaviðmót (front-end) sem notað er til að smíða gagnvirk notendaviðmót (UI). React.js var þróað af Facebook og hefur verið notað af mörgum stórfyrirtækjum, þar á meðal Instagram, Airbnb og WhatsApp. Ef þú ert að leita að því að smíða skilvirk, hraðvirk og móttækileg vefforrit, gæti React.js verið rétti kosturinn fyrir þig.

Pendahuluan

Áður en við byrjum, vertu viss um að þú hafir Node.js og npm (Node Package Manager) uppsett á tölvunni þinni. Node.js og npm eru nauðsynleg því þau veita umhverfið og verkfærin sem þarf til að þróa vefforrit með React.js.

Skref 1: Upphafsstilling React verkefnisins

Til að búa til nýtt React.js forrit getum við notað Create React App, forritagerðartól sem lágmarkar upphafsstillingar. Keyrðu eftirfarandi skipun í skipanalínu eða skipanalínu:

"` bash
npx búa til-bregðast-forrit mitt-forrit
cd mitt-app
npm byrjun
„“

Þessi skipun mun búa til nýja möppu sem heitir `my-app`, sækja og setja upp allar nauðsynlegar ósjálfstæðir tengingar og ræsa þróunarþjóninn. Þú getur nú opnað vafra og fengið aðgang að `http://localhost:3000` til að sjá sjálfgefna React.js forritið.

Skref 2: Möppuskipan

Við skulum skoða möppuskipanina sem Create React App hefur búið til:

„“
appið mitt/
├── hnútaeiningar/
├── opinbert/
│ └── vísitala.html
└── src/
├── Forrit.css
├── App.js
├── App.test.js
├── vísitala.css
├── index.js
└── merki.svg
„“

– `node_modules/`: Inniheldur allar verkefnistengdar þætti.
– `public/`: Inniheldur kyrrstæðar skrár, þar á meðal `index.html` sem er aðgangsstaður forritsins.
– `src/`: Þar sem þú munt eyða mestum tíma þínum. Inniheldur React íhluti, CSS skrár og aðrar eignir.

Skref 3: Að eyða óþarfa skrám

Til að byrja með hreint blað, skulum við eyða nokkrum óþarfa skrám. Eyðum `logo.svg` og `App.test.js` úr `src/` möppunni. Opnið síðan `App.css` og `index.css` og eyðið öllum CSS kóðanum í þeim til að byrja með hreint stílblað.

Skref 4: Að búa til fyrsta íhlutinn þinn

React.js er byggt á íhlutum. Íhlutir eru byggingareiningar vefforritsins þíns. Við skulum breyta `App.js` til að búa til fyrsta íhlutinn okkar.

Opnaðu `src/App.js` og skiptu því út fyrir eftirfarandi kóða:

„`jsx
flytja inn React frá 'react';
flytja inn './App.css';

fall Forrit() {
skila (

);
}

flytja út sjálfgefið forrit;
„“

Frumstilltu React kóðann í `App.js` með JSX (JavaScript XML), sem gerir okkur kleift að skrifa HTML-líka setningafræði innan JavaScript. Vistaðu breytingarnar og skoðaðu niðurstöðurnar í vafranum þínum.

Skref 5: Bæta við nýjum íhlutum

Nú skulum við bæta við nokkrum nýjum íhlutum. Búið til nýja möppu sem heitir `components` í `src` möppunni. Búið síðan til nýja skrá sem heitir `HelloWorld.js` í `components` möppunni.

„`jsx
flytja inn React frá 'react';

fallið HallóHeimur() {
skila (

);
}

flytja út sjálfgefið HallóHeimur;
„“

Opnaðu `App.js` og flyttu inn `HelloWorld` íhlutinn sem við bjuggum til:

„`jsx
flytja inn React frá 'react';
flytja inn './App.css';
flytja inn HallóHeimur frá './components/HallóHeimur';

fall Forrit() {
skila (

);
}

flytja út sjálfgefið forrit;
„“

Nú birtir `App.js` `HelloWorld` íhlutinn á aðalsíðunni.

Skref 6: Bæta við stöðustjórnun með useState

React hefur mjög öfluga króka (hooks) til að stjórna ástandi. Við skulum bæta við einhverju ástandi í forritið okkar. Til dæmis, við skulum bæta við teljara sem hækkar í hvert skipti sem smellt er á hnapp.

Opnaðu `HelloWorld.js` og bættu við `state` og `useState` króknum:

„`jsx
flytja inn React, { useState } frá 'react';

fallið HallóHeimur() {
const [talning, setjaTalningu] = useState(0);

stöðug aukningFjöldi = () => {
setCount(fjöldi + 1);
}

skila (

);
}

flytja út sjálfgefið HallóHeimur;
„“

Fallið `count` er upphafsstillt með gildinu 0 og í hvert skipti sem smellt er á hnappinn mun `incrementCount` fallið auka þetta gildi.

Skref 7: Bæta við stíl

Til að bæta við stíl getum við notað CSS í `App.css` skránni eða við getum notað CSS-in-JS bókasafn eins og styled-components. Við skulum halda okkur við hefðbundið CSS í bili.

Opnaðu `App.css` og bættu við stíl:

“`css
.App {
texta-samræma: miðja;
}

.App-haus {
bakgrunnslitur: 282c34;
lágmarkshæð: 100vh;
sýna: sveigja;
beygja-átt: dálkur;
samræma hluti: miðja;
réttlæta-innihald: miðja;
leturstærð: reiknað(10px + 2vmin);
litur: hvítur;
}

hnappur {
padding: 10px 20px;
margin-top: 20px;
font-size: 16px;
}
„“

Skref 8: Bæta við leiðsögn með React Router

Til að bæta við flakk milli síðna í forritinu okkar getum við notað React Router. Setjið upp React Router með því að keyra eftirfarandi skipun:

"` bash
npm setja upp react-router-dom
„“

Búðu síðan til tvo nýja íhluti: `Home.js` og `About.js` í `components` möppunni.

`Heim.js`:
„`jsx
flytja inn React frá 'react';

fall Heim() {
skila (

);
}

flytja út sjálfgefið forsíða;
„“

`About.js`:
„`jsx
flytja inn React frá 'react';

fall Um() {
skila (

);
}

flytja út sjálfgefið Um;
„“

Næst skaltu opna `App.js` og setja upp leiðarval:

„`jsx
flytja inn React frá 'react';
`import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';`
flytja inn './App.css';
flytja inn HallóHeimur frá './components/HallóHeimur';
flytja inn Heim frá './components/Home';
flytja inn Um frá './components/About';

fall Forrit() {
skila (

);
}

flytja út sjálfgefið forrit;
„“

Með þessu höfum við bætt við grunnleiðsögn á milli síðna í forritinu okkar.

Lokun

Þetta er grunnkennsla í að búa til vefforrit með React.js. Við höfum fjallað um uppsetningu verkefna, gerð íhluta, stjórnun stöðu, stíl og leiðarval. React.js hefur ríkt vistkerfi með fjölmörgum bókasöfnum og tólum sem geta hjálpað þér að smíða flóknari vefforrit.

Gangi þér vel, og ég vona að þessi kennsla hjálpi þér að byrja á ferðalagi þínu með React.js!