Kayıt Ol

Giriş

Şifremi Kaybettim

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

soru ekleme

Soru sormak için giriş yapmalısınız.

Giriş

Kayıt Ol

.........

React Form Örneği

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.

Ardından aşağıdaki satır ile animal-clinik uygulamasını oluşturalım

Ş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.
AnimalForm

 

AnimalsForm’un son hali yukarıdaki gibi olmalıdır.

Formumuzu ortalamak için App.css ‘e aşağıdaki kodu ekleyelim.

 

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.

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.

 

<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.

 

Ardından AnimalListArray döngüye koyup listeleme işlemi yapacağız.

AnimalList

 

Şimdi  AnimalForm componentinde state oluşturalım.

AnimalForm

 

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.

 

fonksiyonumuzu AddForma prop olarak veriyoruz.

 

 

AddForm da bu propu fonksiyon olarak karşılamamız gerekiyor.


 

AnimalForm da Formun onSubmit eventına “this.onSubmit” demeliyiz


 

App.js

Uygulamanın son hali aşağıdaki gibi olacaktır.

Görüş ,öneri ver sorularınız için sitzeynep0@gmail.com adresinden ulaşabilirsiniz.

Keyifli okumalar dilerim 🙂

 

 

 

Hakkında Zeynep ŞİT

Namık Kemal Üniversitesi

Leave a reply

*