Sıfırdan React Uygulaması Oluşturma

React ile proje geliştirme çok eğlencelidir. Öncelikle proje oluşturmak için bir IDE kullanmalıyız. Genellikle yazılım geliştiricilerin tercihi visual studio code ‘dur.

Öncelikle bir klasör oluşturuyoruz. Genellikle cmd kullanarak bu işlemi yapmak bence daha kolay.

• Windows kullanıyorsak komut istemini açıyoruz.
• Macos kullanıyorsak mac terminalini açıyoruz.
• mkdir komutunu kullanarak bir klasör oluşturuyoruz.

mkdir first-react-project

cd first-react-project

kodu ile klasör’e giriş yapıyoruz.Sonrasında code . diyerek first-react-project klasörünün içerisinde visual studio code’u açıyoruz.

npx create-react-app my-app

kodunu kullanarak my-app isimli bir react projesi oluşturuyoruz. Bu durum birkaç dakika sizi bekletebilir. Gerekli paketler yüklenecektir.

Sonrasında bu ekranda birkaç dakika bekliyoruz. İnternet hızınıza göre paketlerin yüklenme süresi hızlı olacaktır.

Klasörünüze default olarak indirilecek olan dosyalar :

• node_modules : node paketlerinin bulunduğu dosyadır.
• public : favicon, index.html, manifest.json,robot.txt dosyalarını barındırır.
• src : gerekli kodlarımızı yazdığımız dosyadır.İçerisinde app.js , app.css , index.js , index.css gibi dosyaları içerisinde barındırır. Components klasörümüzü bu kısımda oluştururuz.
• .gitignore
• package-lock.json
• package.json

Default olarak klasörünüze indirilecek dosyalar bunlardır.

öncelikle projemizi başlatalım. Yapmamız gereken visual studio code’ da sol üst kısımda bulunan terminal kısmına tıklıyoruz. Yeni terminal (new terminal) kısmına tıklayarak terminal ekranını açıyoruz. Sonrasında yazmamız gereken kod :

npm start

Bu kod projemizi ayağa kaldıracaktır. Ve local’de projemizi çalıştırmamıza yardımcı olacaktır.

Projemizi açtıktan sonra localhost:3000 portunda projemiz açılacaktır. Projemizin default kısmı bu görselde göründüğü gibidir.

Visual studio code’u açıyoruz. src dosyamıza components klasörümüzü oluşturuyoruz. Bu dosyada componentslerimizi tanımlanayağız.

import './App.css';
import BasicForm from './components/BasicForm';

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

export default App;

Projemizi ayağa kaldıran app.js dosyamızdır.

Kod bloğunu anlatmak gerekirse ;

Bir function app’imiz var. Bu app.js dosyamızda çalıştırdığımız bir components var. BasicForm componenti. Bu componenti bir <div> elementinin içerisinde yazıyoruz sebebi ise birden fazla elementi kullanmak istediğimizde react bizlerden bir div istiyor. bizde burada o divi yerine koyduk. İmport komutu ile componentimizi app.js dosyamıza import ettik.

Yazmış olduğum BasicForm componentinin kodunu paylaşıyorum.

import React, { Component } from 'react'

export default class BasicForm extends Component {
    constructor(props) {
      super(props)
    
      this.state = {
         username:'',
         lesson:'',
         date:''
      }
    }
    chaneUsername=(event)=>{
        this.setState({
            username:event.target.value
        })
    }
    chaneLesson=(event)=>{
        this.setState({
            lesson:event.target.value
        })
    }
    chaneDate=(event)=>{
        this.setState({
            date:event.target.value
        })
    }
    submitHandler=(event)=>{
        alert(`İsim : ${this.state.username} Ders : ${this.state.lesson} Tarih ${this.state.date}`)
        event.preventDefault()
    }
    
  render() {
    return (
      <div>
        <form>
            <div>
            <input onChange={this.chaneUsername} value={this.state.username} type='text'/>
            </div> 
            <div>
                <select onChange={this.chaneLesson} value={this.state.lesson}>
                    <option>Python</option>
                    <option>Java</option>
                    <option>PHP</option>
                </select>
            </div>
            <div>
                <input onChange={this.chaneDate } value={this.state.lesson} type='date'/>
            </div>
            <button onClick={this.submitHandler} type='submit'>Gönder</button>
        </form>
      </div>
    )
  }
}

npm start ile kodumuzu çalıştırıyoruz.

Sayfamızın görüntüsü bu şekilde.

React Component Oluşturma Kısayolları

Öncelikle visual studio code’da react kullanırken react extensions‘ını indirmeniz gerekir.

Bu extensions ile kullanabileceğiniz bazı kolaylıklar bulunuyor.

• rcc : react class component oluşturmamıza yardımcı olacaktır.
• rfc : react function component oluşturmanıza yardımcı olacaktır.