Kom godt i gang med Material-UI til reaktion (Materialdesign til reaktion)

Dette indlæg er først blevet offentliggjort på CodingTheSmartWay.com.

Abonner på YouTube | Live demo | Kode på GitHub

Material Design er et designsprog udviklet i 2014 af Google og er meget populært til web- og mobilapplikationer.

Materialedesign er inspireret af den fysiske verden og dens strukturer, herunder hvordan de reflekterer lys og støber skygger. Materialeoverflader genimaginerer medierne papir og blæk.

Med komponenterne fra Material-UI-biblioteket er det meget nemt at bruge Material Design-elementer i din React-web eller mobilapplikation. Bibliotekets websted kan findes på: https://material-ui.com.

I denne tutorial lærer du, hvordan du opsætter og bruger Material-UI i din React-webapplikation. Vi starter fra bunden og bygger en prøveeksempel fra den virkelige verden fra bunden af.

Hvad vi skal bygge i denne selvstudie

I denne tutorial lærer du, hvordan du bruger Material-UI-biblioteket i din React-applikation. Ved at følge trinnene lærer du, hvordan du bygger følgende eksempelprogram fra start til slut:

Som du kan se, brugergrænsefladen består af materiale designelementer. Vi bruger Material-UI-komponenter til at vise en liste over kurser for brugeren. Programmet består af en navigationsbjælke øverst, der indeholder applikationens titel, et tekstfelt, der kan bruges til at starte en fuldtekstsøgning efter kurser og et responsivt gitter, der indeholder kursusresultaterne.

