Herkese merhaba arkadaşlar bu yazımda sizlere create-react-app kullanmadan nasıl kendi React projenizi oluşturabileceğinizi anlatacağım.Bu yöntemle create-react-app projesinin iç yapısını görüp react ve diğer konfigurasyonların nasıl çalıştığını daha iyi anlayacağınızı düşünüyorum.
Evet hemen başlayalım ilk olarak paketleri kuracağız.Bunu yapmadan önce bir tane package.json dosyası generate etmemiz gerekli.Bunun için yarn init -y komutunu kullanabiliriz.Bu bize boş bir package.json dosyası oluşturacaktır.
/* ilk olarak react ve react-dom'u kuralım*/
yarn add react react-dom
Ardından dev dependency’leri kuralım.
1- yarn add --dev webpack webpack-dev-server webpack-cli html-webpack-plugin
2- yarn add --dev @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
yukarıdaki paketleri de kurduktan sonra klasör yapımızı oluşturabiliriz.
Ilk olarak ana dizinde src adlı bir klasör oluşturalım.Ardından aynı dizinde public adlı bir klasör daha oluşturalım.Aynı şekilde production kodlarımızı içercek olan dist adlı klasörü de oluşturalım.
Bunları yaptıktan sonra yine ana dizinde webpack.config.js adlı bir dosya oluşturalım.Bu dosya webpack ile ilgili işlemleri yapacağımız dosyadır.
Son olarak .babelrc adlı bir babel config dosyası oluşturalım ve klasör yapısını tamamlayalım.Son olarak klasör yapımız aşağıdaki gibi görünecektir.
Şimdi ilk olarak React uygulamamızı içerisine gömeceğimiz index.html dosyasını oluşturalım.Bu dosyayı public/ dizini altında oluşturalım ve içini aşağıdaki gibi dolduralım.Bunu kendi editörünüzde emmet adlı extension ile ! + tab tuş kombinasyonuyla da oluşturabilirsiniz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react-app</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Burada id’si app olan div içerisine react uygulamamız gelecektir.
Ardından src/ adlı klasör altında index.js adlı bir dosya oluşturalım aynı kalsör içerisinde components adlı bir klasör daha oluşturalım ve içerisine App.js adlı bir dosya oluşturalım ve ardından aşağıdaki kodları sırası ile ekleyelim.
/* /src/index.js */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('app'));
Burada ise react ve react-dom kütüphanelerini çekiyoruz ve id’si app olan div’in içerisine ReactDOM’un render metodu ile uygulamamızı initialize ediyoruz.
Ardından /components/App.js adlı dosyamız içerisine aşağıdaki kodları ekliyoruz.
import React, { Component } from 'react';
class App extends Component {
state = { }
render() {
return (
<div>
<h1>Babel ve webpack ile sıfırdan react projesi oluşturmak</h1>
</div>
);
}
}
export default App;
Evet bu kodları da ekledikten sonra src kalsörü ile işimiz bitti.Şimdi sıra geldi webpack ve babel konfigurasyonlarını yapmaya ilk olarak webpack.config.js dosyasını açıp içerisine aşağıdaki kodları ekleyelim.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/index.js',
output: {
path: path.join(__dirname,'/dist'),
filename:'bundle.js'
},
module: {
rules: [
{
test: /\.js|jsx?$/,
exclude: [
path.resolve(__dirname,'/node_modules')
],
use: {
loader:'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template:'./public/index.html'
})
]
}
Burada entry kısmına React uygulamamızı div içerisine eklediğimiz js dosyasının path’ini veriyoruz.Ardından gelen output objesi ise yazdığımız js kodlarının webpack tarafından bundle(paket) haline getirilip çıkartılacağı dizini veriyoruz.Dosyamızın adını da bundle.js olarak belirledik.Buraya istediğiniz bir dosya adı verebilirsiniz.
Ardından module objesi içerisinde kuralımızı belitiyoruz.Burada test kısmında js ve jsx dosyalarını içeren bir regex kodu mevcut.use kısmında ise babel-loader kullandık.Bu paket .js ve .jsx dosyalarını webpack ve babel kullanarak transpile edilmesini sağlıyor.
Son olarak plugins kısmına da en tepede çağırdığımız HtmlWebpackPlugin’i şekildeki gibi ekledikten sonra burası ile işimiz bitmiş bulunmakta.
Geldik Babel konfigurasyonunu yapmaya.Burası çok karmaşık değil.Önceden ana dizinde oluşturduğumuz .babelrc dosyası içerisine gelelim ve aşağıdaki kodları ekleyelim.
{
"presets":["@babel/preset-env","@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
Burada kurduğumuz iki preset paketini preset arrayi altında babel’a tanıtıyoruz.Aynı şekilde eklediğimiz diğer plugini ise plugins adlı array içerisine tanımlıyoruz ve gerisini Babel’a bırakıyoruz.
Babel ile de işimiz bitti son olarak package.json dosyası içerisinde scriptlerimizi tanımlayacağız.package.json dosyası içerisine gelip aşağıdaki farklı kısımları kendi package.json dosyanıza ekleyin.
{
"name": "webpack-babel-react",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"license": "MIT",
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"@babel/preset-react": "^7.8.3",
"babel-loader": "^8.0.6",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
Son olarak komutlarımızı çalıştırıp test edelim.Ilk olarak terminalden yarn dev komutunu çalıştıralım.
Resimde görüldüğü gibi uygulama ayakta.Son olarak yarn build komutunu çalıştıralım ve production kodlarını görelim.
Resimde görüldüğü gibi dist klasörü altında bundle.js ve index.html adlı dosyalarımız geldi.Şimdi kodlarımız deploy edilmeye hazır.
Son olarak bu projeyi frontend uygulamalarımızı ücretsiz tutabileceğimiz surge servisine nasıl deploy edeceğimizi anlatayım.Kayıt olma ve kurulum işlemlerini buradan yaparak proje ana dizininde bir terminal ekranı açalım ve surge komutunu çalıştıralım. Ve bize aşağıdaki resimde olduğu gibi sorular soracaktır.Bu soruları cevaplayalım ve deploy etmesini bekleyelim ve bize generate ettiği linkten projemize ulaşabiliriz.
Ve evet gördüğünüz gibi projemizi surge.sh üzerinde canlıya aldık.
Evet arkadaşlar benim anlatacaklarım bugünlük bu kadar umarım faydalı olmuştur.Projenin kodlarını aşağıya bırakacağım.Bir sonraki yazıda görüşmek üzere hoşçakalın.
Yararlandığım kaynaklar:
