ReactJS Kurulumu ve ReactJS Geliştirme Ortamı

Fatih Küçükkarakurt

Fatih Küçükkarakurt

5 min read

Bu makalede, başarılı bir React geliştirme için, kullanacağımız ortamın nasıl kurulacağını anlatacağız. İlgili birçok adım olduğuna dikkat edin. Tüm bu adımlar, geliştirme sürecini hızlandırmak için yardımcı olacaktır.

NodeJS Kurulumu

Öncelikle, NodeJS'ye ihtiyacımız olacak. Bu yüzden eğer NodeJS kurulu değilse, aşağıdaki bağlantıyı kontrol edin.

Kendi işletim sisteminiz için uygun olan NodeJS paketini buradan indirebilirsiniz. Windows ve Mac kullanıcıları için Installer paketlerini kurmaları, daha pratik olacaktır.

NodeJS'yi başarıyla kurduktan sonra, npm kullanarak React'i kurmaya başlayabiliriz. ReactJS'yi iki şekilde kurabilirsiniz:

  • Webpack ve Babel kullanarak,
  • create-react-app komutunu kullarak.

Webpack ve Babel Kullanarak ReactJS Kurulumu

Webpack bir modül paketleyicidir (bağımsız modülleri yönetir ve yükler). Bağımlı modülleri alır ve bunları tek bir dosya paketi halinde derler. Bu paketi uygulama geliştirirken komut satırını kullanarak veya webpack.config dosyasını yapılandırarak kullanarak kullanabilirsiniz.

Babel bir JavaScript derleyicisi ve aktarıcısıdır. Bir kaynak kodunu diğerine dönüştürmek için kullanılır. Bunu kullanarak, babel'in tüm tarayıcılarda çalıştırılabilen düz eski ES5'e dönüştürdüğü kodunuzdaki, yeni ES6 özelliklerini kullanabileceksiniz.

1. Adım: Root Klasörü Oluşturun

Gerekli tüm dosyaları mkdir komutunu kullanarak yüklemek için masaüstünde reactApp adında bir klasör oluşturun.

mkdir reactApp
cd reactApp

Herhangi bir modül oluşturmak için package.json dosyasının oluşturulması gerekir. Bunu yapmak için komut isteminden npm init komutunu çalıştırmanız gerekir.

npm init

Bu komut size, modül ile ilgili paket adı, açıklama, yazar gibi bazı bilgiler soracaktır. –y seçeneği ile bunları atlayabilirsiniz.

npm init -y
package.json:  
{  
    "name":  "reactApp",
    "version":  "1.0.0",
    "description":  "",
    "main":  "index.js",
    "scripts":  { 
        "test":  "echo \"Error: no test specified\" && exit 1"
    },  
    "keywords":  [],
    "author":  "",
    "license":  "ISC"
}

2. Adım: React ve React Dom Kurulumu

Ana görevimiz ReactJS'yi kurmak. ReactJS'yi ve dom paketlerini, sırasıyla npm'nin install react ve react-dom komutlarını kullanarak kuracağız. Kurduğumuz paketleri --save seçeneğini kullanarak package.json dosyasına ekleyebilirsiniz.

npm install react --save
npm install react-dom --save

3. Adım: Webpack Kurulumu

Webpack ve kullanacağımız diğer paketleri aşağıdak komutlar ile kuracağız.

npm install webpack --save
npm install webpack-dev-server --save
npm install webpack-cli --save

4. Adım: Babel Kurulumu

Babel'i ve bazı Babel eklentilerini kurmak için aşağıdaki komutları kullanacağız.

npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-env --save-dev
npm install babel-preset-react --save-dev
npm install html-webpack-plugin --save-dev

Tüm bu eklentileri aşağıdaki gibi tek bir komut halinde de kurabilirsiniz.

npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin --save-dev

5. Adım: Dosyaları Oluşturun

Kurulumu tamamlamamız için bazı dosyaları tanımlamamız gerekiyor. index.html, App.js, main.js, webpack.config.js ve .babelrc gibi belirli dosyaları oluşturmamız gerekiyor.

Bu dosyaları isterseniz teker teker kendiniz ekleyebilirsiniz. Alternatif olarak yine komutları kullanabiliriz.

touch index.html
touch App.js
touch main.js
touch webpack.config.js
touch .babelrc

6. Adım: Derleyici, Sunucu ve Yükleyici Yapılandırması

