Aan de slag met Material-UI for React (Material Design for React)

Dit bericht is eerst gepubliceerd op CodingTheSmartWay.com.

Abonneren op YouTube | Live demo | Code op GitHub

Material Design is een ontwerptaal ontwikkeld in 2014 door Google en is erg populair voor web- en mobiele applicaties.

Material Design is geïnspireerd op de fysieke wereld en zijn structuren, inclusief hoe ze licht reflecteren en schaduwen werpen. Materiële oppervlakken stellen het medium papier en inkt opnieuw voor.

Met de componenten uit de Material-UI-bibliotheek is het heel eenvoudig om Material Design-elementen in uw React-web- of mobiele applicatie te gebruiken. De website van de bibliotheek is te vinden op: https://material-ui.com.

In deze zelfstudie leert u hoe u de materiaal-UI instelt en gebruikt in uw React-webapplicatie. We beginnen vanaf nul en bouwen een echte voorbeeldtoepassing vanaf de grond op.

Wat we in deze tutorial gaan inbouwen

In deze zelfstudie leert u hoe u de Material-UI-bibliotheek in uw React-toepassing kunt gebruiken. Door de stappen te volgen, leert u hoe u de volgende voorbeeldtoepassing van begin tot eind kunt bouwen:

Zoals u kunt zien, bestaat de gebruikersinterface uit materiaalontwerpelementen. We gebruiken Material-UI-componenten om een ​​lijst met cursussen aan de gebruiker weer te geven. De applicatie bestaat uit een navigatiebalk bovenaan met de titel van de applicatie, een tekstveld dat kan worden gebruikt om een ​​volledige tekstzoekactie voor cursussen te starten en een responsief raster dat de cursusresultaten bevat.