Kurserne hentes fra CMS back-end Contentful (https://www.contentful.com/).

Opsætning af React-projektet

Først skal vi opsætte et nyt React-projekt. Dette kan gøres ved at bruge create-react-app-scriptet på følgende måde:

$ npx create-react-app react-material-ui

Ved at bruge npx-kommandoen (som er en del af Node Package Manager (NPM)) -installationen, er vi i stand til at udføre create-react-app uden behovet for at downloade og installere den først.

Efter at have udført denne kommando er et nyt projektmappe react-material-ui tilgængeligt. Skift til den nyligt oprettede projektmappe, så finder du React-startprojektet.

Installation af materiale-UI-bibliotek og afhængigheder

Derefter skal vi installere yderligere afhængigheder. Ved at bruge følgende kommando sørger vi for, at Material-UI-biblioteket er installeret:

$ npm installer @ material-ui / core

Dernæst skal vi installere Contentful JavaScript-biblioteket for at kunne få adgang til Contentful-backend:

$ npm installeres indholdsfuldt

Lad os prøve, om alt fungerer ved at starte udviklingswebserveren med

Start af $ npm

Browsen åbnes, startsiden for standardreaktion-applikationen indlæses, og du skal være i stand til at se følgende output i browseren:

Nu er vi klar til at implementere eksempelprogrammet, så lad os komme i gang.

Implementering af prøveansøgningen

Sletning af standardindholdet

Den første ting, der skal gøres, er at slette nogle dele af standardimplementeringen. Åbn først filen src / App.js og anvend følgende ændringer:

  • Slet den JSX-kode, der er tilgængelig i returnerklæringen
  • Slet den importangivelse, der importeres fra ./logo.svg (du kan også slette denne fil, da den ikke længere er nødvendig).

Nu er vi klar til at tilføje vores egen kode til projektet.

Implementering af NavBar-komponent

Lad os først tilføje en navigationslinje til vores applikation. Koden, der er nødvendig for at få vist navigationslinjen ved hjælp af Material Design-komponenter fra Material-UI-biblioteket tilføjes i en anden komponent. Hvis du vil implementere den nye komponent, skal du oprette en ny undermappekomponenter i katalog src og tilføje en ny fil NavBar.js. Indsæt følgende kode i den nyligt oprettede fil:

import React fra 'react'
importer AppBar fra '@ material-ui / core / AppBar'
import værktøjslinje fra '@ material-ui / core / Toolbar'
importer typografi fra '@ material-ui / core / typography'
const NavBar = () => {
    Vend tilbage(
        
                                                       React & Material-UI-prøveansøgning                                                     ) }
eksport standard NavBar;

Her bruger vi AppBar, Toolbar og Typography-komponenten fra Material-UI-biblioteket til at udsende navigationslinjen, som vist før. For at være i stand til at inkludere NavBar i vores hovedapplikationskomponent-app er vi nødt til at sikre, at NavBar eksporteres.

Nu er vi klar til at importere NavBar i src / App.js:

import React, {Component} fra 'react'
importer NavBar fra './components/NavBar'
klasse App udvider komponent {
  render () {
    Vend tilbage (
      
                    )   } }
eksporter standardapp

-taggen indsættes i JSX-koden, så navigationslinjen vil være en del af output.

Implementering af CourseList-komponent

Dernæst tilføjer vi en anden komponent til vores applikation: CourseList. Tilføj en ny fil med navnet CourseList.js i mappen src / komponenter, og indsæt følgende kode:

import React, {Component} fra 'react'
import Grid fra '@ material-ui / core / Grid';
import TextField fra '@ material-ui / core / TextField';
import * som indholdsmæssigt fra 'indholdsfuld'
importkursus fra '../components/Course'
const SPACE_ID = '[INDSÆT INDHOLDSFORTE SPACE-ID]'
const ACCESS_TOKEN = '[INDSÆT INDHOLDSFORTILGANG TIL TOKEN]'
const client = contentful.createClient ({
    plads: SPACE_ID,
    accessToken: ACCESS_TOKEN
})
klasse KurserListe udvider komponent {
    tilstand = {
        kurser: [],
        searchString: ''
    }
    konstruktør () {
        super()
        this.getCourses ()
    }
    getCourses = () => {
        client.getEntries ({
            content_type: 'kursus',
            forespørgsel: this.state.searchString
        })
        .then ((svar) => {
            this.setState ({kurser: respons.items})
            console.log (this.state.courses)
        })
        .catch ((fejl) => {
          console.log ("Der opstod en fejl under hentning af poster")
          console.error (fejl)
        })
    }
    onSearchInputChange = (begivenhed) => {
        console.log ("Søgning ændret ..." + event.target.value)
        if (event.target.value) {
            this.setState ({searchString: event.target.value})
        } andet {
            this.setState ({searchString: ''})
        }
        this.getCourses ()
    }
    render () {
        Vend tilbage (
            
                {this.state.courses? (                     
                                                                              {this.state.courses.map (currentCourse => (                                                                                                                                    ))}                                                               ): "Ingen kurser fundet"}                      )     } }
eksport standard CoursesList;

Denne komponent er ansvarlig for at hente kursusdata fra den indholdsfulde back-end-tjeneste og vise listen over kurser til brugeren.

Først oprettes forbindelsen til Contentful ved hjælp af Contentful JavaScript-biblioteket. For at etablere forbindelsen skal du logge på Contentful back-end (https://be.contentful.com/login), oprette en ny plads, indsætte en kursusmodel som du kan se i følgende skærmbillede og få adgang til Space ID og adgangstoken fra mellemrumsindstillingerne - API-nøgler.

For at få adgang til disse værdier skal du oprette en ny nøgle ved at klikke på knappen Opret API-nøgle. Begge værdier - Space ID og Access Token skal kopieres og indsættes i den streng, der er tildelt SPACE_ID og ACCESS_TOKEN konstanter.

Begge konstanter bruges til at indlede back-end-forbindelsen ved hjælp af følgende kodelinjer:

const client = contentful.createClient ({
    plads: SPACE_ID,
    accessToken: ACCESS_TOKEN
})

Forbindelsen til det indholdsrige rum gemmes i klienten. For at hente listen over kurser fra denne forbindelse tilføjes metoden getCourses til komponentklassen:

getCourses = () => {
        client.getEntries ({
            content_type: 'kursus',
            forespørgsel: this.state.searchString
        })
        .then ((svar) => {
            this.setState ({kurser: respons.items})
            console.log (this.state.courses)
        })
        .catch ((fejl) => {
          console.log ("Der opstod en fejl under hentning af poster")
          console.error (fejl)
        })
    }

Anmodningen om at hente listen over kurser fra Contentful udføres ved at kalde metoden client.getEntries. Denne metode forventer at få et konfigurationsobjekt som parameter. Dette konfigurationsobjekt skal indeholde to egenskaber:

  • content_type: Den indholdsmæssige indholdstype, der skal spørges. I vores tilfælde: kursus.
  • forespørgsel: Det er muligt at udføre en fuldtekstsøgning på tværs af alle tekst- og symbolfelter med forespørgselsparameteren. Den værdi, der er tildelt denne egenskab, er tilgængelig i this.state.searchString. Denne tilstandsejendom opdateres, hver gang brugeren ændrer værdien af ​​søgningsindtastningsfeltet.

Da opkaldet fra getEntries er en asynkron operation, returnerer det et løfte, så vi kan oprette forbindelse til resultatet ved hjælp af derefter. Inde i den daværende metode er listen over kurser tilgængelig som respons.emner. Disse elementer gemmes i kursens egenskaber i komponentens tilstand.

Komponentens output defineres af JSX-koden, der returneres ved gengivelsesmetoden:

render () {
        Vend tilbage (
            
                {this.state.courses? (                     
                                                                              {this.state.courses.map (currentCourse => (                                                                                                                                    ))}                                                               ): "Ingen kurser fundet"}                      )     }

Her bruger vi to Material-UI-komponenter: TextField og Grid. Begge komponenter føjes kun til output, hvis kursuselementer er tilgængelige i this.state.courses. I dette tilfælde er brugeren i stand til at bruge TextField til at iværksætte en fritekstsøgning. Hvis værdien i tekstfeltet ændrer metoden, kaldes SearchInputChange, og egenskaben searchString for statsobjektet opdateres med den nye værdi.

Material-UI Grid-komponenten bruges til at vise kurserne i et gitterlayout, der svarer til skærmstørrelsen. Outputet til et specifikt kursus genereres af den brugerdefinerede Kursekomponent, der implementeres i det næste trin. Det aktuelle kursus overleveres til denne komponent via kursusparameteren.

Igen har vi brug for at importere og tilføje CourseList-komponent i App.js:

import React, {Component} fra 'react'
importer NavBar fra './components/NavBar'
import CoursesList fra './components/CoursesList'
klasse App udvider komponent {
  render () {
    Vend tilbage (
      
                             )   } }
eksporter standardapp

Implementering af kursuskomponent

Lad os implementere Kursekomponent. Opret en ny fil Course.js i mappen src / komponenter og indsæt koden fra følgende liste:

import React fra 'react'
importer kort fra '@ material-ui / core / Card'
import CardActions fra '@ material-ui / core / CardActions'
importer CardContent fra '@ material-ui / core / CardContent'
importer CardMedia fra '@ material-ui / core / CardMedia'
import knap fra '@ material-ui / core / Button'
importer typografi fra '@ material-ui / core / typography'
const Kursus = (rekvisitter) => {
    console.log (rekvisitter)
    Vend tilbage(
        
            {props.course? (                                                                                                         {Props.course.fields.title}                                                                   {Props.course.fields.description}                                                                                                             Gå til kursus                                                                        ) : nul}              ) }
eksport standardkurs

Da det aktuelle kursus afleveres som en egenskab, har vi adgang til kursets data via props.course. Hvis der er tilgængelige data, vises kurset ved hjælp af kortkomponenten fra Material-UI-biblioteket. Desuden bruger vi følgende materialedesignkomponenter: CardActions, CardContent, CardMedia, Button and Typography.

Efter at have gennemført implementeringen, skal vores applikation nu give det endelige resultat som vist i begyndelsen af ​​denne tutorial.

Konklusion

Ved at bruge Material-UI-komponentbiblioteket er det let at forbedre output fra din React-applikation med Googles materialdesign. I denne tutorial har du lært, hvordan du opsætter og bruger Material-UI i dit React-projekt og implementerer en reel prøveeksempel fra bunden.

Dette indlæg er først blevet offentliggjort på CodingTheSmartWay.com.

# 1 React - Komplet guide

Dyk ind og lær React fra bunden! Lær Reactjs, Redux, React Routing, Animationer, Next.js basics og meget mere!
Gå til kursus ...

Ansvarsfraskrivelse: Dette indlæg indeholder tilknyttede links, hvilket betyder, at hvis du klikker på et af produktlinkene, vil jeg modtage en lille provision. Dette hjælper med at støtte denne blog!