<prompt> Unda programu kamili ya wavuti kwa kutumia React na Express inayowaruhusu watumiaji kujisajili, kuingia na kuchapisha ujumbe kwenye ubao wa ujumbe wa umma. Programu inapaswa kuhifadhi taarifa na ujumbe wa mtumiaji katika hifadhidata ya MySQL, na kutekeleza mbinu sahihi za uthibitishaji na uidhinishaji ili kulinda data ya mtumiaji.  <response>: Ili kuunda programu kamili ya wavuti kwa kutumia React na Express inayoruhusu watumiaji kujisajili, kuingia na kuchapisha ujumbe kwenye ubao wa ujumbe wa umma, fuata hatua hizi:1. Weka muundo wa mradiUnda folda mpya ya mradi wako na uingie ndani yake. Kisha, sanidi folda mbili tofauti: moja kwa upande wa mteja React na nyingine kwa upande wa seva Express.programu ya bodi ya ujumbe ya mkdircd ujumbe-ubao-programumteja wa mkdirseva ya mkdir2. Unda upande wa seva na ExpressNenda kwenye folda ya seva na uanzishe mradi mpya wa Node.js.seva ya cdnpm init -ySakinisha utegemezi muhimu.npm install express mysql bcryptjs jsonwebtoken cors dotenvUnda faili ya .env ili kuhifadhi vigezo vya mazingira kama vile vitambulisho vya hifadhidata na ufunguo wa siri wa JWT.gusa .envOngeza maudhui yafuatayo kwenye faili ya .env:DB_HOSTmwenyeji wa ndaniDB_USERmziziDB_PASSWORDnenosiri_lakoDB_NAMEubao_wa_ujumbeJWT_SECRETufunguo_wako_wa_siri_wakoUnda faili ya server.js na usanidi seva ya msingi ya Express. javascriptconst express needexpress;const app express;const bandari 3001;app.useexpress.json;app.get, req, res res.sendHujambo Ulimwengu!;;app.listenbandari, console.logSeva inafanya kazi katika Sanidi hifadhidata ya MySQLSakinisha MySQL ikiwa bado hujafanya hivyo, kisha unda hifadhidata mpya na jedwali kwa ajili ya kuhifadhi taarifa na ujumbe wa mtumiaji. sqlTUNDA ujumbe_wa_db_YA DATABASE;TUMIA message_board_db;TUNZA watumiaji wa TABLE id INT AUTO_INCREMENT FUNGUO YA MSINGI, jina la mtumiaji VARCHAR255 SIO UTUSI WA KIPEKEE, barua pepe VARCHAR255 SIYO TUPU YA KIPEKEE, nenosiri VARCHAR255 SI BATILI;TUNZA ujumbe wa TABLE id INT AUTO_INCREMENT FUNGUO YA MSINGI, user_id INT NOT NULL, MAANDIKO YALIYOMO SIYO BATILI, imeundwa_saa TIMESTAMP DEFAULT CURRENT_TIMESTAMP, UFUNGUO WA NJE kitambulisho_cha_mtumiaji UNAREJEA watumiajiid;4. Unda njia za API za uthibitishaji na uchapishaji wa ujumbeKatika folda ya seva, unda folda mpya inayoitwa routes, kisha unda faili mbili: auth.js na messages.js.Ndani ya auth.js, weka njia za usajili wa mtumiaji na kuingia. javascriptconst express needexpress;const router express.Router ;const bcrypt needbcryptjs;const jwt hitajijsonwebtoken;const dotenv needdotenv; Pakia vigezo vya mazingira kutoka kwa faili ya .envdotenv.config; Mantiki ya muunganisho wako wa hifadhidata haparouter.postregister, async req, res Mantiki ya usajili hapa;router.postlogin, async req, res Mantiki ya kuingia hapa;module.exports kipanga njia;Ndani ya messages.js, weka njia za kuleta ujumbe wote na kutuma ujumbe mpya. javascriptconst express needexpress;const router express.Router ;const jwt hitajijsonwebtoken;const dotenv needdotenv; Pakia vigezo vya mazingira kutoka kwa faili ya .envdotenv.config; Mantiki ya muunganisho wako wa hifadhidata haparouter.get, async req, res Leta mantiki ya ujumbe wote hapa;router.post, async req, res Chapisha mantiki mpya ya ujumbe hapa;module.exports kipanga njia;5. Unda upande wa mteja na ReactNenda kwenye folda ya mteja na uunde programu mpya ya React kwa kutumia create-react-app.cd ..mtejanpx create-react-app .Sakinisha utegemezi muhimu.npm sakinisha axios react-router-dom6. Jenga vipengele vya ReactUnda vipengele vinavyohitajika kwa ajili ya programu yako, kama vile Programu, Navbar, Ingia, Register, na MessageBoard. Tumia React Router kushughulikia urambazaji kati ya kurasa tofauti.7. Unganisha upande wa mteja na upande wa sevaTumia Axios kupiga simu za API kutoka kwa vipengele vyako vya React hadi sehemu za mwisho za seva yako ya Express.8. Endesha mteja na seva kwa wakati mmojaSakinisha sambamba kwenye folda yako ya seva.npm kusakinisha wakati huo huoRekebisha sehemu ya scripts ya faili yako ya package.json kwenye folda ya server:jsonscripts: start: node server.js, client: cd ..client npm start, dev: kwa wakati mmoja npm anza npm endesha mtejaSasa unaweza kuendesha mteja na seva kwa wakati mmoja kwa kuendesha npm run dev kwenye folda ya server.Ni hayo tu! Sasa una programu kamili ya wavuti inayotumia React na Express ambayo inaruhusu watumiaji kujisajili, kuingia na kuchapisha ujumbe kwenye ubao wa ujumbe wa umma. Hakikisha kuwa umetekeleza ipasavyo mbinu za uthibitishaji na uidhinishaji ili kulinda data ya mtumiaji. 