De cursussen worden opgehaald uit de CMS back-end Contentful (https://www.contentful.com/).

Het React-project instellen

Eerst moeten we een nieuw React-project opzetten. Dit kan op de volgende manier met het create-react-app-script:

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

Met behulp van de opdracht npx (die deel uitmaakt van de installatie van Node Package Manager (NPM), kunnen we create-react-app uitvoeren zonder dat we deze eerst moeten downloaden en installeren.

Na het uitvoeren van deze opdracht is een nieuwe projectmap react-material-ui beschikbaar. Ga naar de nieuwe projectmap en u zult het React-startersproject vinden.

Materiaal-UI-bibliotheek en afhankelijkheden installeren

Vervolgens moeten we verdere afhankelijkheden installeren. Door de volgende opdracht te gebruiken, zorgen we ervoor dat de Material-UI-bibliotheek is geïnstalleerd:

$ npm install @ material-ui / core

Vervolgens moeten we de Contentful JavaScript-bibliotheek installeren om toegang te krijgen tot de Contentful-backend:

$ npm installatie inhoudsvol

Laten we proberen of alles werkt door de ontwikkelingswebserver te starten met

$ npm start

De browser wordt geopend, de startpagina van de standaard React-toepassing is geladen en u zou de volgende uitvoer in de browser moeten kunnen zien:

Nu zijn we klaar om de voorbeeldtoepassing te implementeren, dus laten we beginnen.

De voorbeeldtoepassing implementeren

De standaardinhoud verwijderen

Het eerste dat moet worden gedaan, is het verwijderen van sommige delen van de standaardimplementatie. Open eerst het bestand src / App.js en pas de volgende wijzigingen toe:

  • Verwijder de JSX-code die beschikbaar is in de retourverklaring
  • Verwijder de importverklaring die wordt geïmporteerd vanuit ./logo.svg (u kunt dit bestand ook verwijderen omdat het niet langer nodig is).

Nu zijn we klaar om onze eigen code aan het project toe te voegen.

NavBar-component implementeren

Laten we eerst een navigatiebalk toevoegen aan onze applicatie. De code die nodig is om de navigatiebalk weer te geven met behulp van Material Design-componenten uit de Material-UI-bibliotheek, is toegevoegd in een ander component. Om die nieuwe component te implementeren, maakt u een nieuwe submapcomponenten in directory src en voegt u een nieuw bestand NavBar.js toe. Voer de volgende code in het nieuwe bestand in:

importeren Reageren van 'reageren'
AppBar importeren uit '@ material-ui / core / AppBar'
werkbalk importeren uit '@ material-ui / core / Toolbar'
typografie importeren uit '@ material-ui / core / Typography'
const NavBar = () => {
    return (
        
                                                       React & Material-UI Sample Application                                                     ) }
standaard NavBar exporteren;

Hier gebruiken we de component AppBar, Toolbar en Typography uit de Material-UI-bibliotheek om de navigatiebalk uit te voeren zoals eerder getoond. Om NavBar in onze hoofdapp van de applicatie te kunnen opnemen, moeten we ervoor zorgen dat NavBar wordt geëxporteerd.

Nu zijn we klaar om NavBar te importeren in src / App.js:

import React, {Component} van 'react'
NavBar importeren uit './components/NavBar'
class-app breidt component {
  render () {
    terug (
      
                    )   } }
standaard app exporteren

De tag wordt in de JSX-code ingevoegd, zodat de navigatiebalk deel uitmaakt van de uitvoer.

Onderdeel CourseList implementeren

Vervolgens voegen we nog een component toe aan onze applicatie: CourseList. Voeg een nieuw bestand met de naam CourseList.js toe in de map src / components en voeg de volgende code in:

import React, {Component} van 'react'
raster importeren uit '@ material-ui / core / Grid';
import TextField van '@ material-ui / core / TextField';
import * als contentful van 'contentful'
import cursus uit '../components/Course'
const SPACE_ID = '[CONTENTFUL SPACE ID INVOEGEN]'
const ACCESS_TOKEN = '[CONTENTFUL ACCESS TOKEN INVOEGEN]'
const client = contentful.createClient ({
    spatie: SPACE_ID,
    accessToken: ACCESS_TOKEN
})
class CoursesList breidt component {
    staat = {
        cursussen: [],
        searchString: ''
    }
    constructor () {
        super()
        this.getCourses ()
    }
    getCourses = () => {
        client.getEntries ({
            content_type: 'course',
            zoekopdracht: this.state.searchString
        })
        .then ((antwoord) => {
            this.setState ({courses: response.items})
            console.log (this.state.courses)
        })
        .catch ((error) => {
          console.log ("Fout opgetreden tijdens het ophalen van vermeldingen")
          console.error (fout)
        })
    }
    onSearchInputChange = (event) => {
        console.log ("Zoeken gewijzigd ..." + event.target.value)
        if (event.target.value) {
            this.setState ({searchString: event.target.value})
        } anders {
            this.setState ({searchString: ''})
        }
        this.getCourses ()
    }
    render () {
        terug (
            
                {this.state. courses? (                     
                                                                              {this.state.courses.map (currentCourse => (                                                                                                                                    ))}                                                               ): "Geen cursussen gevonden"}                      )     } }
standaard CoursesList exporteren;

Dit onderdeel is verantwoordelijk voor het ophalen van cursusgegevens van de Contentful back-endservice en voor het weergeven van de lijst met cursussen aan de gebruiker.

Eerst wordt de verbinding met Contentful tot stand gebracht met behulp van de Contentful JavaScript-bibliotheek. Om de verbinding tot stand te brengen, moet u zich aanmelden bij de Contentful back-end (https://be.contentful.com/login), een nieuwe ruimte maken, een cursusmodel invoegen zoals u kunt zien in de volgende schermafbeelding en toegang krijgen tot de ruimte ID en toegangstoken vanuit de Space-instellingen - API-sleutels.

Om toegang te krijgen tot die waarden moet u een nieuwe sleutel maken door te klikken op de knop API-sleutel maken. Beide waarden - spatie-ID en toegangstoken moeten worden gekopieerd en ingevoegd in de tekenreeks die is toegewezen aan de constanten SPACE_ID en ACCESS_TOKEN.

Beide constanten worden gebruikt om de back-end-verbinding tot stand te brengen met behulp van de volgende coderegels:

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

De verbinding met de Contentful-ruimte wordt opgeslagen in de client. Om de lijst met cursussen uit deze verbinding op te halen, wordt de methode getCourses toegevoegd aan de componentklasse:

getCourses = () => {
        client.getEntries ({
            content_type: 'course',
            zoekopdracht: this.state.searchString
        })
        .then ((antwoord) => {
            this.setState ({courses: response.items})
            console.log (this.state.courses)
        })
        .catch ((error) => {
          console.log ("Fout opgetreden tijdens het ophalen van vermeldingen")
          console.error (fout)
        })
    }

Het verzoek om de lijst met cursussen van Contentful op te halen, wordt gedaan door de methode client.getEntries aan te roepen. Deze methode verwacht een configuratieobject als parameter te krijgen. Dit configuratieobject moet twee eigenschappen bevatten:

  • content_type: het Contentful-inhoudstype dat moet worden opgevraagd. In ons geval: natuurlijk.
  • zoekopdracht: het is mogelijk om een ​​volledige tekstzoekopdracht uit te voeren in alle tekst- en symboolvelden met de zoekopdrachtparameter. De waarde die aan deze eigenschap is toegewezen, is beschikbaar in this.state.searchString. Deze statuseigenschap wordt elke keer bijgewerkt wanneer de gebruiker de waarde van het zoekinvoerveld wijzigt.

Omdat de aanroep van getEntries een asynchrone bewerking is, wordt er een belofte geretourneerd, zodat we via het gebruik verbinding kunnen maken met het resultaat. Binnen de toenmalige methode is de lijst met cursussen beschikbaar in response.items. Die items worden opgeslagen in de cursuseigenschap van de staat van het onderdeel.

De uitvoer van het onderdeel wordt bepaald door de JSX-code die wordt geretourneerd door de rendermethode:

render () {
        terug (
            
                {this.state. courses? (                     
                                                                              {this.state.courses.map (currentCourse => (                                                                                                                                    ))}                                                               ): "Geen cursussen gevonden"}                      )     }

Hier maken we gebruik van twee Material-UI-componenten: TextField en Grid. Beide componenten worden alleen aan de uitvoer toegevoegd als er cursusitems beschikbaar zijn in this.state.ourses. In dit geval kan de gebruiker het TextField gebruiken om een ​​vrije tekstzoekactie te starten. Als de waarde van het tekstveld verandert, wordt de methode onSearchInputChange aangeroepen en wordt de eigenschap searchString van het statusobject bijgewerkt met die nieuwe waarde.

De component Materiaal-UI-raster wordt gebruikt om de cursussen weer te geven in een rasterlay-out die reageert op de schermgrootte. De uitvoer voor een specifieke cursus wordt gegenereerd door het aangepaste cursusonderdeel dat in de volgende stap wordt geïmplementeerd. De huidige koers wordt via de parameter parameter aan dit onderdeel overgedragen.

Nogmaals, we moeten het CourseList-onderdeel in App.js importeren en toevoegen:

import React, {Component} van 'react'
NavBar importeren uit './components/NavBar'
import CoursesList van './components/CoursesList'
class-app breidt component {
  render () {
    terug (
      
                             )   } }
standaard app exporteren

Onderdeel cursus implementeren

Laten we nu het cursusonderdeel implementeren. Maak een nieuw bestand Course.js in map src / componenten en voer de code in uit de volgende lijst:

importeren Reageren van 'reageren'
Kaart importeren uit '@ material-ui / core / Card'
CardActions importeren uit '@ material-ui / core / CardActions'
CardContent importeren uit '@ material-ui / core / CardContent'
import CardMedia van '@ material-ui / core / CardMedia'
knop importeren uit '@ material-ui / core / Button'
typografie importeren uit '@ material-ui / core / Typography'
const Course = (props) => {
    console.log (props)
    return (
        
            {props.course? (                                                                                                         {} Props.course.fields.title                                                                   {} Props.course.fields.description                                                                                    
standaardcursus exporteren

Omdat de huidige cursus als een eigenschap wordt overgedragen, hebben we via props.course toegang tot de gegevens van de cursus. Als er gegevens beschikbaar zijn, wordt de cursus weergegeven met behulp van het kaartonderdeel uit de materiaal-UI-bibliotheek. Verder maken we gebruik van de volgende Material Design-componenten: CardActions, CardContent, CardMedia, Button en Typography.

Nadat de implementatie is voltooid, zou onze applicatie nu het eindresultaat moeten uitvoeren, zoals getoond aan het begin van deze tutorial.

Gevolgtrekking

Door de Material-UI-componentenbibliotheek te gebruiken, is het eenvoudig om de output van uw React-applicatie te verbeteren met Material Design van Google. In deze zelfstudie hebt u geleerd hoe u materiaal-UI kunt instellen en gebruiken in uw React-project en een realistische voorbeeldtoepassing vanuit het niets kunt implementeren.

Dit bericht is eerst gepubliceerd op CodingTheSmartWay.com.

# 1 React - The Complate Guide

Duik erin en leer vanuit het niets reageren! Leer Reactjs, Redux, React Routing, Animaties, Next.js basics en nog veel meer!
Ga naar cursus ...

Disclaimer: dit bericht bevat affiliatielinks, wat betekent dat als ik op een van de productlinks klik, ik een kleine commissie ontvang. Dit helpt deze blog te ondersteunen!