React JS Uygulaması Başlangıç

Web geliştirme ile ilgili konuları burada bulabilirsiniz
Cevapla
Kullanıcı avatarı
melihcelenk
Site Admin
Mesajlar: 218
Kayıt: 05 Eki 2021, 03:23

React JS Uygulaması Başlangıç

Mesaj gönderen 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.
Cevapla