Çoklu Component

Artık Components havuzumuzu oluşturalım..

cd src/app
mkdir components
echo bombos > Cardlar.js

//src/app/components/Cardlar.js

(APP) index.js içinden Cardlar.js içine taşındı.

import React, { Component } from 'react';
import {
 Button, Card, CardText, CardTitle, CardActions, CardMenu, IconButton
} from 'react-mdl';

class Cardlar extends Component {
    render() {
        return (
            <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>Tıkla Bana</Button>
                </CardActions>
                <CardMenu style={{ color: '#fff' }}>
                    <IconButton name="share" />
                </CardMenu>
            </Card>
        );
    }
}

export default Cardlar;

//src/app/index.js içine yeni oluşturulan Cardlar.js componentini import ediyoruz..

import Cardlar from './components/Cardlar';

//grid içerisinde bir alana yerleştirdim


<Grid className="demo-grid-1">
    <Cell col={4}>
    ....
        <Cardlar />
    .....
    </Cell>
    <Cell col={4}></Cell>
    <Cell col={4}></Cell>
</Grid>

(imaj) 4.satır ve 31.satır