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.
npm install -g create-react-app
Ardından aşağıdaki satır ile animal-clinik uygulamasını oluşturalım
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 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.
.App {
text-align: center;
width: 600px;
height: 300px;
padding: 20px;
background-color: rgb(206, 226, 235);
position: relative;
margin: auto;
}
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.
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;
State’imizi AnimalList componentinde oluşturacağım.
state ={
AnimalListArray: [
{
name:"Pamuk",
catBreeds:"British"
}
]
}
Ardından AnimalListArray döngüye koyup listeleme işlemi yapacağız.
AnimalList
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
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.
addAnimals =(ListArray)=>{
const {AnimalListArray} =this.state
AnimalListArray.push(ListArray);
this.setState({
AnimalListArray
})
}
fonksiyonumuzu AddForma prop olarak veriyoruz.
<AnimalForm addAnimals={this.addAnimals}/>
AddForm da bu propu fonksiyon olarak karşılamamız gerekiyor.
static PropTypes = {
addAnimals:PropTypes.func
}
AnimalForm da Formun onSubmit eventına “this.onSubmit” demeliyiz
<Form onSubmit={this.onSubmit}>
App.js
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 🙂