Arayüz Hazırlığı - UI

Stil ve şablon için Google Material Design Lite kullanacağım.

https://getmdl.io/components/index.html

Head taglarımıza yazıyoruz.

//src/index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

import edeceğimiz repo

https://github.com/react-mdl/react-mdl

Componentlerin Gösterimi

https://react-mdl.github.io/react-mdl/

Paketimizi ekliyoruz...

npm install --save react-mdl

//src/app/index.js

bu dosya material şablonun genel event'leri için

...
import 'react-mdl/extra/material.js';
...

//src/app/index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
    Button, Card, CardText, CardTitle, CardActions, CardMenu, IconButton,
    Drawer, Layout, Header, Navigation, Textfield, Cell, Grid
} from 'react-mdl';
import 'react-mdl/extra/material.js';

class App extends Component {

    render() {
        return (
            <div>
                <Layout fixedHeader fixedDrawer>
                    <Header title="Başlık">
                        <Textfield
                            value=""
                            onChange={() => { }}
                            label="Search"
                            expandable
                            expandableIcon="search"
                        />
                    </Header>
                    <Drawer title="Title">
                        <Navigation>
                            <a href="">Link</a>
                            <a href="">Link</a>
                            <a href="">Link</a>
                            <a href="">Link</a>
                        </Navigation>
                    </Drawer>
                    <Grid className="demo-grid-1">
                        <Cell col={4}>

                            <Card shadow={2} style={{ width: '512px', margin: 'auto' }}>
                                <CardTitle style={{ color: '#fff', height: '176px', background: 'url(http://www.getmdl.io/assets/demos/welcome_card.jpg) center / cover' }}>Merhaba Dunya</CardTitle>
                                <CardText>
                                    Burada bir şeyler yazabilir...
                                </CardText>
                                <CardActions border>
                                    <Button colored>Get Started</Button>
                                </CardActions>
                                <CardMenu style={{ color: '#fff' }}>
                                    <IconButton name="share" />
                                </CardMenu>
                            </Card>


                        </Cell>
                        <Cell col={4}></Cell>
                        <Cell col={4}></Cell>
                    </Grid>
                </Layout>
            </div>
        )
    }
}

ReactDOM.render(
  < App />,
  document.getElementById('app')
);

Arayüzden bir görüntü..