Ƙirƙirar aikace-aikacen React bai taɓa yin sauƙi ba tare da taimakon kayan aikin ƙirƙira-react-app, yanayin ci gaba da aka saita muku. Ƙungiyar Facebook ce ta gina wannan kayan aiki kuma yana ba da saitin ginin zamani ba tare da wani tsari da ake buƙata ba. Kasancewa kayan aiki mai ƙarfi, ƙirƙira-react-app yana ba ku samfuri na tukunyar jirgi don ƙirƙirar aikace-aikacen amsa kai tsaye ba tare da ɓata lokaci mai yawa akan saitin fakitin yanar gizo ko wasu koma bayan fasaha ba.
A cikin wannan labarin, za mu bi ku ta hanyar ƙirƙirar sabon aikace-aikacen React ta hanyar ƙirƙira-react-app mataki-mataki. Har ila yau, za mu tabo yadda ake amfani da wasu ɗakunan karatu da ayyukanta.
Ƙirƙiri React App
npx create-react-app my-new-app cd my-new-app npm start
Fahimtar Kayan aiki
Lokacin da kuka shigar da gudanar da ƙirƙira-react-app, yana saita babban tsarin adireshi tare da ƙayyadaddun rubutun a cikin fayil ɗin package.json. Waɗannan rubutun suna zuwa tare da duk abin da kuke buƙata don ginawa, gwadawa da fara aikace-aikacen ku. Kyakkyawan wannan kayan aiki shine cewa duk abubuwan da aka ɓoye suna ɓoye wanda ke ba ka damar mayar da hankali kan lambar maimakon yanayin.
Wannan kayan aikin kuma yana saita uwar garken ci gaba mai rai wanda zai sake loda aikace-aikacenku kai tsaye a duk lokacin da kuka yi canje-canje ga lambar.
Tsarin Jagora da Muhimman Fayiloli
- kunshin.json: Dukkan abubuwan dogaro na aikinku tare da rubutun don ginawa, gwadawa da fara aikace-aikacenku ana iya samun su anan.
- node_modules: Gidajen duk fakitin aikinku ya dogara da su.
- jama'a/index.html: Babban fayil ɗin HTML wanda ake lodawa lokacin da wani ya ziyarci rukunin yanar gizon ku. Ya ƙunshi div tare da id na tushen inda React app zai hau zuwa.
- src/index.js: Wurin shigarwa na React app.
Ƙara Dakunan karatu
Ƙara ɗakunan karatu zuwa aikinku ba zai iya zama da sauƙi ba. Misali, idan kuna son ƙara React Router zuwa aikinku, kawai kuna aiwatar da umarnin npm shigar da react-router-dom sannan ku shigo da shi cikin fayilolinku kamar yadda ake buƙata. Kundin tsarin da ke baya yana kula da tabbatar da cewa komai yana cikin ginin ƙarshe.
Keɓance App ɗin React ɗinku
Keɓance sabuwar aikace-aikacen React ɗin ku mai sauƙi ne. Da farko, a cikin fayil ɗin src/App.js, zaku iya canza lambar data kasance don dacewa da bukatun aikace-aikacenku. Bugu da ƙari, kuna iya ƙara sabbin fayilolin .js don abubuwan haɗin ku kuma shigo da su cikin App.js don amfani.
A ƙarshe, ƙirƙira-react-app kayan aiki ne mai amfani don saita sabon aikin React ba tare da wani saiti ba. Ya zo tare da saitin ginin zamani, uwar garken dev, da madaidaitan ma'auni, wanda zai ba ku damar mai da hankali kan rubuta lambar, barin kayan aikin ginin don ƙirƙirar-react-app. Tuna, idan kuna buƙatar keɓance saitin ginin ku, koyaushe kuna iya gudu npm gudu don yin hakan, amma ga yawancin aikace-aikacen, abubuwan da aka bayar yakamata su fi isa.
