Ábhar
- 01. Íoslódáil na spleáchais
- 02. Cuir an chéad ghiuirléid leis
- 03. Stíl bosca giuirléidí
- 04. Cuir ceannteideal agus ábhar leis
- 05. Lig don ghiuirléid an eangach a shíneadh
- 06. Soláthar fearais réamhshocraithe
- 07. Fearais shonracha a fhorfheidhmiú
- 08. Cuir props leis an aip
- 09. Taispeáin roinnt sonraí
- 10. Tiontaigh go NumberWidget
Sa rang teagaisc seo, beimid ag siúl tríd an gcaoi le feidhmchlár a chruthú ag baint úsáide as React - leabharlann JavaScript chun comhéadain úsáideora a thógáil. Tá an uirlis deartha gréasáin seo úsáideach go háirithe maidir le cruthú comhpháirteanna, ag tairiscint buntáistí suntasacha thar rud éigin cosúil le jQuery.
Ciallaíonn an cumas comhpháirteanna féinchuimsitheacha in-athúsáidte a chruthú gur féidir leat an cód a choinneáil níos lú agus níos eagraithe. Má chuirtear comhpháirteanna ar bun go maith go leor, is féidir iad a ligean isteach nuair is gá gan aon socrú breise ag teastáil ar chor ar bith.
Sa rang teagaisc seo, beimid ag déanamh feidhmchlár painéal a choinníonn súil ar mhéadrachtaí tacaíochta tábhachtacha. Tá an scáileán roinnte ina ghreille, ar féidir é a shaincheapadh chun íomhánna éagsúla a thaispeáint ag brath ar na sonraí a chaithfidh sé a thaispeáint.
Ag iarraidh suíomh a chruthú, seachas aip? Teastaíonn ár dtreoracha uait maidir leis an tógálaí láithreán gréasáin agus an tseirbhís óstála gréasáin is fearr.
- 19 breiseán iontach jQuery
Trí chomhpháirt ghiuirléid chineálach a dhéanamh, is féidir linn an taispeáint a chopáil agus a athrú gan dul i bhfeidhm ar aon cheann den chód bunúsach. Trí iad seo a fhilleadh i gcomhpháirt coimeádáin is féidir linn foinse na sonraí sin a rialú ar leithligh óna dtaispeántas.
Beimid ag baint úsáide as Eangach CSS chun ábhar a thaispeáint i mbloic shainithe. Taispeánfaidh brabhsálaithe nach dtacaíonn leis i gcolún amháin, cosúil le scáileán níos lú a úsáid.
Íoslódáil na comhaid don rang teagaisc seo anseo.
01. Íoslódáil na spleáchais
Tar éis dúinn na comhaid tionscadail a fháil (agus iad a shábháil i stóráil scamall), caithfimid na pacáistí riachtanacha go léir a theastaíonn uainn don tionscadal a tharraingt anuas. Ina measc seo tá comhaid ó ‘create-react-app’, a phléann leis an bpróiseas tógála dúinn.
Ní mór dúinn dhá fhreastalaí a reáchtáil freisin - ceann a sholáthraíonn athlódáil te don leathanach agus ceann eile a sholáthraíonn roinnt sonraí bréige le tástáil leo.
Iontráil an méid seo a leanas ar an líne ordaithe agus tú istigh san eolaire tionscadail:
/ * i bhfuinneog amháin * /> snáth suiteáil> tús snáth / * i bhfuinneog eile * /> snáth freastal
02. Cuir an chéad ghiuirléid leis
Chun rudaí a thosú, tabharfaimid comhpháirt shimplí ar an leathanach. Le Babel curtha ar bun, is féidir linn comhpháirteanna a scríobh ag úsáid ranganna ES2015. Níl le déanamh againn ach iad a iompórtáil nuair is gá dúinn agus déanfaidh Babel le Webpack an chuid eile.
Oscail /src/components/App.js agus cuir an t-allmhairiú go barr an leathanaigh. Ansin, taobh istigh den fheidhm rindreála, cuir an chomhpháirt taobh istigh den choimeádán div>.
Giuirléid a allmhairiú ó ’../components/Widget’; […] Div className = "App"> Giuirléid /> / div>
03. Stíl bosca giuirléidí
Ar an tionscadal seo, cuirtear Webpack ar bun chun allmhairí CSS a phiocadh suas. Ciallaíonn sé seo gur féidir linn comhaid CSS a iompórtáil mar a rinneamar le JavaScript sa chéim roimhe seo, rud a ligeann dúinn comhaid ar leithligh a chruthú do gach comhpháirt. Cuir an t-allmhairiú seo a leanas le barr Widget.js. Nascfaidh sé seo leis an aicme ‘Giuirléid’ agus scóipfidh sé na stíleanna don chomhpháirt sin.
allmhairiú ’../styles/Widget.css’;
04. Cuir ceannteideal agus ábhar leis
Beidh cur síos gairid de dhíth ar gach giuirléid ar na sonraí atá á thaispeáint aige. Chun rudaí a shaincheapadh, cuirfimid é seo ar aghaidh mar mhaoin - nó mar ‘prop’ - chuig an gcomhpháirt nuair a úsáidimid é.
Maidir leis an ábhar, soláthraíonn React prop speisialta ‘leanaí’, ina mbeidh an t-ábhar a iontráiltear idir clibeanna oscailte agus deiridh comhpháirte.
Ionadaigh an áititheoir p> san fheidhm rindreála leis an méid seo a leanas. Tiocfaidh an chomhpháirt Luchtaithe i bhfeidhm níos déanaí.
div className = "ceanntásc"> h2> {this.props.heading} / h2> {this.props.loading? Loading />: ""} / div> div className = "content"> {this.props.children} / div>
05. Lig don ghiuirléid an eangach a shíneadh
Chomh maith leis na stílbhileoga a allmhairímid, is féidir linn stíleanna React a chruthú bunaithe go dinimiciúil ar na fearais a ritear tríd.
Chun colúin agus sraitheanna a ghreamú le Eangach CSS, bain úsáid as na hairíonna colún eangaí agus as a chéile. Is féidir linn pas a fháil trí props ‘colspan’ agus ‘rowspan’ chun é seo a athrú in aghaidh na comhpháirte ar bhealach cosúil leis an gcaoi a n-oibríonn cealla tábla i HTML.
Cuir stíleanna i bhfeidhm sa tógálaí Giuirléid agus déan iad a nascadh leis an gcoimeádán div>.
más rud é (props.colspan! == 1) {this.spanStyles.gridColumn = `span $ {props.colspan}`; } más rud é (props.rowspan! == 1) {this.spanStyles.gridRow = `span $ {props.rowspan}`; } […] Div style = {this.spanStyles} className = "Giuirléid">
06. Soláthar fearais réamhshocraithe
Faoi láthair tá ár Giuirléid bán mar ní sholáthraímid aon props go fóill. Sna cásanna seo, is féidir linn fearais réamhshocraithe a sholáthar le húsáid ina n-ionad.
Mura gcuirtear a mhalairt in iúl, réamhshocróidh Greillí CSS an t-aonad is lú is féidir a thógáil, ar cearnóg 1x1 é sa chás seo. Díreach sula ndéanaimid an Giuirléid a easpórtáil, soláthraigh roinnt fearas réamhshocraithe chuige sin.
Widget.defaultProps = {ceannteideal: "Giuirléid Gan Ainm", colspan: 1, rowspan: 1}
07. Fearais shonracha a fhorfheidhmiú
Is féidir le comhpháirteanna leideanna a sholáthar maidir le cén cineál luachanna ba chóir a sheoladh mar fhearais. Agus feidhmchlár á fhorbairt aige, taispeánfar aon fhearais a ritheadh go mícheart sa chonsól mar rabhaidh chun cabhrú le fabhtanna a sheachaint níos faide síos an líne.
Díreach faoi na fearais réamhshocraithe, sainmhínigh na props ba chóir nó ba ghá a chur isteach, agus cén cineál ba chóir dóibh a bheith.
Widget.propTypes = {ceannteideal: React.PropTypes.string, colspan: React.PropTypes.number, rowspan: React.PropTypes.number, leanaí: React.PropTypes.element.isRequired}
08. Cuir props leis an aip
Trí shainiú a dhéanamh ar an prop ‘leanaí’ de réir mar is gá, féadfaidh tú an brabhsálaí a thabhairt faoi deara ag gearán nach bhfuil sé sainithe faoi láthair. Cé nach mbrisfidh sé seo an aip, coimeádfaidh sé fabht orainn go dtí go mbeidh sé curtha in eagar.
Téigh ar ais chuig App.js agus cuir prop ceannteidil leis an ngiuirléid a chruthaigh muid níos luaithe. In áit an chlib a dhéanamh féin-dhúnadh, oscail suas é agus cuir roinnt ábhar áitritheora leis chun a thaispeáint go bhfuil sé ag obair.
Ceannteideal Giuirléid = "Iomlán na dTicéad Oscailte"> p> Seo roinnt ábhar / p> / Giuirléid>
09. Taispeáin roinnt sonraí
Oibríonn an chomhpháirt NumberDisplay cosúil leis an ngiuirléid a chruthaigh muid - tugann sé roinnt téacs bunaithe go hiomlán ar na fearais a thugaimid isteach ann. Is féidir linn é a ligean isteach nuair is gá dúinn agus taispeáint comhsheasmhach sonraí uimhriúla a bheith againn.
Iompórtáil an chomhpháirt NumberDisplay ag an mbarr agus bain úsáid as chun an t-ábhar áitritheora a chuir tú díreach laistigh de Giuirléid a athsholáthar.
allmhairiú NumberDisplay ó ’../components/NumberDisplay’; […] NumberDisplay max = {9} value = {5} />
10. Tiontaigh go NumberWidget
I láthair na huaire, úsáidtear go leor cód chun rud a thaispeáint nach n-athróidh ar fud giuirléidí. Is féidir linn comhpháirt speisialta a dhéanamh chun an rud ar fad a chuimsiú. Ar an mbealach sin ní gá dúinn ach NumberWidget a iompórtáil.
Cuir NumberWidget in ionad na n-allmhairí Giuirléid agus NumberDisplay ag barr App.js. Déan cinnte iad a athsholáthar sa mhodh rindreála.
allmhairiú NumberWidget ó ’../components/NumberWidget’; […] NumberWidget gceannteideal = "Iomlán na dTicéad Oscailte" max = {9} value = {5} />
An chéad leathanach eile: Comhlánaigh d’aip painéal i React
