React.js Kurulum ve İlk Uygulama

React.js ile ilk bir uygulama oluşturmak için aşağıdaki adımları izleyebilirsiniz. İlk olarak, Node.js ve npm (Node Package Manager) yüklemiş olmanız gerekmektedir. Node.js ve npm’yi bilgisayarınıza indirmek için https://nodejs.org/ adresini ziyaret edebilirsiniz.

1. Node.js ve npm Kurulumu:
   Node.js ve npm’i indirip yükledikten sonra, terminal veya komut istemcisini açın ve node -v ve npm -v komutlarını kullanarak kurulumun yapıldığını kontrol edin. Sürüm numaraları görüntülendiğinde, Node.js ve npm başarıyla yüklendi demektir.
2. React Uygulama Oluşturma:
   React uygulaması oluşturmak için create-react-app adlı bir araç kullanabilirsiniz. Bu araç, bir başlangıç projesi oluşturmak ve gerekli dosyaları ve bağımlılıkları otomatik olarak eklemek için kullanılır.
   Terminalde aşağıdaki komutu çalıştırarak yeni bir React uygulaması oluşturun:

   npx create-react-app ilk-react-uygulamam

ilk-react-uygulamam klasör adı, oluşturmak istediğiniz uygulamanın adıdır. İstediğiniz bir

klasör adıyla değiştirebilirsiniz.

3. Uygulamayı Çalıştırma:
   Uygulama oluşturulduktan sonra, oluşturulan klasörün içine gidin:

   cd ilk-react-uygulamam

Ardından, aşağıdaki komutu kullanarak React uygulamanızı başlatın:

   npm start

Bu komut, tarayıcınızda React uygulamanızı başlatır. Tarayıcınız otomatik olarak açılır ve http://localhost:3000 adresine gider, burada yeni React uygulamanızı görebilirsiniz.

4. Uygulama Kodunu Düzenleme:
   Oluşturulan uygulamanın kodunu bir metin düzenleyicide açarak src klasörü altındaki dosyaları düzenleyebilirsiniz. src/App.js dosyası, varsayılan olarak oluşturulan ana bileşeni içerir. Bu dosyayı düzenleyerek uygulamanızı özelleştirebilirsiniz.

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;

App.js dosyanızın içeriğini aşağıdaki gibi değiştirin.

function MyButton() {
  return (
      <button>
        I'm a button
      </button>
  );
}

export default function MyApp() {
  return (
      <div>
        <h1>Welcome to my app</h1>
        <MyButton />
      </div>
  );
}

React.js ile basit bir uygulama oluşturmanın temel adımları budur. Uygulamanızı oluşturduktan sonra, React ve JSX sözdizimini öğrenmeye başlayabilir ve uygulamanızı istediğiniz gibi genişletebilirsiniz.

Share on Facebook

Tweet