React 16 props Kullanımı

ReactJS çalışma ortamında sürekli bazı değişiklikler oluyor. Yeni değişiklik ise props kullanımıyla alakalı. ReactJS 16 sürümüyle beraber npx create-react-app my-app yaparak yeni bir tek sayfalık uygulama oluşturmaya başlamak bize kolaylık sağlıyor fakat props kullanımında da dikkat edilmesi gereken noktalar ortaya çıkıyor.
Bu yolla oluşturduğunuz app.js app.js dosyanızın içeriği standart olarak aşağıdaki gibi geliyor:

import React from 'react';
import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
 
export default App;

burada porps kulanmak için yapılacak değişiklik sonucu app.js aşağıdaki gibi olmalıdır:

import React from 'react';
import logo from './logo.svg';
import './App.css';
 
function App(props) {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
         merhaba {props.name}
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
 
export default App;

index.js dosyamız ise:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
 
ReactDOM.render(<App name="kod günlüğüm"/>, document.getElementById('root'));
 
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Bu İçeriğe Puan Verebilirsiniz
[Toplam: 0 Ortalama: 0]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

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