React 3 – React’a Genel Bir Bakış

React kendini tam olarak şöyle tanımlar:

Kullanıcı arayüzleri geliştirebileceğiniz bir JavaScript kütüphanesi

React yazarken JSX adında bir söz dizimi kullanacağız. HTML’e oldukça benzeyen, içinde küçük farklılıklar bulunduran basit bir söz dizimidir. JSX kullanımı zorunlu olmamakla beraber kullanılması tavsiye edilir.

package.json dosyası en önemli dosyalardan biridir. Burada bağımlılıklarımızı (dependencies) belirtiriz. Java’daki pom.xml dosyasına benzer özellikler taşır.

{
  "name": "react-training",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Gördüğünüz gibi projemizin adı, versionu, bağımlılıkları, scriptleri vs tanımlandığı dosyadır.

“public” klasörü altında “index.html” dosyası bulunur. Bu dosya npm start dediğimizde çalışan dosyadır.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    
  </body>
</html>

Comment leri sildiğimde yukarıdaki gibi bir kod kalıyor. Aslına bakarsanız çok basit bir dosya. Title ve body’sinde de id’si “root” olan bir div’den başka bir şey yok.

Bu div’i ise birazdan da göstereceğim üzere render ederek içini dolduracağız.

“src” dizinini altındaki “index.js” dosyası aşağıdaki gibidir.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

Burada görebileceğiniz üzere “APP” componentini, id’si “root” olan elementin içine dolduruyor. Yani aslında bizim uygulamamız “APP” componentinin içerisinden başlıyor.

“src” dizinini altındaki “index.css” dosyası projemizin ana css dosyasıdır.

Peki bu “APP” componenti nerede? “App.js” içinde. (style için ayrıca App.css de bulunur. )

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Bu kod bloğu bir react projesi oluşturduğunuzda default gelen bir koddur. Biz sıfırdan bir uygulama yazacağımız için bizi ilgilendirmeyen kısımları siliyoruz.

div içindeki tüm kodları siliyoruz ve kodumuzu aşağıdaki hale getiriyoruz.

import logo from './logo.svg';
import './App.css';

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

export default App;

Bu silme işleminden sonra http://localhost:3000/ adresine bakarsanız bomboş bir ekran ile karşılaşacaksınız. Çünkü her şeyi sildik. Bu pek de hoş görünen bir şey olmadığı için “Hello World” yazalım ve adet yerini bulmuş olsun 🙂

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
        Hello World!
    </div>
  );
}

export default App;

Artık ekranda “Hello World” yazısını görüyor olmalısınız.

Not: “Yukarıdaki değişiklikleri yaptım ama hala hiçbir değişiklik olmadı” diyorsanız, değişiklikleri kaydetmeniz gerekiyor. Tüm dosyaları kaydetmek için üst menüden “File” -> “Save All” diyebilirsiniz.

 

Sadık Bahadır Memiş

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir