ReactBlogResimler







Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Laravel & React 4

Resim
Bu bölümde axios ile api ya ulaşıp http istekleri yapacağız. Yeni bir component oluşturup. Constructarda bir initial state tanımlayıp componentwillMount yaşam döngüsü ile state mizi dolduracağız. D:\WorkSpace\Tutorals\Laravel\react-lara> npm install axios --save Komutu ile öncelikle projemize axios kütüphanesini dahil ediyoruz. Ardından yeni bir component oluşturuyoruz. Constructor methodumda initState yi tanımlıyorum. constructor (){ super (); this .state = { blog :[] } console . log ( super ()); } ardından Componentwillmount ile apimıza istek atacağız. Bu method hem server hemde client oluşturulmadan önce çalıştırılır. ComponentDidMount ise ilk çalışmanın ardından sunucu tarafından çalıştırılır. componentWillMount () { axios . get ( '/api/blog' ). then ( response => { this . setState ({ blog : response .data }) }). catch ( err => { ...
Devamı

React JS Yazalım 1

Resim
Parent componentini Child1 ve Child2 componenti ile güncelleyelim. Reactda state güncelleme işlemi yapacağız. Parent componentim name ve password alanlarımdan oluşuyor. Name inputum child1 componentimde. Password inputum ise  child2 componentimde. Yavru komponentlerimin state tutmadan direk ata komponentimi güncellemelerini istiyorum bunun içinde iki tane yöntem ile yapabilirim 1. yöntem parent komponentimde child komponentimi çağırırken props olarak parent komponentimin methodunu child komponentime göndermem. 2. yöntem ise üst scope da method tanımlayıp bunu child komponentimde ulaşmak. import React , { Component } from " react " ; class Child1 extends Component { render () { this . state = { name : "" } return ( < div > < label > Name: </ label > < br /> < input type = " text " placeholder = " Name " onChange = { e => this . prop...
Devamı

Laravel & React 5

Resim
Bu bölümde applicationumuza react-reouter kütüphanesini ekleyip basit route işlemlerini ön tarafata yapacağız. npm install react-router-dom projeme dahil ediyorum. Bir başka terminal banch i açarak npm run watch komutunu çalıştıracağım. Bu komut bizim için ön tarafdaki değişiklikleri izleyecek ve bundle aktaracak.Bundle yığın anlamına geliyor için gerek js doslarım vs bulunuyor. WepPack bunları ihtiyaç haline göre derliyor. resource/js/app.js componentimi modifiye edeceğim. require ( './bootstrap' ); import React from 'react' ; import { render } from 'react-dom' ; import { Router , Route , browserHistory } from 'react-router' ; import Example from './components/Example' ; render ( < Example /> , document . getElementById ( 'example' )); Bu şekilde modifiye ettik. example id sine sahip html elementini Example componenti ile Dom edeceğim diyorum. Şimdi example componentimizi biraz daha düzenleyelim. ...
Devamı