Hvordan oppsett React.JS på klientsiden i Mern Stack Development

Reagere.JS regnes som toppnivået i Mern Stack -utviklingen. Det er en erklærende JavaScript Framework Brukes til å utvikle dynamiske applikasjoner på klientsiden. Det tillater deg også å lage komplekse grensesnitt ved å koble komponentene i dataene dine fra backend -serveren og deretter gjøre dem som HTML. React utmerker seg også med å håndtere datadrevne og statlige grensesnitt med minimal kode og andre funksjoner som feilhåndtering, lister, skjemaer, hendelser, som du forventer av et moderne nettrammeverk.

Denne oppskrivningen vil demonstrere hvordan Sett opp de Reagere.JS søknad på klient side i Mern Stack Development. Så la oss starte!

Merk: Forsikre deg om at du har “Node.JS”Installert på systemet ditt. Installer den først før du hopper i React.JS applikasjonsutvikling hvis du ikke har det allerede.

Hvordan oppsett React.JS på klientsiden i Mern Stack Development

Node.JS har også en "npm”Node Package Manager, som vil installere alle de nødvendige JavaScript -pakkene i React.JS -prosjekt. Det omfatter også et node -pakkeverktøy "npx”Verktøy som du kan bruke til å kjøre kjørbare pakker.

For å sette opp React.JS på klientsiden i Mern Stack Development, du må først velge en katalog for å installere React.JS -basert prosjekt. Du kan bruke “Ledeteksten”For dette formålet. Imidlertid vil vi bruke "Visual Studio Code”Terminal, noe som gjør det enkelt å betjene med React.JS -applikasjon.

For å gjøre det for det første, se etter “Visual Studio Code”Søknad og åpne den:

I det åpne applikasjonen klikker du på "Fil”Alternativet til menylinjen og velg“Åpen mappe”Alternativ:

Nå, bla gjennom mappen der du vil plassere reagen din.JS-applikasjonsrelatert fil. I vårt tilfelle har vi valgt "Ansatt-Mern-Project”Mappe, til stede i“Lokal disk (E :)”:

Neste, trykk Ctrl + Shift + ' Å åpne Visual Studio Code Terminal. Du kan også utføre den spesifiserte operasjonen ved hjelp av "Terminal" -menyen:

På dette tidspunktet er vi alle klare til å sette opp React.JS -applikasjon i Mern Stack Development. Utførelsen av “npx”Kommando med“lage-react-app”Alternativet hjelper deg med å lage en react.JS -applikasjon. For eksempel det undergitte "npx”Kommando vil opprette en“Mern-Emsystem”REACT.JS -applikasjon som vil ha alle nødvendige avhengigheter i prosjektmappen:

> NPX Create-React-App Mern-Emsystem

Vent noen minutter, da installasjonen av pakkene vil ta litt tid:

Den undergitte feilfrie utgangen indikerer at vi har installert "Mern-Emsystem”REACT.JS -applikasjon:

Visual Studio -koden laster automatisk Create React.JS -applikasjonsmappe. Nå vil vi gjøre noen endringer i "indeks.html”Fil av“Mern-Emsystem”REACT.JS -applikasjon:

“indeks.html”Filen til reagen din.JS -applikasjonen vil på en eller annen måte se slik ut:

Her, “React App”Representerer“tittel" av vår "Mern-Emsystem" applikasjon:

Vi vil bruke den skapte React.JS -applikasjon for å utvikle et ansattes styringssystem med Mern Stack. Så for det første vil vi endre tittelen på vår "Mern-Emsystem”REACT.JS -søknad til “Ansattes styringssystem”Og lagre det åpnet”indeks.html”Fil:

I neste trinn vil vi endre den gjeldende arbeidskatalogen til “Mern-Emsystem”Bruke terminalen:

> CD Mern-Emsystem

Nå, skriv ut det undergitte "npm”Kommando for å starte utviklingen av webserveren:

> NPM Start

Som du kan se av utgangen som vår “Mern-Emsystem”Prosjektet er samlet og klart til å se i nettleseren:

Ved å skrive "Localhost: 3000”I adresselinjen i nettleseren vår vil vi se følgende grensesnitt for“Mern-Emsystem”REACT.JS -applikasjon:

Du kan også endre innholdet i "App.JS”JavaScript -fil for håndtering eller visning av komponentene i React -applikasjonen din:

For eksempel å legge til følgende kode i vår "App.JS”-Filen vil lagre“Ansattes styringssystem”Innhold inne i en beholder:

importere './App.CSS ';
funksjon app ()
komme tilbake (

Ansattes styringssystem

);

Eksporter standardapp;

Fra det undergitte bildet kan du se at den ekstra "Ansattes styringssystem”Innhold for vår react.JS -applikasjon vises vellykket:

Det handlet om prosedyren for å sette opp React.JS-applikasjon på klientsiden i Mern Stack Development. Du kan gjøre ytterligere tilpasning i henhold til dine krav.

Konklusjon

Reagere.JS er et JavaScript-bibliotek som brukes til å utvikle fronten av applikasjonene basert på Mern Stack. Det tillater brukerne å opprette brukergrensesnittkomponenter og kode i JavaScript. På grunn av den. Denne oppskrivningen demonstrerte prosedyren for å sette opp Reagere.JS søknad på klient side i Mern Stack Development.