1. HTML yapısını ayarlamak: CodePen projesinde HTML düzenleyicisinde, React uygulamasının render edileceği bir

   <div>

   elemanı oluşturun ve bu elemana

   id

   niteliği verin 12.

<div id="root"></div>
Kopyala

2. React ve React DOM'u ithal etmek: CodePen'in ayarlarına giderek, aşağıdaki script etiketlerini ekleyin 12.

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
Kopyala

3. Babel'i ithal etmek: JSX kodunun çalıştırılması için Babel kompilatörünü ekleyin 12.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
Kopyala

4. React bileşenini yazmak: JavaScript düzenleyicisinde, JSX sözdizimini kullanarak React bileşeninizi tanımlayın 12.

function App() {
  return (
    <h1>Hello World</h1>
  );
}
Kopyala

5. React bileşenini render etmek:

   ReactDOM.createRoot()

   yöntemini kullanarak, bileşeni bir kök eleman içinde render edin 1.

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);
Kopyala

6. CodePen'i çalıştırmak: Tüm adımları tamamladıktan sonra, projenizi çalıştırın ve React bileşenini görün 1.