React Form Örneği
Herkese merhabalar,
Bu yazıda react ile Animal-clinic adında basit bir form uygulaması yapacağız. Ben editör olarak Visual Stdio Code ‘u kullanıyorum.
Öncelikle makinanızda Node.js ve npm’in kurulu olması gerekmektedir.
Uygulamanın kodlarına https://github.com/zeynepsit/animalClinic adresinden ulaşabilirsiniz.
Editörümüz(Visual Stdio Code) den View->Terminal’i açtıktan sonra ,aşağıdaki komut satırını yazalım.
|
1
|
npm install -g create-react-app
|
Ardından aşağıdaki satır ile animal-clinik uygulamasını oluşturalım
|
1
|
create-react-app animal-clinik
|
Şimdi ise oluşturduğumuz dosyayı import edelim.
File->OpenFolder sekmesinden dosyamızı import edelim.Ardından terminale “ npm start ” yazarak uygulamamızı ayağa kaldıralım.
Aşağıdaki sayfanın açılması gerekmektedir.
Css ile vakit kaybetmemek adına tema için semantic ui kitini kullanacağız.
Öncelikle terminalimize “ npm i semantic-ui-react semantic ui css --save ” yazalım.
Kurulum sağlandıktan sonra App.js dosyamıza css’i import etmemiz gerekmektedir.
Şimdi App.js ye aşağıdaki css’i import edelim.
"import 'semantic-ui-css/semantic.min.css' "
Componentlerimizi oluşturmak için components adında bir klasör oluşturalım ve ardından
AnimalForm adında ilk componentimizi ekleyelim..
Form componenti için aşağıdaki adresten mavi ve sarı ile çizdiğim bölümleri alalım.
https://react.semantic-ui.com/collections/form/
AnimalForm
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import React, { Component } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
export default class AnimalForm extends Component {
render(){
return(
<Form>
<Form.Field>
<label>Name</label>
<input placeholder='Name' />
</Form.Field>
<Form.Field>
<label>Cat Breeds</label>
<input placeholder='Cat Breeds' />
</Form.Field>
<Button type='submit'>Submit</Button>
</Form>
)
}
}
|
AnimalsForm’un son hali yukarıdaki gibi olmalıdır.
Formumuzu ortalamak için App.css ‘e aşağıdaki kodu ekleyelim.
|
1
2
3
4
5
6
7
8
9
|
.App {
text-align: center;
width: 600px;
height: 300px;
padding: 20px;
background-color: rgb(206, 226, 235);
position: relative;
margin: auto;
}
|
AnimalForm componentimizi App.js içinde kullanacağız.Öncelikle App.js ‘ye AnimalForm’u import etmeliyiz.
App.js nin son hali aşağıdaki gibi olmalıdır.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
import React, { Component } from 'react';
import logo from './logo.svg';
import AnimalForm from './components/AnimalForm';
import './App.css';
import 'semantic-ui-css/semantic.min.css';
class App extends Component {
render() {
return (
<div className="App">
<AnimalForm/>
</div>
);
}
}
export default App;
|
npm start dedikten sonra aşağıdaki ekran açılacaktır.
Form componentinin ardından şimdi sıra AnimalList componentinde.
Semantic.uı ‘ın List.item ve Input componentlerinden faydalacağız.
AnimalList aşağıdaki gibi olmalıdır.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
import React, { Component } from 'react';
import { Input } from 'semantic-ui-react'
import { List } from 'semantic-ui-react'
import App from '../App';
class AnimalList extends Component {
render() {
return (
<div>
<Input fluid icon='search' placeholder='Search...' />
<List horizontal>
<List.Item className={"name"}>
<List.Content>
<List.Header>Pamuk</List.Header>
</List.Content>
</List.Item>
<List.Item className={"catBreeds"}>
<List.Content>
<List.Header>British</List.Header>
</List.Content>
</List.Item>
</List>
</div>
)
}
}
export default AnimalList;
|
<AnimalList/> componentini de App.js ye import etmeliyiz.
Ardından “npm start” diyerek uygulamamızı başlatıyoruz.
Siz dilerseniz tasarımı css ile oynayarak düzenleyebilirsiniz.
Şimdi sıra state oluşturmaya geldi.State uygulamanın herhangi bir yerinde değeri değişen verileri tutar.
State’imizi AnimalList componentinde oluşturacağım.
|
1
2
3
4
5
6
7
8
|
state ={
AnimalListArray: [
{
name:"Pamuk",
catBreeds:"British"
}
]
}
|
Ardından AnimalListArray döngüye koyup listeleme işlemi yapacağız.
AnimalList
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
import React, { Component } from 'react';
import { Input } from 'semantic-ui-react'
import { List } from 'semantic-ui-react'
class AnimalList extends Component {
state ={
AnimalListArray: [
{
name:"Pamuk",
catBreeds:"British"
}
]
}
render() {
return (
<div>
<Input fluid icon='search' placeholder='Search...' />
{
this.state.AnimalListArray.map(ListArray =>
<List horizontal key={ListArray.name}>
<List.Item className={"name"}>
<List.Content>
<List.Header>{ListArray.name}</List.Header>
</List.Content>
</List.Item>
<List.Item className={"catBreeds"}>
<List.Content>
<List.Header>{ListArray.catBreeds}</List.Header>
</List.Content>
</List.Item>
</List>
)
}
</div>
)
}
}
export default AnimalList;
|
Şimdi AnimalForm componentinde state oluşturalım.
AnimalForm
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
import React, { Component } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
export default class AnimalForm extends Component {
state={
name:"",
catBreeds: ""
}
onChange = (event) =>{
this.setState(
{
[event.target.name] : event.target.value,
[event.target.catBreeds] : event.target.value
}
)
}
render(){
return(
<Form>
<Form.Field>
<label>Name</label>
<input placeholder='Name'
name="name"
id="name"
value={this.state.name}
onChange={this.onChange}
/>
</Form.Field>
<Form.Field>
<label>Cat Breeds</label>
<input placeholder='Cat Breeds'
name="catBreeds"
id="catBreeds"
value={this.state.catBreeds}
onChange={this.onChange}/>
</Form.Field>
<Button type='submit'>Submit</Button>
</Form>
)
}
}
|
onChange metoduyla her event tetiklendiğinde setState işlemi yaptık.Bu işlem ile istediğimiz datayı state’imize atmış olduk.
Şimdi App.js sınıfımıza addAnimals adında bir fonksiyon oluşturalım.
|
1
2
3
4
5
6
7
|
addAnimals =(ListArray)=>{
const {AnimalListArray} =this.state
AnimalListArray.push(ListArray);
this.setState({
AnimalListArray
})
}
|
fonksiyonumuzu AddForma prop olarak veriyoruz.
|
1
|
<AnimalForm addAnimals={this.addAnimals}/>
|
AddForm da bu propu fonksiyon olarak karşılamamız gerekiyor.
|
1
2
3
|
static PropTypes = {
addAnimals:PropTypes.func
}
|
AnimalForm da Formun onSubmit eventına “this.onSubmit” demeliyiz
|
1
|
<Form onSubmit={this.onSubmit}>
|
App.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
import React, { Component } from 'react';
import logo from './logo.svg';
import AnimalForm from './components/AnimalForm';
import AnimalList from './components/AnimalList';
import './App.css';
import 'semantic-ui-css/semantic.min.css';
class App extends Component {
state ={
AnimalListArray: [
{
name:"Pamuk",
catBreeds:"British"
}
]
}
addAnimals =(ListArray)=>{
const {AnimalListArray} =this.state
AnimalListArray.push(ListArray);
this.setState({
AnimalListArray
})
}
render() {
return (
<div className="App">
<AnimalList AnimalListArray={this.state.AnimalListArray} />
<AnimalForm addAnimals={this.addAnimals}/>
</div>
);
}
}
export default App;
|
Uygulamanın son hali aşağıdaki gibi olacaktır.
Görüş ,öneri ver sorularınız için adresinden ulaşabilirsiniz.
Keyifli okumalar dilerim 🙂
Leave a reply