React JS Uygulaması Başlangıç

[melihcelenk]

npx create-react-app projem

ile projemizi oluştururuz

npm start

const {title, description} = props;
ile projemizi başlatırız

App.js dosyamızı aşağıdaki gibi düzenleyip Course isminde bir component oluşturalım

App.js:

Kod: Tümünü seç

import './App.css';
import { Course } from './Course';

function App() {
  return (
    <div className="App">
      <Course/>
    </div>
  );
}

export default App;

Visual Studio Code'da ES7+ React/Redux/React-Native snippets eklentisini yüklersek Course.js dosyamızı oluşturup içinde rafc yazarak aşağıdaki gibi bir arrow functional component oluşturabiliriz.

Course.js

Kod: Tümünü seç

import React from 'react'

export const Course = () => {
  return <div>Course</div>;
}

Eğer ffc yazarsak:

Kod: Tümünü seç

function Course() {
    return (  );
}
export default Course;

şeklinde bir functional component oluştururuz ve App.js'de süslü parantez yerine

Kod: Tümünü seç

import Course from './Course';

şeklinde bir import yaparız


Props Kullanımı

Course içinde function Course(props) olarak parametre geçer ve App.js'de

Kod: Tümünü seç

<Course title="React Kursu" description="Xyz"/> 

olarak yazarsak return içinde {props.title} olarak değişkeni kullanabiliriz. Ancak bunu bir değişkene atamak daha profesyonel.

Kod: Tümünü seç

const title = prop.title;

veya bunu da daha kısa bir şekilde yapmak istersek

Kod: Tümünü seç

const {title, description} = props;

şeklinde yazabiliriz.

Kod: Tümünü seç

function Course(props) {
    const {title, description} = props;
    return (  
        <>
        <div>
            <h1>{title}</h1>
        </div>
        <div>
            {description}
        </div>
        </>

    );
}
export default Course;

veya daha da basitleştirmek istersek

Kod: Tümünü seç

function Course({title, description}) {

yazarak ayrıca değişken atamasından kurtulmuş oluruz.