E-ticaret Uygulaması

Hazırlayan: Onur Ergençiçeği

genel açıklama

Sadece react içeren bölümleri ele almak gerekirse react-router-dom aracılığı ile bu sitede bir ürün sayfası ve ödeme sayfası kullanacağım

 ve ürünlerin sıra sıra tanıtılması için bir ürün tanıtım compontenti oluşturucam bu zaten react'in en önemli özelliklerinden visual-dom(sanal-dom) oluşturma özelliğidir bu özellik aracılığı ile bir ürünün tanıtımı için hazırlanan panel sadece görsel ve açıklamaların değişmesi ile işimizi hem hızlı yapmamızı hem de belleği daha tasarruflu kullanmamızı sağlar.

hazırlayacağım uygulama 2 sayfa içermekte kod satırını aşşağıda görebilirsiniz (henüz bitmedi)

import React from "react";

import './App.css';

import './components/navbar.css';

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import {Home} from "./pages/home/home";

import {Pay} from "./pages/pay/pay";

import { Navbar } from './components/Navbar';

function App() {

  return (

    <div className="App">

    <Router>

      <Navbar />

      <Routes>

        <Route path="/" element={<home />}/>

        <Route path="/pay" element={<pay />}/>

      </Routes>

    </Router>

    </div>

  );

}

export default App;

aşşağıda ise örnek bir ürün tanıtım componenti görmektesiniz bunu örnek teşkil etmesi açısından temsili olarak yazdım

import React from 'react';

import ProductTemplate from './ProductTemplate';

const ProductTemplate = ({ name, price, description }) => {

  return (

    <div>

      <h2>{name}</h2>

      <p>Price: {price}</p>

      <p>Description: {description}</p>

    </div>

  );

};

export default ProductTemplate;