Share
I denne opplæringsserien ser du hvordan du kommer i gang med å lage en blogging-app ved hjelp av React. I løpet av denne opplæringsserien vil du fokusere på hvordan du bruker React for å utvikle applikasjonsbrukergrensesnittet. Du bruker Node.js til server siden av programmet.
I denne veiledningen vil du se hvordan du implementerer brukergrensesnittet og bakenden for brukerregistrering og brukerinnlogging.
Opprett et prosjektkatalog kalt ReactNodeApp. Naviger til prosjektkatalogen og start nodeprosjektet.
npm init
Fyll ut de nødvendige detaljene, og du bør ha package.json fil opprettet. Slik ser det ut:
"navn": "reagere node-app", "versjon": "1.0.0", "beskrivelse": "", "main": "index.js", "scripts": "test" ekko \ "Feil: ingen test angitt \" && avslutte 1 "," forfatter ":" roy "," lisens ":" MIT "
Du bruker uttrykksrammen for visning av søknaden din. Installer ekspress ved å bruke følgende kommando:
npm installere ekspress - lagre
Ved å bruke uttrykksrammen, la oss lage vår programlytting på en portadresse. Inne i prosjektmappen, opprett en fil som heter app.js. Krev ekspressmodulen inne i app.js og lag en app. Sett den statiske banen til applikasjonen der den kan finne de statiske filene. Slik ser det ut:
Accentsconagua
var express = krever ("express"); var sti = krever ("sti"); var app = express (); app.use (express.static (path.join (__ dirname, "/ html")));Tilordne et portnummer for programmet å lytte på en port. Legg til følgende kode for å opprette en server:
app.listen (7777, funksjon () console.log ("Startet lytting på port", 7777);)Inne i prosjektmappen, opprett en mappe som heter html. Inne i html mappe, opprett en fil som heter index.html. Legg til følgende kode til index.html:
Hei Verden
Lagre endringene ovenfor og start serveren ved å bruke følgende kommando:
node app.js
Pek nettleseren din til http: // localhost: 7777 / index.html og du bør kunne se index.html side.
Du bruker bootstrap for å opprette brukergrensesnittet. Last ned og ta med bootstrap i index.html side.
Legg til de nødvendige React-biblioteker i index.html side.
Du lager oppvisningen ved hjelp av JSX. Hvis du ikke er kjent med JSX, vil jeg anbefale å lese en introduksjonsveiledning om React and JSX.
For å omforme JSX kode til JavaScript, trenger du babel, en JavaScript-kompilator. Inkluder babel i index.html side.
Opprett en fil som heter main.jsx inne i html mappe. Denne filen inneholder React UI-komponentene.
La oss lage en ny React-komponent som heter Logg inn inne i main.jsx fil.
klasse Signin strekker seg React.Component
Legg til en gjengivelsesmetode inne i Logg inn komponent som vil vise brukergrensesnittet for vår Logg inn komponent.
klasse Signin utvider React.Component render () return ()
I koden ovenfor er det alt HTML med bare en forskjell. De klasse Attributtet er endret til klassenavn når den brukes i jsx.
De Logg inn komponent, når den vises, vil vise HTML-koden inne i gjengi metode.
Legg til en container div i index.html side hvor du vil gjengjøre Logg inn komponent.
Render Logg inn komponent inne i .container div i index.html.
ReactDOM.render ( < Signin / > , document.getElementById ('app'));Lagre endringene ovenfor og start nodeserveren på nytt. Pek nettleseren din til http: // localhost: 7777 / index.html, og du bør kunne se påloggingsskjermen.
For å implementere påloggingsprosessen må du håndtere inntastingen onChange hendelse og behold tekstboksverdiene i en tilstandsvariabel. Når brukeren klikker på knappen, bruker du tilstandsvariablene til å lese verdiene for e-postadresse og passord. Så la oss legge til onChange hendelse til tekstboksene:
Definer onChange hendelser i Logg inn komponent:
handleEmailChange (e) this.setState (email: e.target.value) handlePasswordChange (e) this.setState (passord: e.target.value)
Bind de ovenfor definerte hendelsene og tilstandsvariablene i komponentkonstruksjonsmetoden:
konstruktør (rekvisitter) super (rekvisitter); this.handleEmailChange = this.handleEmailChange.bind (dette); this.handlePasswordChange = this.handlePasswordChange.bind (dette); this.state = email: ", passord:";
Definer en ved trykk metode som du vil påkalle på knappen klikk.
signIn () alert ('Epostadresse er' + this.state.email + 'Passord er' + this.state.password); Legg til Ved trykk hendelse til Logg inn knapp.
Lagre endringene ovenfor og start nodeserveren på nytt. Pek nettleseren din til http: // localhost: 7777 / index.html. Skriv inn e-postadressen og passordet og klikk på Logg inn knappen, og du bør kunne se e-postadressen og passordet dukker opp.
Når du har dataene på klientsiden, må du legge inn disse dataene til Node.js server-metoden for å validere brukerinnlogging. For å legge ut dataene, vil du gjøre bruk av et annet skript som heter Axios. Axios er en løftebasert HTTP-klient for nettleseren og Node.js. Inkludere Axios i index.html side.
Inne i Logg inn metode i main.jsx fil, legg til følgende linje med kode for å gjøre en innleggsforespørsel.
axios.post ('/ signin', email: this.state.email, passord: this.state.password) .then (funksjon (svar) console.log (response);) .catch (funksjon ) console.log (feil););Koden gjør en innleggsforespørsel til /Logg inn metode med parametrene vist. Når forespørselen er vellykket, er løftet løst i deretter Ring tilbake. Ved feil, er svaret logget inn i å fange Ring tilbake.
La oss lage en Logg inn metode på Node.js-siden for å validere brukerinnloggingprosessen. I app.js fil, opprett en metode som kalles Logg inn.
app.post ('/ signin', funksjon (req, res) )Du vil gjøre bruk av body-parser modul for å analysere forespørselen som er lagt ut fra React-klientsiden. Installer body-parser modul i prosjektet.
npm installere kroppsparser - lagre
Krever body-parser modul i app.js fil.
var bodyParser = krever ("body-parser");Legg til følgende linje kode for å aktivere JSON parsing.
app.use (bodyParser.json ());
Inne i Logg inn metode, kan du analysere forespørselen som vist:
var user_name = req.body.email; var passord = req.body.password;
Endre Logg inn metode som vist for å validere brukerinnlogging.
app.post ('/ signin', funksjon (req, res) var user_name = req.body.email; var passord = req.body.password; if (user_name == 'admin' && passord == 'admin') res.send ('suksess'); else res.send ('Failure');) Foreløpig har brukerens legitimasjonsbeskrivelser vært hardkodede. Du kan erstatte dette med den aktuelle tjenesten i henhold til dine preferanser.
Når parametrene er blitt analysert, blir de validert mot forventede legitimasjonsbeskrivelser. Hvis det er sant, blir en vellykket melding sendt, ellers blir en feilmelding returnert.
Lagre endringene ovenfor og start om Node.js-serveren. Skriv inn et gyldig brukernavn og passord og klikk på påloggingsmetoden. Basert på legitimasjonene, vil det returnere en suksess eller feilmelding, som vil bli vist i nettleserkonsollen.
Prosessen med å opprette brukerregistreringsvisningen er ganske lik hvordan du implementerte brukerinnloggingsmodulen. La oss begynne med å opprette Melde deg på komponent i main.jsx fil.
klasse registrering utvider React.Component render () return ()
Siden påmelding og pålogging er to forskjellige komponenter, må du koble de to komponentene. Med hensyn til ruting vil du gjøre bruk av reagere-router. Hvis du er ny til å rutere i React, vil jeg anbefale å lese React routing-opplæringen.
Inkludere reagere-router i index.html side.
Definer ønsket reagere-router variabler for å opprette linker i main.jsx fil.
var Router = window.ReactRouter.Router; var Route = window.ReactRouter.Route; var hashHistory = window.ReactRouter.hashHistory; var Link = window.ReactRouter.Link;
Definer de forskjellige programruter og standardruten som vist nedenfor:
ReactDOM.render (, document.getElementById ( 'app'));
Inkluder en kobling til påloggingsdelen i påmeldingskomponenten og omvendt. Her er Logg inn komponentens gjengemetode med påloggingslinken:
gjengivelse () retur ()'Melde deg på'
Lagre endringene ovenfor og start om Node.js-serveren. Pek nettleseren din til http: // localhost: 7777 / index.html, og du bør kunne se påloggingsskjermen med påloggingslinken. Klikk på påloggingslenken, og du bør navigere til påmeldingsskjermen.
Implementering av brukerregistrering ligner på hvordan du implementerte brukerinnlogging. Jeg lar brukeroppføringen bli gjennomført som en øvelse. Jeg legger inn implementering av brukeropplysning i neste del av denne opplæringsserien.
I denne delen av opplæringsserien opprettet og implementerte du påloggingsskjermen. Du så også hvordan du skal bruke reagere-router å implementere ruting i React. I neste del av denne opplæringen ser du hvordan du implementerer registreringsdelen og siden Legg til innlegg.
Kildekode fra denne opplæringen er tilgjengelig på GitHub.
Gi oss beskjed om dine tanker og forslag i kommentarene nedenfor.
