> For the complete documentation index, see [llms.txt](https://kafkaca.gitbook.io/reactjs-temel-yaklasim/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kafkaca.gitbook.io/reactjs-temel-yaklasim/coklu-component.md).

# Ç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**

![](https://886139218-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LiVKjUjQdEKlES3YeYz%2F-LiVKoBdKrQyCbFCX-GO%2F-LiVKsztG1Ka1pg9NBLo%2Fcoklu-component-import.PNG?generation=1561763222723432\&alt=media)