React ile Yazmaya Başlayın

Doğrudan DOM API kullanarak bir Öğe oluşturabilirsiniz. Bunu yapmak için, kök öğeyi almanız ve iç HTML'yi ayarlamanız gerekir, hepsi bu. Aşağıdaki örneğe bakın.

document.getElementById('root').innerHTML = `
  <div>
    Hello World!
  </div>
`;

Bunu yapmak için bir React DOM Renderer eklemeniz gerekir. Bunun içine iki parametre eklemelisiniz. Bunlardan biri React Create Element, diğeri ise HTML kök elementidir. Aşağıdaki kodu takip edin.

ReactDOM.render(
  React.createElement(),
  document.getElementById(),
);

ReactDOM.render(
  React.createElement(
    'tagname',
    'style',
    'Insert, what do you want to see in the output!',
  ),
  document.getElementById(),
);

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello World!',
  ),
  document.getElementById('root'),
);

Burada alternatif bir yöntem var. HTML'yi 'React.createElement' yerine doğrudan ekleyebilirsiniz. Aşağıdaki örneğe bakalım. Eğer ilgileniyorsanız, çıktıyı CodePan'da görebilirsiniz .

ReactDOM.render(
  <div>Hello World!</div>,
  document.getElementById('root'),
);

React Öğelerini Yerleştirelim!

React Create Element'in içine bir yuvalama öğesi ekleyelim. 1. Create Element'in içine, yuvalama için başka bir tane ekleyebilirsiniz. Anlamıyor musun? Bakalım…

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello World!',
    React.createElement(
      'pre',
      null,
      new Date().toLocaleTimeString(),
    ),
  ),
  document.getElementById('root'),
);

const time = () => {
  ReactDOM.render(
    React.createElement(
      'div',
      null,
      'Hello World!',
      React.createElement(
        'pre',
        null,
        new Date().toLocaleTimeString(),
      ),
    ),
    document.getElementById('root'),
  );
}
setInterval(time, 1000);

JSX

const element = <h1>Hello, world!</h1>;

HTML5'in bazı durumlarda kapanış etiketi gerektirmediğini fark edebilirsiniz. (yani <img>, <br>, <hr> vb.) Ancak JSX'in kapanış etiketi olmalıdır. (yani <img />, <br />, <hr /> vb.) Aksi takdirde bazı hatalarla karşılaşabilirsiniz.