ReactJS Ders 6 | JSX

JSX Nedir?

JSX, React uygulamalarında JavaScript ve HTML‘i birleştiren bir sözdizimidir. JSX, React bileşenlerini oluşturmak için kullanılır ve React tarafından JavaScript’e dönüştürülerek işlenir.

JSX Kullanımı:

JSX, JavaScript ifadelerini ve HTML benzeri öğeleri birleştirir. Bileşenler, JSX sözdizimiyle tanımlanır ve bileşenin görüntüsünü (UI’sini) belirtmek için kullanılır.

Functional Component Örneği:

import React from 'react';

const Welcome = (props) => {
  return <h1>Merhaba, {props.name}!</h1>;
}

export default Welcome;

Bu örnekte, Welcome adında bir işlevsel bileşen oluşturduk. JSX sözdizimini kullanarak bir başlık elementi döndürdük. props parametresi, bileşene geçirilen özellikleri temsil eder ve JSX içinde kullanılabilir.

Class Component Örneği:

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Merhaba, {this.props.name}!</h1>;
  }
}

export default Welcome;

Bu örnekte, Welcome adında bir sınıf bileşeni oluşturduk. JSX sözdizimini kullanarak bir başlık elementi döndürdük. this.props ifadesi, bileşene geçirilen özelliklere erişmek için kullanılır.

Bileşenleri kullanmak için başka bir bileşende (örneğin, App bileşeninde) Welcome bileşenini kullanabilirsiniz:

import React from 'react';
import Welcome from './Welcome';

const App = () => {
  return (
    <div>
      <h2>React Uygulaması</h2>
      <Welcome name="Fatih" />
    </div>
  );
}

export default App;

Bu örnekte, App adında bir işlevsel bileşen oluşturduk ve Welcome bileşenini içine ekledik. Welcome bileşenine name özelliğini Fatih değeriyle ilettik. App bileşeni, bir başlık ve Welcome bileşenini içeren bir UI döndürür.

JSX, JavaScript ve HTML‘i birleştirerek React bileşenlerini tanımlamak ve görüntülemek için güçlü bir araçtır. JSX, React tarafından JavaScript’e dönüştürülerek optimize edilir ve tarayıcı tarafından anlaşılabilir hale getirilir.