sobota 31. března 2018

Jak nastavit title a favicon v React

Jednoduché použití s react-helmet

Pomocí npm naistalujte react-helmet

npm install --save react-helmet

Do úvodu v App.js vložte

import {Helmet} from 'react-helmet'; 
import favicon from '../img/favicon.ico';

V render() stránky pak uveďte:

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="icon" href={favicon} />
            </Helmet>
            ...
        </div>
    );
  }
};



Jak vložit obrázek v React

Přímý odkaz v React nebude fungovat. Obrázek je nunto vložit pomocí importu.

import logoImage from '../img/logoMain.gif';

a pak se na něj odkázat v React komponentě Image:

<Image src={logoImage} />

Jak přidat do React - bootstrap ikonky s počasím

Knihovna ikonek se symboly počasí je na těchto stránkách:

http://erikflowers.github.io/weather-icons/

Nahrajte ikonky jako modul do React aplikace:

npm install --save weather-icons

Do index.js přidejte odkaz na weather-icons:

import 'weather-icons/css/weather-icons.css';

V aplikaci pak použijte class wi wi-............. :

<Button bssize="small" bsstyle="warning"><i class="wi wi-day-storm-showers"></i></Button> 

Výsledek pak vypadá takto: