React.js Props Nedir?

React.js component tabanlı bir javascript kütüphanesidir. Peki bu componentlerdeki dataların akışını nasıl sağlarız. İşte bu soruları sorarken Props ve State dediğimiz kavramlar işin içine giriyor. React.js web dünyasına giriş yaptıktan sonra bu kütüphaneyi kullanan insanlar başlarda bu kavramlara alışamasalar da, zamanla bir çok şeyi daha kolay ve hızlı yaptırmasından ötürü React çok kullanışlı hale geldi. Daha fazla uzatmadan nedir bu props diyip başlayalım anlatmaya.

Props, en basit anlatımla bir componentten başka bir componente veri akışını sağlamak için kullandığımız keywordtür. Ama unutmamız gereken en önemli şey propslar Read-Only(sadece okunabilir) olmasıdır. Bir componentten diğer componente veri göndermek istediğimizde {this.props} etiketini kullanırız. Props kullanımını biraz daha anlamak adına aşağıdaki kodlara bakalım.

index.js —


import React from 'react';
import ReactDOM from 'react-dom';
import CommentDetail from './CommentDetail';

const App = () => {
return(
<div>
<CommentDetail
author="Jane"
timeAgo="Today at 1:00pm"
blogText="Nice test post !"
/>
</div>
);
};

ReactDOM.render(<App />, document.querySelector('#root'));



CommentDetail.js—

import React from 'react';

const CommentDetail = (props) => {
return(
<div className="content">
<a href="/" className="author"> {props.author} </a>
<div className="metadata">
<span className="date"> {props.timeAgo} </span>
</div>
<div className="text"> {props.blogText} </div>
</div>
);
};

export default CommentDetail;

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.