React Frontend

Last updated 8 days ago

Burada React'ı iCodeBetter içerisinde nasıl kullanacağını gösteriyoruz (iCodeBetter'ın frontend ve backend servislerini). React hakkında daha fazla bilgi için React Docs sayfasına gidebilirsiniz.

iCodeBetter'ın React Component'larını anlatmadan önce biraz React anlatacağız. Yukarıdaki menüden New Editor a tıklıyoruz ve Frontend Page seçiyoruz. Bu React kodunu yazıyoruz.

return React.createElement('div', {},
React.createElement('label', {}, 'name'),
React.createElement('input', {})
);

Bu yazdığımız basit React kodunun HTML karşılığı:

<div>
<label>name</label>
</input >
</div>

Custom React component yazıyoruz

var myInput = () => {
return React.createElement('div', {},
React.createElement('label', {}, 'name'),
React.createElement('input', {})
);
}
return React.createElement('div', {},
React.createElement(myInput, {})
);
var myInput = (props) => {
return React.createElement('div', {},
React.createElement('label', {}, props.label),
React.createElement('input', {})
);
}
return React.createElement('div', {},
React.createElement(myInput, { label: 'name1' }),
React.createElement(myInput, { label: 'name2' })
);
var myInput = (props) => {
return React.createElement('div', {},
React.createElement('label', {}, props.label),
React.createElement('input', {})
);
}
var array = ['name', 'surname']
return React.createElement('div', {},
array.map((item) => {
return React.createElement(myInput, { label: item });
}),
React.createElement('button', {
onClick: () => { alert('Buton tiklandi') }
}, 'kaydet')
);

save yapıyoruz ve pages sayfasında gostermek...