www.carecom.de:n luominen

www.carecom.de on universaali (isomorfinen) React-yhden sivun sovellus (SPA), joka käyttää Reduxia, React-Routeria, TypeScriptiä, Bootstrapia ja ASP.NET Core -taustajärjestelmää.

Se perustuu erinomaiseen Microsoft ASP.NET Core JavaScript Services -projektiin. Osa laajennuksista tulee GitHubin loistavalta yhteisöltä, osan olen toteuttanut itse:

• Monitenanttituki, jotta voin helposti hyödyntää kaikkea tätä hyvyyttä asiakkaideni hyväksi
• Lokalisointi (asiakas & palvelin)
• Metatagit ja otsikot
• Lisätty Google Analytics -komponentti
• Lisätty Google Ads -komponentti
• Lisätty evästevaroituskomponentti
• Lisätty brutto-/nettohinnan vaihtokomponentti
• Lisätty perustodennuksen tuki
• Lisätty modaalidialogikomponentti
• Lisätty yhteydenottolomakekomponentti
• Lisätty koodinmuotoilukomponentti
• Lisätty pehmeän vierityksen / ankkuriin vierityksen komponentti
• Sitemap.xml
• "Globaalin tilan" siirto palvelimen ja asiakkaan välillä
• Parannettu evästeiden käsittely
• Sisäkkäiset redux-reducerit
• ...

Ajan myötä täydennän tätä blogikirjoitusta käsittelemällä sovelluksen suunnittelua tarkemmin. Taustalla olevien teknologioiden selittäminen ei kuulu tämän kirjoituksen piiriin.

Toistaiseksi tämä on lähinnä alustus tulevalle.

Pidän siitä:

• kuinka helpoksi Redux tekee uudelleenkäytettävien komponenttien luomisen – tai vain komponenttien luomisen lennossa, kuten:

  let PhotographySlider = (props) =>
          <Slider id="PhotographySlider" baseUrl="/tenants/carecom/images/photography/slides/" fromNr={1} toNr={42} />

• ES6:n tyylikkyys, kuten olioiden purkaminen:

  

• …

Katsotaanpa osaa sivuston React-pääasettelukomponentista (kirjoitettu JSX:llä; {}-koodi on TypeScriptiä):

        return <div className="layoutContainer">
            <DocumentMeta {...getMeta()} />

            <NavMenu userId={this.props.userId} isLoggedIn={this.props.isLoggedIn} onLogout={this.props.onLogout} />
            {this.props.slider}

            <main className='container mainLayoutContainer'>
                {
                    breadCrumb &&
                    <div className='row hidden-xs hidden-sm'>
                        <div className='col-md-6 breadCrumb'>{breadCrumb}</div>
                    </div>
                }
                
                {
                    title &&
                    <div className='row'>
                        <header className={`col-md - ${(side ? 0 : 3) + (translations ? 6 : 9)} col-xs - ${ translations ? 9 : 12 } `}>
                            <h1>{title}</h1>
                        </header>

                        {
                            translations &&
                            <div className='col-xs-3 translations'>
                                <span className='glyphicon glyphicon-flag'></span>&nbsp;{translations}
                            </div>
                        }
                    </div>
                }

                <div className='row'>
                    <div className={`col- md - ${side ? 9 : 12 }`} role='main'>{ this.props.body }</div>

                    {
                        side &&
                        <aside className='col-md-3'>{ side }</aside>
                    }
                </div>

            </main>

            <footer>
                <BottomMenu />
                <Footer />
            </footer>
        </div>

DocumentMeta (lähteestä React Document Meta) varmistaa, että tiedot kuten title, description ja meta-tagit liitetään tätä asettelua käyttävään komponenttiin. getMeta() on apumoduulista, joka hakee nykyisen reitin metatiedot.

Murupolku, otsikko ja käännökset (linkit reitin muunkielisiin versioihin) renderöidään vain, jos nykyinen reitti tarjoaa ne.

export default (
    <Route path='/' component={Layout}>
        { /* de */ }
        <IndexRoute components={EnhHomeComp} />

        <Route path="de">
            <IndexRoute components={EnhHomeComp} />
          
            <Route path='consulting'>
                <IndexRoute components={{ body: Consulting, side: ConsultingQuotation }} />
                <Route path='informatiker' components={{ body: ComputerScientist, side: SideHaraldMuehlhoff }} />
                <Route path='referenzen' components={{ body: ConsultingReferences }} />
                <Route path='remote-support' components={{ body: RemoteSupport, side: SideHaraldMuehlhoff }} />
            </Route>

            <Route path='distribution'>
                <IndexRoute components={{ body: Distribution, side: DistributionQuotation }} />
                <Route path='referenzen' components={{ body: DistributionReferences }} />
                <Route path='selbstbedienung' components={{ body: SelfService }} />
            </Route>

Esim. jokaisella Routella ei ole side-komponenttia. Tämä vaikuttaa sovellettuihin bootstrap-tyyleihin (className={`col-md-${side ? 9 : 12}`}).