webpack.config.js dosyasını açın ve aşağıdaki kodu ekleyin. Webpack giriş noktasını main.js olarak ayarlıyoruz. Çıktı yolu, paketlenmiş uygulamanın sunulacağı yerdir. Ayrıca geliştirme sunucusunu 8001 port noktasına ayarlıyoruz. Siz elbette eğer bu portta başka bir framework kullanıyorsanız veya başka bir portta çalışmak isterseniz, bunu değiştirebilirsiniz.

//webpack.config.js
const path = requie('path');
const  HtmlWebpackPlugin  =  require('html-webpack-plugin');

module.exports = {
    entry: './main.js',
    output: {
        path: path.join(__dirname,  '/bundle'),
        filename: 'index_bundle.js'
},
    devServer: {
        inline: true,
        port: 8001
    },
    module: {
        rules: [
                {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
            })
    ]
}

Şimdi ise, package.json dosyasını açın ve "scripts" nesnesinin içindeki "test" "echo \"Error: no test specified\" && exit 1" i silin. Bu makalede herhangi bir test yapmayacağımız için bu satırı siliyoruz. Bunun yerine start ve build komutlarını ekleyelim.

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

7. Adım: index.html

Bu sadece normal bir HTML dosyasıdır. Uygulamamız için root öğe olarak div id = "app" ayarlıyoruz ve paket uygulama dosyamız olan index_bundle.js betiğini ekliyoruz.

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>React App</title>
</head>

<body>
    <a id = "app"></a>
    <script src = 'index_bundle.js'></script>
</body>
</html>

8. Adım: App.js ve main.js

Bu, ilk React bileşenimiz olacak. Hadi bu bileşenleri oluşturup, Hello World! döndürelim.

//App.js
import React, { Component } from 'react';
class App extends Component{
    render(){
        return(
            <a>
                <h1>Hello World!</h1>
            </a>
        );
    }
}
export default App;

Oluşturduğumuz bu bileşeni içe aktarmamız ve onu tarayıcıda görebilmemiz için main.js dosyamızı da hazırlayalım.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

Bir şeyi kullanmak istediğinizde, önce onu içe aktarmanız gerekir. Bileşeni uygulamanın diğer bölümlerinde kullanılabilir hale getirmek istiyorsanız, oluşturduktan sonra dışa aktarmanız ve kullanmak istediğiniz dosya içerisine aktarmanız gerekir.

Az önce oluşturduğumuz .babelrc dosyasını açın ve aşağıdaki içeriği ona kopyalayın.

{
   "presets":["env", "react"]
}

9. Adım: Sunucuyu Çalıştırın

Artık kurulum tamamlandı ve aşağıdaki komutu çalıştırarak sunucuyu başlatabiliriz.

npm start

Tarayıcıda açmamız gereken bağlantı noktası gösterilecektir. Bunu, http://localhost:8001/ olacak şekilde 8001 portuna ayarlamıştık. Bu adrese gittiğinizde Hello World! ile karşılaşmış olmanız gerekir.

10. Adım: Paket Oluşturma

Son olarak, paketi oluşturmak için komut isteminde build komutunu şu şekilde çalıştırmanız gerekir:

npm run build

Artık geçerli klasörünüz içinde, oluşturduğunuz paketi görebilirsiniz.

create-react-app Komutunu Kullanarak ReactJS Kurulumu

Webpack ve babel kullanmak yerine create-react-app kurarak ReactJS'yi daha basit bir şekilde kurabilirsiniz.

1. Adım: create-react-app Kurulumu

Aşağıda gösterilen komutları uygulayarak create-react-app 'i kolayca kurabilirsiniz.

npx create-react-app my-app

Bu komut my-app adlı bir klasör oluşturucak ve gerekli tüm dosyaları içine yükleyecektir.

2. Adım: Kaynak Dosyaları Silme

Oluşturulan my-app klasöründeki src klasörüne göz atın ve içindeki tüm dosyaları aşağıda gösterildiği gibi kaldırın.

cd my-app/src
del *
Are you sure (Y/N)? y

3. Adım: Gerekli Dosyaları Ekleme

src klasörümüz içerisine index.js ve index.css dosyalarımızı oluşturacağız.

touch index.js
touch index.css

index.js dosyamızın içine girelim, aşağıdaki kodları buraya yazalım.

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

4. Adım: Projeyi Başlatma

Sonunda ReactJS projemiz hazır. Artık sunucuyu başlatabiliriz.

npm start

http://localhost:3000 portu üzerinde ReactJS projenizi görebilirsiniz.


Burası Anatoliacode.

Sağlıcakla Kalın.

Anatoliacode Makale Aboneliği

Bize abone olarak tüm makaleleri ilk siz okuyabilirsiniz. Ayrıca asla reklam veya spam yapmıyoruz.